Public
Edited
May 1
2 forks
Insert cell
Insert cell
Insert cell
Insert cell
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);

svg.append(legend)
.attr("transform", "translate(100,500)");

svg.append("g")
.selectAll("path")
.data(topojson.feature(polygons, polygons.objects.US_state_2020WGS84).features)
.join("path")
.attr("fill", d => color(data.get(d.properties[idAttribute])))
.attr("stroke", "black")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 0.5)
.attr("d", path)
.attr("d", path)
.append("title")
.text(d => `${d.properties[idAttribute]}, ${format(data.get(d.properties[idAttribute]))}`);

return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data = Object.assign(new Map(d3.csvParse(await FileAttachment("householdtype_femmasters_state.csv").text(), ({NAME, fem_livingalone, TOTAL, fem_masters, inhouse_householder, totalpop_25}) => [NAME, [100*+fem_livingalone/+inhouse_householder, 100*+fem_masters/+totalpop_25]])), {title: ["% Women HH Living Alone", "% Women with Master's Degree"]})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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