Public
Edited
Oct 19, 2022
Insert cell
Insert cell
chart = Choropleth(unemployment, {
id: d => d.id,
value: d => d.rate,
scale: d3.scaleQuantize,
domain: [1, 10],
range: d3.schemeGreens[9],
title: (f, d) => `${f.properties.name}, ${statemap.get(f.id.slice(0, 2)).properties.name}\n${d?.rate}%`,
features: counties,
borders: us,
width: 975,
height: 610
})
Insert cell
// {
// const svg= d3.create("svg")
// .attr("viewBox", [0, 0, width, height]);

// const g= svg.append("g")
// .attr("transform", `translate( ${margin.left}, ${margin.top})`);

// g.append("path")
// .attr("d", path(nation))
// .attr("stroke", "#000")
// .attr("fill", "none");

// g.append("path")
// .data(unemployment)
// .attr("d", path(nation))
// .attr("d", path(states))
// .attr("d", path(counties))
// .attr("stroke", "#000")
// .attr("fill", d => color(d.rate));

// // populate with data and color range
// // svg.append("g")
// // .selectAll("path")
// // // .data(topojson.feature.features)
// // .data(unemployment)
// // .join("path")
// // // .attr("fill", (d, i) => color(V[Im.get(If[i])]))
// // .attr("fill", (d, i) => color(d.rate))
// // .attr("d", path)
// // .append("title")
// // // .text((d, i) => title(d, Im.get(If[i])));
// return svg.node();
// }
Insert cell
Insert cell
range= d3.interpolateBlues
Insert cell
// VALUE to get from d3
V= d3.map(unemployment, value).map( d => d == null ? NaN : +d);
Insert cell
N = d3.map(unemployment, d=> d.id)
Insert cell
Im = new d3.InternMap(N.map((id, i) => [id, i]))
Insert cell
featureId= d3.map(unemployment, d=> d.id)
Insert cell
// If = d3.map(topojson.feature, featureId)
Insert cell
domain= d3.extent(V)
Insert cell
value =() => undefined;
Insert cell
// color= scale(
// domain,
// range(d3.interpolateBlues))

color= d3.scaleSequential()
.domain(d3.extent(unemployment, d => d.rate))
.range([0, d3.max(unemployment, d => d.rate)])

Insert cell
scale= d3.scaleSequential()
Insert cell
height= 650
Insert cell
//MARGIN
margin= ({ left: 20, top: 20, right: 20, bottom: 20});
Insert cell
Insert cell
Insert cell
unemployment = (await FileAttachment("unemployment-x.csv").csv()).map(d => ({...d, rate: +d.rate}))
Insert cell
Insert cell
mapData.bbox.values
Insert cell
mapData= FileAttachment("counties-albers-10m.json").json()
Insert cell
Insert cell
projection= d3.geoAlbersUsa().scale(1200).translate([487.5, 305])
Insert cell
Insert cell
path= d3.geoPath()
Insert cell
Insert cell
// state_id= FileAttachment("")
Insert cell
Insert cell
states = topojson.feature(us, us.objects.states)
Insert cell
Insert cell
statemap = new Map(states.features.map(d => [d.id, d]))
Insert cell
nation= topojson.feature( us, us.objects.nation)
Insert cell
counties = topojson.feature(us, us.objects.counties)
Insert cell
us = FileAttachment("counties-albers-10m.json").json()
Insert cell
Insert cell
// topojson.features( mapData, )
Insert cell
Insert cell
vegaDatasets= require("vega-datasets@2")
Insert cell
topojson= require("topojson@3")
Insert cell
d3= require("d3@6")
Insert cell
Insert cell
import { Choropleth } from "@d3/choropleth"
Insert cell
import {Legend} from "@d3/color-legend"
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