md`# Chloropleth Mapping of %Adults With Under a 9th Grade Education.
Data: [https://hub.arcgis.com/datasets/USCensus::educational-attainment-states-2015-2019/about]
Map Interpretation: New York, California, and Texas have the largest percentages of adults with under a 9th grade education. The South East is homogenous, all sharing simialr values between the 4.1 and 5.1 range
The North demonstrates the lowest rates, such as Montanta, SOuth Dakota, Wisconsin, Minnesota, and Michiga. There is a large strip of high rates along the south west border with california, texas, new mexico, nevada, and arizona.
Natural breaks was used to maintain the higher and lower ends of the data, in an attempt to highlight large disparities between states. 5 classes were used to keep visual differntiation and simplicty.
I chose a sequential color scheme to represent the natural ordering of the data.
`
d3 = require("d3@5")
import {legend} from "@d3/color-legend"
simple = require("simple-statistics@7.0.7/dist/simple-statistics.min.js")
format = d => `${d}%`
topojson = require("topojson-client@3")
iowa = FileAttachment("iowa_counties_topo.json").json()
us = FileAttachment("EducationAttainment.topojson").json()
counties = topojson.feature(iowa, iowa.objects.iowa_counties)
states = topojson.feature(us, us.objects.EducationAttainment)
csv_data = d3.csvParse(await FileAttachment("EdAttainment.csv").text(),({NAME, Under9thGr}) => [NAME, [+Under9thGr]])
data = Object.assign(new Map(csv_data), {title: "% Adults Under 9th Grade Education"})
percents = Array.from(csv_data.values(), d => d[1][0])
YlGnBu = [d3.color("#fef0d9"), d3.color("#fdcc8a"), d3.color("#fc8d59"), d3.color("#e34a33"),d3.color("#b30000")]
naturalbreaks = simple.ckmeans(percents, YlGnBu.length).map(v => v.pop())
//more information on sequential scales: https://observablehq.com/@d3/sequential-scales
// color = d3.scaleSequentialQuantile([...data.values()], d3.interpolateBlues)
// color = d3.scaleQuantile()
// .domain(med_age)
// .range()
color = d3.scaleThreshold()
.domain(naturalbreaks)
.range(YlGnBu)
width = 975
height = 610
margin = 100
projection = d3.geoAlbersUsa().fitExtent([[10, 10], [width - 220, height]], states);
//Using a path generator to project geometry onto the map
path = d3.geoPath().projection(projection);
choropleth = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.attr("transform", "translate(360,20)")
.append(() =>
legend({
color: color,
title: data.title,
width: 260,
tickFormat: ".1f"
})
);
svg.append("g")
.selectAll("path")
.data(states.features)
.join("path")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 1)
// .attr("fill", function(d){
// console.log(color(data.get(d.properties.FIPS)[0]))
// return color(data.get(d.properties.FIPS)[0]);
// })
.attr("fill", d => color(data.get(d.properties.NAME)[0]))
.attr("d", path)
.append("title")
.text(d => " Percent Under 9th Grade Education: " + data.get(d.properties.NAME));
svg.selectAll(".subunit-label")
.data(counties.features)
.enter().append("text")
.attr("class", function(d) { return "subunit-label " + d.id; })
.attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
.attr("fill", function(d){
if(data.get(d.properties.NAME)>38.9)
return "white";
else
return "black";
})
.attr("fill-opacity", "1")
// .attr("font-size", "15px")
.attr("font-size", function(d){
if(d.properties.FIPS.length > 10)
return "8px";
else
return "15px";
})
return svg.node();
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
