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