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-...
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 JavaScript Object Notation. The features include points, line strings, polygons, and multi-part collections of these types.
Ajax is a set of web development techniques using many web technologies on the client side to create asynchronous web applications. With Ajax, web applications can send and retrieve data from a server asynchronously without interfering with the display and behavior of the existing page.
freeCodeCamp (also referred to as “Free Code Camp”) is a non-profit organization that consists of an interactive learning web platform, an online community forum, chat rooms, online publications and local organizations that intend to make learning web development accessible to anyone. Beginning with tutorials that introduce students to HTML, CSS and JavaScript, students progress to project assignments that they complete either alone or in pairs. Upon completion of all project tasks, students are partnered with other nonprofits to build web applications, giving the students practical development experience.
Thanks for Watching!
На этой странице сайта вы можете посмотреть видео онлайн Visualize Data with a Choropleth Map - freeCodeCamp Data Visualization Project Tutorial длительностью часов минут секунд в хорошем качестве, которое загрузил пользователь Ganesh H 29 Июнь 2020, поделитесь ссылкой с друзьями и знакомыми, на youtube это видео уже посмотрели 19,916 раз и оно понравилось 390 зрителям. Приятного просмотра!
