This page showcases my projects for the freeCodeCamp Data Visualization Certification.
The projects were completed using D3.js, a JavaScript library for creating dynamic and interactive data visualizations in the browser.
I used HTML to create the baseline structure, then the charts were created using D3.js to manipulate the DOM and SVG elements to display the data. Some of the styling was also done with D3.js, then further customised with CSS. All datasets were provided by freeCodeCamp.
The projects include a bar chart, a scatterplot graph, a heat map, a choropleth map and a treemap.
Please note, the charts have been created to be responsive, however, for the best viewing experience, please view on a desktop/laptop.
If you are viewing on a mobile or tablet device, please rotate to landscape mode then refresh the page. If you are viewing on desktop and the chart is not displayed correctly, please refresh the page. This may be the case if you change the browser window size.
Bar Chart
Bar Charts are a simple way to display data. They are useful for comparing data across different categories.
For this project, a bar chart was created to display the United States GDP data from 1947 to 2015.
Scatterplot Graph
Scatterplot graphs are used to display the relationship between two sets of data. Each point on the graph represents a single data point.
For this project, a scatterplot graph was created to display the doping allegations in professional cycling, based on the 35 fastest times up Alpe d'Huez.
Heat Map
Heat maps are used to display data in a matrix format. They are useful for visualising complex data sets.
For this project, a heat map was created to display the variations in monthly global land-surface temperature data from 1753 to 2015, with the base temperature of 8.66°C.
Choropleth Map
Choropleth maps are used to display statistical data on a map. They are useful for visualising data across geographical regions.
For this project, a choropleth map was created to display the educational attainment by county in the United States. The data is based on the percentage of adults age 25 and older with a bachelor's degree or higher between 2010 and 2014.
Treemap Diagram
Treemap diagrams are used to display hierarchical data in a tree-like structure. They are useful for visualising large amounts of data.
For this project, three treemap diagrams were created to display the top 100 most sold videogames grouped by platform, the top 100 highest grossing movies grouped by genre, and the top 100 most pledged Kickstarter campaigns grouped by category.