viewof map = drawChoroplethMap({
width: 800,
data: data,
zoomEnabled: false,
borderEnabled: true,
borderColorCounties: "#aaa",
colorScale,
tooltipContents,
})
tooltipContents = datum => {
const { id, value } = datum;
return (value)
}
colorScale = d3
.scaleQuantile()
.domain([-10, 10])
//.range(["#001219","#005f73","#0a9396","#94d2bd","#e9d8a6","#ee9b00","#ca6702","#bb3e03","#ae2012","#9b2226"])
// reverse
.range(["#9b2226","#ae2012","#bb3e03","#ca6702","#e9d8a6","#94d2bd","#ca6702","#0a9396","#005f73","#001219"])
data = {
const text = await FileAttachment("US_Contig_VIIRS_EVI_Counties.csv").text();
return d3.csvParse(text, ({GEOID,grid_code}) => ({
id: GEOID,
value: grid_code,
}));
}
height = 400
projection = d3.geoAlbersUsa()
path = d3.geoPath()
states = topojson.mesh(us, us.objects.states, (a, b) => a !== b)
nation = topojson.feature(us, us.objects.nation)
counties = topojson.feature(us, us.objects.counties)
//, (a, b) => a !== b && (a.id / 1000 | 0) === (b.id / 1000 | 0))
us = FileAttachment("counties-albers-10m.json").json()
topojson = require("topojson-client@3")
d3 = require("d3@6")
import { drawChoroplethMap } from "@clhenrick/reusable-choropleth-map"
import { Tooltip } from "@clhenrick/tooltip-component"
FileAttachment("us-post-offices.csv").csv()
FileAttachment("US_Contig_VIIRS_EVI_Counties.csv").csv()
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.
