sammy/freecodecamp-projects
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add Choropleth Map certification project

Browse source
This commit is contained in:
CherryKitten 2022-11-05 15:55:43 +01:00
parent 8459b661d5
commit e054aaa23d
Signed by: sammy
GPG key ID: 0B696A86A853E955
5 changed files with 167 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
4-data-visualization/4-choropleth/index.css Normal file
View file

@ -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 */

1
4-data-visualization/4-choropleth/index.css.map Normal file
View file

@ -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"}

23
4-data-visualization/4-choropleth/index.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Freecodecamp Choropleth map</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.6.1/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.2/topojson.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
</head>
<body>
<h1 id="title">United States Educational Attainment</h1>
<p id="description"> Percentage of adults age 25 and older with a bachelor's degree or higher (2010-2014)</p>
<div id="chart">
<svg width="960" height="600"></svg>
</div>
<div id="legend"></div>
<div id="tooltip"></div>
<script src="index.js"></script>
<script src='https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js'></script>
</body>
</html>

97
4-data-visualization/4-choropleth/index.js Normal file
View file

@ -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);

22
4-data-visualization/4-choropleth/index.scss Normal file
View file

@ -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;
}