chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, 975, 610]);
svg.append("g")
.attr("transform", "translate(610,20)")
.append(() => legend({color, title: data.title, width: 260, tickFormat: ".0s"}));
svg.append("g")
.selectAll("path")
.data(topojson.feature(us, us.objects.counties).features)
.join("path")
.attr("fill", d => color(data.get(d.id)))
.attr("stroke", "white")
.attr("d", path)
svg.append("path")
.datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "grey")
.attr("stroke-linejoin", "round")
.attr("d", path);
return svg.node();
}
** Template Parameters **
file = FileAttachment("Alcohol_Consumption_US_2016.csv")
title = "Drought %"
countyIdColumn = "FIPS"
countyRateColumn = "D4"
dateColumn = "MapDate"
dateFormat = "%Y%m%d"
stepSize = 21
** Data Parsing & Prep**
rawData = d3.csvParse(await file.text())
parseTime = d3.timeParse(dateFormat)
timeAsString = d3.timeFormat(dateFormat)
allDates = rawData.map(element => parseTime(element[dateColumn]))
minDate = d3.min(allDates)
maxDate = d3.max(allDates)
maxDays = d3.timeDay.count(minDate, maxDate)
countyArray = rawData.
filter((elm, index) => timeAsString(allDates[index]) == timeAsString(date)).
map(elm => [elm[countyIdColumn], +elm[countyRateColumn]])
maxScale = d3.max(countyArray.map((elm, idx) => elm[1])) + 1
minScale = d3.min(countyArray.map((elm, idx) => elm[1])) + 1
data =
Object.assign(
new Map(countyArray), {title: title}
)
function toDate(rangeValue) {
minDate + rangeValue
}
** Mostly copied from Bostok's Map **
color = d3.scaleQuantize([minScale, maxScale], d3.schemeReds[9])
path = d3.geoPath()
format = d => `${d}%`
states = new Map(us.objects.Alc_Con(d => [d.id, d.properties]))
us = FileAttachment("Alc_Con.json").json()
topojson = require("topojson-client@3")
d3 = require("d3@6")
import {legend} from "@d3/color-legend"
import {Scrubber} from "@mbostock/scrubber"
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.
