Public
Edited
Dec 12, 2022
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, 975, 610]);
svg.append(legend)
.attr("transform", "translate(870,450)");
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}
${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-opacity", 0.1)
.attr("stroke-linejoin", "round")
.attr("d", path);
return svg.node();
}
data = Object.assign(new Map(d3.csvParse(await FileAttachment("formVI_2021-2-1@4.csv").text(), ({region, capitation, regionalGpa}) => [region, [+capitation, +regionalGpa]])), {title: ["Capitation", "GPA"]})
labels = ["low", "", "high"]
topojson.feature(us, us.objects.TZ)
n = Math.floor(Math.sqrt(colors.length))
x = d3.scaleQuantile(Array.from(data.values(), d => d[0]), d3.range(n))
y = d3.scaleQuantile(Array.from(data.values(), d => d[1]), d3.range(n))
path = d3.geoPath().projection(proj2)
proj2 = d3.geoIdentity().reflectY(true).fitSize([980,620],topojson.feature(us,us.objects.TZ))
color = {
return value => {
if (!value) return "#ccc";
let [a, b] = value;
return colors[y(b) + x(a) * n];
};
}
format = (value) => {
if (!value) return "N/A";
let [a, b] = value;
return `${(Math.round(a * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')} TZS : ${data.title[0]}${labels[x(a)] && ` (${labels[x(a)]})`}
${(Math.round(b * 100) / 100).toFixed(2)} : ${data.title[1]}${labels[y(b)] && ` (${labels[y(b)]})`}`;
}
states = new Map(us.objects.TZ.geometries.map(d => [d.properties.Region_Cod, d.properties.Region_Nam]))
us = FileAttachment("TZ.json").json()
topojson = require("topojson-client@3")
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.
