md`# Third Exercise on Observable`
d3 = require("d3@5")
topojson = require("topojson-client@3")
Alabama = FileAttachment("Alabama.json").json()
county_features = topojson.feature(Alabama, Alabama.objects.Alabama1)
csv_data = d3.csvParse(await FileAttachment("Alabama.csv").text(),({FIPS, AGE_5_9, POP2010}) => [FIPS, [+AGE_5_9, +AGE_5_9/+POP2010]])
//This is the normalized variable I will be mapping. It was created by diving the population between 5-9 by the total population for each county in Alabama.
childpct = Array.from(csv_data.values(), d => d[1][1])
data = Object.assign(new Map(csv_data), {title: ["Percent Population of Alabama: between 5 & 9"]})
md`# Classification: Natural Breaks`
naturalbreaks = simple.ckmeans(childpct, YlOrBr.length).map(v => v.pop())
md`# Color Scheme`
YlOrBr = [d3.color("#fee391"), d3.color("#fec44f"), d3.color("#fe9929"), d3.color("#d95f0e"),d3.color("#993404")]
color = d3.scaleThreshold()
.domain(naturalbreaks)
.range(YlOrBr)
md`# Creating a Canvas`
width = 900
height = 600
md`# Projecting a Map`
projection = d3.geoTransverseMercator()
.rotate([154, 0])
.center([0, 62])
.fitExtent([[80, 80], [width, height]], county_features);
margin = 100
path = d3.geoPath().projection(projection);
md`# Creating a Choropleth Map`
choropleth = {
const svg = d3.create("svg")
.attr("viewBox", [0, 15, width, height]);
svg.append("g")
.attr("transform", "translate(360,20)")
.append(() =>
legend({
color: color,
title: data.title,
width: 350,
tickFormat: ".2f"
})
);
svg.append("g")
.selectAll("path")
.data(county_features.features)
.join("path")
.attr("stroke", "black")
.attr("stroke-width", 0.5)
.attr("stroke-linejoin", "round")
.attr("fill", d => color(data.get(+d.properties.FIPS)[1]))
.attr("d", path)
.append("title")
.text(d => format(data.get(+d.properties.FIPS)[1] + "%"));
return svg.node();
}
import {legend} from "@d3/color-legend"
format = d => `${d}%`
md`# Annex`
simple = require("simple-statistics@7.0.7/dist/simple-statistics.min.js")
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.
