usmap = {
const svg = d3.create("svg")
.style("display", "block")
.attr("viewBox", [0, 0, width, height])
.attr("transform", "translate(0, 20) scale(1.15)"); // move down, make bigger
svg.append("path")
.datum(topojson.feature(basepolygons, basepolygons.objects.states_simple))
.attr("fill", "#ccc")
.attr("d", path_basemap);
const defs = svg.append("defs");
// set up outline, clipping and background of map
//The blanked out chunk after this made it freak out?? But added changing color? If I take out the base polygons while this is freaking out, it doesn't generate an error though?
defs.append("path")
.attr("id", "outline")
.attr("d", path(outline));
defs.append("clipPath")
.attr("id", "clip")
.append("use")
.attr("xlink:href", new URL("#outline", location));
const g = svg.append("g")
.attr("clip-path", `url(${new URL("#clip", location)})`);
g.append("use")
.attr("xlink:href", new URL("#outline", location))
.attr("fill", "white");
// fill entities according to values
g.append("g")
.selectAll("path")
.data(basepolygons.objects.states_simple.geometries)
.join("path")
// idk what this does
// .filter(function(d) { return d.properties.name != "Antarctica"; })
.attr("fill", d => color(yearData.get(d.properties.name)))
// tooltip
.append("title")
.text(d => `${d.properties.name}
${yearData.has(d.properties.name) ? yearData.get(d.properties.name) : "N/A"}`);
//draw borders
g.append("path")
.datum(topojson.mesh(basepolygons, basepolygons.objects.states_simple))
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-linejoin", "round")
.attr("d", path_basemap);
return svg.node();
}
yearSum = formatSum(d3.sum(yearData.values()))
formatSum = d3.format(",.0f");
data = new Map(
[...d3.rollup(entries, v => d3.sum(v, d => d.bills), d => d.year, d => d.entity)]
)
entries = d3.csvParse(await FileAttachment("aclu_timeline_fips_zeroes.csv").text(), function(d) {
return {
year: +d.year, // use new Date(+d.Year, 0, 1) to convert "year" to Date
entity: (d.entity) || d.entity,
code: d.code,
bills: +d.bills
};
});
color = d3.scaleSequential()
.domain(dataDomain)
.interpolator(colorInterpolator)
.unknown("#ccc")
projection = d3.geoAlbersUsa() // Use an equal-area projection for choropleth maps
path = d3.geoPath(projection)
width = 975
height = 600
outline = ({type: "Sphere"})
basepolygons = FileAttachment("topo_states.json").json()
path_basemap = d3.geoPath().projection(projection)
topojson = require("topojson-client@3")
d3 = require("d3@6")
import { Scrubber } from "@mbostock/scrubber"
import {us, states} from "@d3/choropleth"
import {colorInterpolatorPicker} from "@zechasault/color-schemes-and-interpolators-picker"
import {legend} from "@d3/color-legend"
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.
