From e054aaa23d6abf9b7d6e43309e8bfc0ded06b5e5 Mon Sep 17 00:00:00 2001 From: CherryKitten Date: Sat, 5 Nov 2022 15:55:43 +0100 Subject: [PATCH] Add Choropleth Map certification project --- 4-data-visualization/4-choropleth/index.css | 24 +++++ .../4-choropleth/index.css.map | 1 + 4-data-visualization/4-choropleth/index.html | 23 +++++ 4-data-visualization/4-choropleth/index.js | 97 +++++++++++++++++++ 4-data-visualization/4-choropleth/index.scss | 22 +++++ 5 files changed, 167 insertions(+) create mode 100644 4-data-visualization/4-choropleth/index.css create mode 100644 4-data-visualization/4-choropleth/index.css.map create mode 100644 4-data-visualization/4-choropleth/index.html create mode 100644 4-data-visualization/4-choropleth/index.js create mode 100644 4-data-visualization/4-choropleth/index.scss diff --git a/4-data-visualization/4-choropleth/index.css b/4-data-visualization/4-choropleth/index.css new file mode 100644 index 0000000..8ba55cd --- /dev/null +++ b/4-data-visualization/4-choropleth/index.css @@ -0,0 +1,24 @@ +html { + text-align: center; + margin: 0; + height: 100vh; + width: 100vw; + background-color: navajowhite; +} + +#tooltip { + display: none; + height: 25px; + width: 100px; + opacity: 0.8; + border-radius: 5px; + padding: 10px; + position: fixed; + z-index: 10; +} + +#chart { + text-align: center; +} + +/*# sourceMappingURL=index.css.map */ diff --git a/4-data-visualization/4-choropleth/index.css.map b/4-data-visualization/4-choropleth/index.css.map new file mode 100644 index 0000000..9c17504 --- /dev/null +++ b/4-data-visualization/4-choropleth/index.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE","file":"index.css"} \ No newline at end of file diff --git a/4-data-visualization/4-choropleth/index.html b/4-data-visualization/4-choropleth/index.html new file mode 100644 index 0000000..4935e5f --- /dev/null +++ b/4-data-visualization/4-choropleth/index.html @@ -0,0 +1,23 @@ + + + + + Freecodecamp Choropleth map + + + + + + + +

United States Educational Attainment

+

Percentage of adults age 25 and older with a bachelor's degree or higher (2010-2014)

+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/4-data-visualization/4-choropleth/index.js b/4-data-visualization/4-choropleth/index.js new file mode 100644 index 0000000..9d41395 --- /dev/null +++ b/4-data-visualization/4-choropleth/index.js @@ -0,0 +1,97 @@ +const svg = d3.select("svg"); + +const tooltip = d3.select("#tooltip"); + +const path = d3.geoPath(); + +let data = new Map(); +const colorScale = d3 + .scaleThreshold() + .domain([0, 5, 10, 15, 20, 25, 30, 45, 60, 100]) + .range(d3.schemePastel2); + +Promise.all([ + d3.json( + "https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/for_user_education.json" + ), + d3.json( + "https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/counties.json" + ), + (d) => { + data.set(d.code, +d.pop); + }, +]).then((data) => { + const eduData = data[0]; + const geoData = data[1]; + + svg + .append("g") + .selectAll("path") + .data(topojson.feature(geoData, geoData.objects.counties).features) + .enter() + .append("path") + .attr("class", "county") + .attr("d", path) + .attr("data-fips", (d) => { + return d.id; + }) + .attr("data-education", (d) => { + const result = eduData.filter(function (obj) { + return obj.fips === d.id; + }); + if (result[0]) { + return result[0].bachelorsOrHigher; + } + }) + .attr("data-county", (d) => { + const result = eduData.filter((obj) => { + return obj.fips === d.id; + }); + if (result[0]) { + return result[0].area_name; + } + }) + .attr("fill", (d) => { + const result = eduData.filter((obj) => { + return obj.fips === d.id; + }); + if (result[0]) { + return colorScale(result[0].bachelorsOrHigher); + } + }) + .on("mouseover", (e) => { + console.log(e); + + tooltip + .style("display", "initial") + .style("left", e.pageX + "px") + .style("top", e.pageY + "px") + .attr("data-education", e.target.attributes["data-education"].nodeValue) + .attr("data-county", e.target.attributes["data-county"].nodeValue) + .text( + e.target.attributes["data-county"].nodeValue + + ": " + + e.target.attributes["data-education"].nodeValue + + "%" + ) + .style("background-color", e.target.attributes["fill"].nodeValue); + }) + .on("mouseout", () => { + d3.select("#tooltip").style("display", "none"); + }); +}); + +d3.select("#legend") + .append("svg") + .attr("height", 100) + .attr("width", 400) + .selectAll("rect") + .data([0, 5, 10, 15, 20, 25, 30]) + .enter() + .append("rect") + .attr("fill", (d) => colorScale(d)) + .attr("x", (d, i) => i * 20) + .attr("y", 5) + .attr("height", 20) + .attr("width", 20) + .text((d) => d); diff --git a/4-data-visualization/4-choropleth/index.scss b/4-data-visualization/4-choropleth/index.scss new file mode 100644 index 0000000..915fe58 --- /dev/null +++ b/4-data-visualization/4-choropleth/index.scss @@ -0,0 +1,22 @@ +html { + text-align: center; + margin: 0; + height: 100vh; + width: 100vw; + background-color: navajowhite; +} + +#tooltip{ + display: none; + height: 25px; + width: 100px; + opacity: 0.8; + border-radius: 5px; + padding: 10px; + position: fixed; + z-index: 10; +} + +#chart { + text-align: center; +} \ No newline at end of file