🇧🇷 🇺🇸. Passionate about programming and building things.
state
viewof state = {
let value = null;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, 975, 610]);
svg.append("g")
.selectAll("path")
.data(topojson.feature(us, us.objects.states).features)
.enter().append("path")
.attr("d", path)
.attr("fill", d => {
const name = d.properties.name;
const code = state_code_by_name[name];
if (selected_codes.has(code)) {
return "#E1BE6A";
}
return "#40B0A6";
})
.on("click", d => {
const node = svg.node();
const {properties} = d;
const {name} = properties;
node.value = value = value === name ? null : name;
node.dispatchEvent(new CustomEvent("input"));
outline.attr("d", value ? path(d) : null);
});
svg.append("path")
.datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("pointer-events", "none")
.attr("d", path);
const outline = svg.append("path")
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-linejoin", "round")
.attr("pointer-events", "none");
return Object.assign(svg.node(), {value: null});
}
path = d3.geoPath()
topojson = require("topojson-client@3")
d3 = require("d3@5")
us = FileAttachment("states-albers-10m.json").json()
state_code = FileAttachment("states-code@1.csv").csv()
state_code_by_name = {
const state_code_by_name = {};
state_code.forEach(({Name, Code}) => state_code_by_name[Name] = Code);
return state_code_by_name;
}
selected_codes = new Set(['AK', 'AZ', 'AR', 'CA', 'CT', 'DE', 'DC', 'GA', 'HI', 'ID', 'IN', 'KS', 'KY', 'LA', 'ME', 'MS', 'MT', 'NE', 'NV', 'NH', 'NM', 'ND', 'OK', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'WV', 'WY'])
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.
