Visualize Data with a Choropleth Map - freeCodeCamp Data Visualization Project Tutorial

This is a walkthrough for the freeCodeCamp Choropleth Map project from start to finish. We import some JSON data with geographical and educational data about counties in the United States and use d3 to render a Choropleth Map, by converting topojson into geojson and then using the geoPath() method to draw paths. Written Guide and Source Code : https://www.notion.so/ganeshh123/WIP-Visualize-Data-with-a-Choropleth-Map-9d91d46e78d4406abc6a0d36f9e089dc Timestamps: 0:00 - Project Setup 03:02 - Creating Variables and Functions 04:05 - Fetching the Data 08:00 - Understanding and Converting the Data we need 15:02 - User Story #1: My choropleth should have a title with a corresponding id="title" 15:53 - User Story #2: My choropleth should have a description element with a corresponding id="description" 16:52 - User Story #3: My choropleth should have counties with a corresponding class="county" that represent the data 20:57 - User Story #4: There should be at least 4 different fill colors used for the counties 26:32 - User Story #5: My counties should each have data-fips and data-education properties containing their corresponding fips and education values 29:44 - User Story #6: My choropleth should have a county for each provided data point 30:36 - User Story #7: The counties should have data-fips and data-education values that match the sample data 31:15 - User Story #8: My choropleth should have a legend with a corresponding id="legend" 32:02 - User Story #9: There should be at least 4 different fill colors used for the legend 33:13 - User Story #10: I can mouse over an area and see a tooltip with a corresponding id="tooltip" which displays more information about the area 38:05 - User Story #11: My tooltip should have a data-education property that corresponds to the data-education of the active area 40:07 - Styling and Final Touches -————————————————————————————————————- D3.js (also known as D3, short for Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of Scalable Vector Graphics (SVG), HTML5, and Cascading Style Sheets (CSS) standards.

JSON (JavaScript Object Notation) is an open standard file format, and data interchange format, that uses human-readable text to store and transmit data objects consisting of attribute–value pairs and array data types.

TopoJSON is an extension of GeoJSON that encodes topology. Rather than representing geometries discretely, geometries in TopoJSON files are stitched together from shared line segments called arcs.

GeoJSON is an open standard format designed for representing simple geographical features, along with their non-spatial attributes. It is based on the Jav ... https://www.youtube.com/watch?v=ha1toFtBfF8