Public
Edited
Dec 12, 2022
Insert cell
Insert cell
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, 975, 610]);

svg.append("g")
.attr("transform", "translate(610,20)")
.append(() => legend({color, title: data.title, width: 260}));

svg.append("g")
.selectAll("path")
.data(topojson.feature(us, us.objects.TZ).features)
.join("path")
.attr("fill", d => color(data.get(d.properties.Region_Cod.toString())))
.attr("d", path)
.append("title")
.text(d => `${d.properties.Region_Nam}, ${states.get(d.properties.Region_Cod).Region_Cod},
${format(data.get(d.properties.Region_Cod.toString()))}`);

svg.append("path")
.datum(topojson.mesh(us, us.objects.TZ, (a, b) => a == b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("d", path);

svg.append("path")
.datum(topojson.mesh(us, us.objects.TZ, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("d", path);

return svg.node();
}
Insert cell
data = Object.assign(new Map(d3.csvParse(await FileAttachment("engpsleC2022-3@2.csv").text(), ({id, rate}) => [id, +rate])), {title: "Grade A - C (%)"})
Insert cell
(topojson.feature(us,us.objects.TZ).features)
Insert cell
data.get((topojson.feature(us,us.objects.TZ).features).properties);

Insert cell
color = d3.scaleQuantize([20, 100], d3.schemeBlues[8])
Insert cell
path = d3.geoPath().projection(proj2)
Insert cell
proj2 = d3.geoIdentity().reflectY(true).fitSize([980,620],topojson.feature(us,us.objects.TZ))
Insert cell
format = d => `${d}%`
Insert cell
states = new Map(us.objects.TZ.geometries.map(d => [d.properties.Region_Cod, d.properties]))
Insert cell
us = FileAttachment("TZ.json").json()
Insert cell
topojson = require("topojson-client@3")
Insert cell
d3 = require("d3@6")
Insert cell
import {legend} from "@d3/color-legend"
Insert cell
district2019 = FileAttachment("District2019.json").json()
Insert cell

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.
Learn more