Public
Edited
Nov 4, 2024
1 fork
Insert cell
Insert cell
chart = {
// Set the color scale.
//const color = d3.scaleQuantile(G, d3.schemeReds[9]);
//const color = d3.scaleSequential(d3.extent(G), d3.interpolateRgbBasis(["#ffddba", "#fee6ce", "#fdd0a2", "#fdae6b", "#fd8d3c", "#f16913", "#d94801", "#a63603", "#7f2704"]));
const color = d3.scaleSequential(d3.extent(goiter), d3.interpolateRdPu);
color.unknown("#ccc");
// Create SVG
var svg = d3.select(DOM.svg(1100, 650));
// Draw sections and fill with goiter rates.
svg.append("g")
.selectAll("path")
.data(sections.features)
.join("path")
.attr("fill", function(d) {
if (true) { //(d.properties.IN_SAMPLE) {
return color(d.properties.GOITER_PER_1K)
} else {
return "gray"
}
})
.attr("fill-opacity", function(d) {
if (true) { //(d.properties.IN_SAMPLE) {
return 1;
} else {
return 0.1
}
})
.attr("d", path)
.attr("stroke", "white")
.attr("stroke-width", 0);


// Draw state outlines.
svg.append("g")
.selectAll("path")
.data(states.features)
.join("path")
.attr("fill", "none")
.attr("d", path)
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 1)
.attr("stroke-opacity", 1);
// Draw division outlines.
svg.append("g")
.selectAll("path")
.data(divisions.features)
.join("path")
.attr("fill", "none")
.attr("d", path)
.attr("stroke", "black")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 1)
.attr("stroke-opacity", 1);

// Add legend
svg.append("g")
.attr("transform", "translate("+550+","+0+")")
.append(() => legend({color,
title: "Goiter Rate",
ticks : 6,
width: 300}
)
);

return Object.assign(svg.node(), {scales: {color}});
}
Insert cell
Insert cell
path = d3.geoPath(d3.geoAlbersUsa().scale(1200).translate([487.5, 305]));
Insert cell
Insert cell
d3 = require("d3@5", "d3-array@2")
Insert cell
import {legend} from "@d3/color-legend"
Insert cell
Insert cell
Insert cell
sections = FileAttachment("sections@3.geojson").json()
Insert cell
divisions = FileAttachment("divisions@1.geojson").json()
Insert cell
states = FileAttachment("states.geojson").json()
Insert cell
Insert cell
goiter = d3.map(sections.features, d => d.properties.GOITER_PER_1K).map(d => d == 0 ? NaN : +d);
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