colorScale = d3.scaleQuantize()
.domain([1,10])
.range(d3.schemeGreens[9]);
buildvis = {
const width = 960
const height = 600
const svg = d3.select(DOM.svg(width, height))
let path = d3.geoPath()
svg.append("g")
.attr("class", "counties")
.selectAll("path")
.data(topojson.feature(us, us.objects.counties).features)
.enter().append("path")
.attr("fill", d => colorScale(rateById.get(d.id)))
.attr("d", path)
.append("title")
.text(d=> rateById.get(d.id) + "%")
svg.append("path")
.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
.attr("class", "states")
.attr("d", path)
// Once we append the vis elments to it, we return the DOM element for Observable to display above.
return svg.node()
}
rateById =
d3.tsv("https://gist.githubusercontent.com/emanueles/7fbdcd8ee412e3e63904114cf9d7ee3a/raw/af4fd93db1be3f9033caff46d4a574a54bf9363f/unemployment.tsv").then(function (data) {
let rateMap = d3.map()
data.forEach(function(d) {
rateMap.set(d.id, +d.rate)
})
return rateMap
})
us = d3.json("https://gist.githubusercontent.com/emanueles/ee2997bc6237f3dcab952ae8becaf6bf/raw/afdb12d4ef89bb239998b295c94d960e8d89c19e/us.json")
topojson = require("topojson-client@3")
d3 = require('d3@5')
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.
