Spinning counties, November 2020 / Benjamin Schmidt

viewof scale_by_votes = radio({title: "Scale by number of votes?", options: ["yes", "no", "by margin"], value: "no", description: "This is gonna be wrong for Alaska and Hawaii."})

Math.cos(0)

viewof zoom = slider({title: "zoom (square root)", min: .5, max: 15, value: 1, step: .1})

viewof speed = slider({title: "Speed of spin adjustment", min: -5, max: 5})

rate_of_change = d3.scaleDivergingLog().domain([.2,1, 5]).interpolator(d3.interpolatePiYG).clamp(true)

rate_of_change(2).split(/$|$/)[1].split(",").map(d => +d)

using.features[3].properties

import { data as d } from '@wattenberger2/us-election-2020'

votes = new Map(Object.entries(d))

date = "2020-07-30"

long_term_corona_counts.get(`53061-${date}`)

long_term_corona_counts

using.features[0].properties.CEN

render_loop = {

// return false

const size_scale = d3.scaleSqrt().domain([0, 10000]).range([0, 10])

const times = []

const start_time = Date.now()

while (true) {

const overall_radius = jitter_radius / 100 * (Math.sin(Date.now()/1000) + 1)/2

const start = performance.now()

gl.clear({color: [0.1, 0.1, .1,.81 ]});

for (let feature of using.features.filter(d => d.projected)) {

//Dumb

const rand = feature.rand ? feature.rand : feature.rand = [Math.random() - .5, Math.random() - .5]

const flip = rand[0] + rand[1] > 0 ? 1 : -1 // Pointless

// Gotta have a color

const { STATE, COUNTY } = feature.properties

const c_stats = long_term_corona_counts.get(`${STATE}${COUNTY}-${date}`)

const pop = pops.get(`${STATE}${COUNTY}`)

if (c_stats == undefined) {continue}

const { delta, rolling } = c_stats

const rate = rolling/pop

const val = fips_data.get(STATE+COUNTY)*10

const magnitude = val/100000;

const watt_data = votes.get(STATE+COUNTY) || {diff: 0, t: .5, b: .5, total: 0}

watt_data.margin_per_area = watt_data.diff * watt_data.total/feature.properties.CENSUSAREA;

watt_data.votes_per_area = watt_data.total/(feature.properties.CENSUSAREA + 1e-10)

const election_result = watt_data.diff

const t = Math.sin(Date.now()/(600+rand[1]*10));

if (isNaN(delta)) {continue}

let color = d3.rgb(d3.interpolateRdBu((.5 - election_result/2)))

let {r, g, b} = color;

//let color = rate_of_change(delta)

//let [r, g, b] = color.split(/$|$/)[1].split(",").map(d => +d)

let x_shift = overall_radius * Math.sin(Date.now()/(600+rand[1]*10) + rand[0]) * flip;

let y_shift = overall_radius * Math.cos(Date.now()/(600+rand[1]*10) + rand[1]);

x_shift = feature.centroid[0] + x_shift * .1

y_shift = feature.centroid[1] + y_shift * .1

render({

color: [r/255, g/255, b/255],

zoom,

angle: (Date.now() - start_time)/100*magnitude * Math.exp(speed) * (election_result < 0 ? -1 : 1),

scale: scale_by_votes == "yes" ? size_scale(watt_data.votes_per_area) : scale_by_votes == "by margin" ? 2 * size_scale(Math.abs(watt_data.margin_per_area)) : 1,

position: feature.coord_buffer,

elements: feature.vertex_buffer,

translate: [x_shift, y_shift],

incidence: incidence

})

}

// Logging.

times.push(performance.now() - start)

const average = d3.mean(times.slice(times.length > 200 ? times.length - 200 : 0))

yield md`Average render time of ${d3.format(".2f")(average)} milliseconds for ${n_points} points`

}

class BufferHandler {

// simple data structure to post blocks of data to regl buffers.

// Rather than allocate a new buffer for each polygon, which is kind of wasteful,

// just set them up in 2 MB blocks and keep using until the next call will overflow.

// Something is wrong with the regl scoping here, so it breaks if you have more than one buffer.

// Currently, I just make sure that the buffer is crazy big--would be worth fixing, though.

constructor(regl, size = 2**26) {

this.regl = regl;

this.size = size;

this.buffers = {"1": regl.buffer({length: this.size, type: "float", usage: "static"})}

this.current_buffer = "1"

this.current_position = 0;

}

post_data(data, stride = 8) {

if (data.length*4 + this.current_position > this.size) {

this.current_buffer = (1+parseInt(this.current_buffer)) + ""

this.buffers[this.current_buffer] = this.regl.buffer(this.size);

this.current_position = 0;

}

const buffer = this.buffers[this.current_buffer]

buffer.subdata(data, this.current_position)

const description = {

key: this.current_buffer,

buffer: buffer,

stride: stride ? stride : 8,

offset: this.current_position

}

this.current_position += data.length * 4;

return description;

}

using = resolution == "1:500,000" ? null : resolution == "1:5,000,000" ? m5_features : m20_features

polygon_to_triangles = function(polygon) {

// Actually perform the earcut work

const el_pos = []

const coords = polygon.flat(2)

const vertices = earcut(...Object.values(earcut.flatten(polygon)))

return { coords, vertices }

}

fips_data = {

const map = new Map()

const d = await d3.csv("https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_daily_reports/11-10-2020.csv")

d.forEach(d => map.set(d.FIPS.padStart(5, "0"), +d.Incident_Rate))

return map

}

function shift_points(coords, [x, y]) {

if (coords.length) {

if (typeof(coords[0]) == "number") {

return [coords[0] - x, coords[1] - y]

} else {

return coords.map(d => shift_points(d, [x, y]))

}

add_triangles_to_feature = function(feature, projection, buffers) {

/*if (feature.projected) {

return

}*/

feature.projected = d3.geoProject(feature.geometry, projection)

if (!feature.projected) {

//console.log(feature.geometry)

return

}

feature.centroid = d3.geoPath().centroid(feature.projected)

feature.shifted = shift_points(feature.projected.coordinates, feature.centroid)

let coordinates;

if (feature.projected.type == "Polygon") {

coordinates = [feature.shifted]

} else if (feature.projected.type == "MultiPolygon") {

coordinates = feature.shifted

} else {throw "All elements must be polygons or multipolgyons."}

let all_coords = []

let all_vertices = []

for (let polygon of coordinates) {

const current_vertex = all_coords.length/2

const { coords, vertices } = polygon_to_triangles(polygon);

all_coords.push(...coords)

// If need to shift because we may be storing multiple triangle sets on a feature.

all_vertices.push(...vertices.map(d => d + current_vertex))

}

const coords = buffers.post_data(all_coords.flat(10), 8)

feature.coord_buffer = coords

feature.vertex_buffer = buffers.regl.elements({

primitive: "triangles",

count: all_vertices.length,

data: all_vertices.flat(10),

// Use the smallest possible int type.

type: all_coords.length < 2**8 ? 'uint8' : all_coords.length < 2**16 ? 'uint16' : 'uint32'

})

feature.vertex_buffer.data = all_vertices.flat(10)

}

election_results = new Map(Object.entries(data))

import { data } from '@kushleshkumar/a-better-way-to-visualize-us-elections-2020-results'

projection = d3.geoAlbersUsa().scale(2).translate([-0.2, 0])

buffer_handler = new BufferHandler(gl, 2**26) // I would prefer multiple at 2**20 to one giant one like this.

import { radio, slider } from '@jashkenas/inputs'

render = gl(renderer);

colorscheme = d3.scaleLinear().domain([0, 100]).range(d3.schemeBuGn)

m5_features = FileAttachment("gz_2010_us_050_00_5m.json").text().then(d => {

const geojson = JSON.parse(d)

for (let feature of geojson.features) {

add_triangles_to_feature(feature, projection, buffer_handler)

}

return geojson

})

m20_features = {

return FileAttachment("gz_2010_us_050_00_20m.json").text().then(d => {

const geojson = JSON.parse(d)

for (let feature of geojson.features) {

add_triangles_to_feature(feature, projection, buffer_handler)

}

return geojson

})

}

renderer = (

//Starting point: https://observablehq.com/@marcom13/mesh-rendering-using-webgl-regl

{

vert: `

precision mediump float;

attribute vec2 position;

uniform float aspect;

uniform float u_zoom;

uniform float u_scale;

uniform float u_incidence;

uniform float u_theta;

uniform vec3 color;

uniform vec2 translate;

varying vec3 fragColor;

mat2 rotate2d(float _angle){

return mat2(cos(_angle),-sin(_angle),

sin(_angle),cos(_angle));

}

void main () {

gl_PointSize = 2.;

vec2 rot;

fragColor = color;

if (u_incidence == 0.) {

rot=position*rotate2d(u_theta);

} else {

float angle = atan(position.x, position.y);

float magnitude = sqrt(dot(position, position));

float adjust = magnitude * (2. + sin(angle - u_theta)) / 2.;

rot = vec2(adjust * sin(angle), adjust * cos(angle));

}

gl_Position = vec4(

rot.x * u_scale * u_zoom + translate.x * u_zoom,

-rot.y * u_zoom * u_scale*aspect - translate.y*u_zoom*aspect, 0., 1.);

}

frag: `

precision mediump float;

varying vec3 fragColor;

void main () {

gl_FragColor = vec4(fragColor, 1.);

}

attributes: {

position: (state, props) => props.position

elements: function (state, props) {return props.elements},

uniforms: {

u_theta: (_, {angle}) => angle,

u_zoom: (_, {zoom}) => zoom * zoom,

u_scale: (_, {scale}) => scale,

u_incidence: (_, {incidence}) => incidence == "distortion" ? 1 : 0,

aspect: 975/610,

translate: (state, props) => props.translate,

color: (state, props) => props.color

primitive: "triangle",

}

)

topojson = require("topojson-client@3")

earcut = require("earcut")

arrow = require("apache-arrow")

raw_data = FileAttachment("full@2.feather").arrayBuffer()

feathered.get(1)

feathered = arrow.Table.from(raw_data)

table

table = aq.fromArrow(feathered, {unpack : true}).groupby("fips").orderby("date").derive({ rolling: aq.rolling(d => op.sum(d.cases), [-14, 0]) }).derive({"delta": d => d.rolling/op.lag(d.rolling, 14)})

table.groupby().sample(10).view()

long_term_corona_counts = {

return d3.rollup(table, r => {return {delta: r[0].delta, rolling: r[0].rolling}}, k => ("" + k.fips).padStart(5, "0") + "-" + k.date.toISOString().slice(0, 10))

}

import { pops } from '@codingwithfire/cmu-covidcast-api-bubbles-export'

i = ("" + table.column("fips").get(10))

table

import {aq, op} from '@uwdata/arquero'

regl = require("regl") // Use the latest Version

d3 = require("d3@v6", "d3-geo-projection")

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.

Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.

Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.

Learn more