Family of good boyz and gurlz who code for most advanced education and analytix products.
Published
Edited
May 7, 2020
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg
.append("g")
.attr("transform", "translate(610,20)")
.append(() =>
legend({
color,
title: data.title,
width: 260,
tickValues: d3.utcYear.every(5).range(...color.domain()),
tickFormat: d3.utcFormat("%Y")
})
);
svg
.append("path")
.datum(topojson.mesh(us, us.objects.states))
.attr("fill", "none")
.attr("stroke", "#777")
.attr("stroke-width", 0.5)
.attr("stroke-linejoin", "round")
.attr("d", d3.geoPath());
let hex_group = svg.append("g");
hex_group
.selectAll("path")
.data(data)
.join("path")
.attr('class', 'hex')
.attr("transform", d => `translate(${d.x},${d.y})`)
.attr("d", d => hexbin.hexagon(radius(d.length)))
.attr("fill", d => color(d.date))
.attr("stroke", d => d3.lab(color(d.date)).darker())
.attr(
"title",
d => `${d.length.toLocaleString()} voters<br /> April 2020: Uniform Sample`
);
hex_group
.selectAll('path.hex')
.nodes()
.forEach(tippy);
return svg.node();
}
data = {
const data = d3.tsvParse(
await FileAttachment("forwardcompliance-sample-dataRAND@1.tsv").text(),
d => {
const p = projection(d);
p.date = parseDate(d.date);
return p;
}
);
return Object.assign(
hexbin(data)
.map(d => ((d.date = new Date(d3.median(d, d => d.date))), d))
.sort((a, b) => b.length - a.length),
{ title: "date" }
);
}
projection = d3.geoAlbersUsa().scale(1300).translate([487.5, 305])
parseDate = d3.utcParse("%m/%d/%Y")
color = d3.scaleSequential(d3.extent(data, d => d.date), d3.interpolateSpectral)
radius = d3.scaleSqrt([0, d3.max(data, d => d.length)], [0, hexbin.radius() * Math.SQRT2])
hexbin = d3.hexbin().extent([[0, 0], [width, height]]).radius(10)
width = 975
height = 610
us = FileAttachment("states-albers-10m.json").json()
topojson = require("topojson-client@3")
d3 = require("d3@5", "d3-hexbin@0.2")
import {legend} from "@d3/color-legend"
tippy = require("https://unpkg.com/tippy.js@2.5.4/dist/tippy.all.min.js")
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.
