This project was created as part of the freeCodeCamp Data Visualization Certification.
The objective of the project is to build a choropleth map that shows the percentage of adults age 25 and older with a bachelor's degree or higher (2010-2014) using the D3.js library.
This code relies on the following external libraries:
• d3.js v6.7.0
• topojson v3.0.2
Both libraries are loaded using a CDN link in the HTML file.
The choropleth map uses two datasets from freeCodeCamp:
- counties.json containing the county boundaries of the United States in the TopoJSON format.
- [for_user_education.json](https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json) containing the educational attainment data of US counties in JSON format.
Here is an example of what the choropleth map looks like when you run the code:
The project is a single HTML file (index.html) with the following JavaScript code:
- Load the data files using d3.json.
- Create a SVG element to display the map.
- Create a color scale using d3.scaleThreshold.
- Create a tooltip.
- Create a legend using d3.selectAll.
- Use topojson.feature method to convert the county data to GeoJSON format.
- Use d3.selectAll and .data to bind the data to the SVG and create the path elements.
- Set the fill color of each county based on the percentage of adults aged 25 and older with a bachelor's degree or higher.
- Create interactivity with the tooltip on hover.
This code was developed by me and was based on the examples and instructions provided by the freeCodeCamp platform.