Dot-density election maps with Webgl / Benjamin Schmidt

election_districts = new TriFeather(await FileAttachment("ne_50m_admin_0_countries_lakes.gleofeather").arrayBuffer())//TriFeather.from_feature_collection(await FileAttachment("nyc.geojson").json(), flip)

election_districts

function random_points(frame, fields, n_represented = 1) {

const counts_by_field = fields.map(field => d3.sum(frame.t.getColumn(field).toArray()))

frame._number_of_points = d3.sum(counts_by_field)/n_represented

const all_coords = fields.map((f, i) => new Float32Array(Math.round(counts_by_field[i]/n_represented * 2.05)))

let coord_positions = all_coords.map(() => -2);

// Overallocate a bit.

for (let ix of d3.range(frame.t.length)) {

const f = frame.t.get(ix);

if (f.coord_resolution === null) {continue}

const vert_buffer = new DataView(f.vertices.buffer, f.vertices.byteOffset, f.vertices.byteLength)

let double_areas = fields.map(k => f.pixel_area * 2)// save an op later by doubling here.

let number_neededs = fields.map(k => randround(f[k]/n_represented))

// number_needed = 3;

// The current triangle in ax,ay,bx,by,cx,cy order

let current_number = -2;

const metadata = []

const stride = f.coord_resolution / 8

const offset = f.coord_buffer_offset;

for (let i = 0; i < f.vertices.byteLength; i += stride * 3) {

let a, b, c

try {

[a, b, c] = ([0, 1, 2]).map(ix => vert_buffer[`getUint${f.coord_resolution}`](i + ix*stride, true)).map(n => frame.coord(n+ offset))

} catch {

return {f, current_number, i, byte_length: f.vertices.byteLength}

}

// Ax(By - Cy) + Bx(Cy - Ay) + Cx(Ay - By)

const area = Math.abs(

a[0] * (b[1] - c[1]) + b[0] * (c[1] - a[1]) + c[0]*(a[1] - b[1])

)//earcut seems to always return triangles in a form where the absolute

// value isn't necessary.

for (let f_num of d3.range(fields.length)) {

const share = area/double_areas[f_num]

double_areas[f_num] -= area

let how_many_points_do_i_get = randround(number_neededs[f_num] * share)

for (let i = 0; i < how_many_points_do_i_get; i++) {

// Assign no more if we're at the cap.

if ((number_neededs[f_num] -= 1) <= -1) {break}

all_coords[f_num].set(random_point(a, b, c), coord_positions[f_num] += 2)

}

return all_coords.map((c, i) => c.slice(0, coord_positions[i]))

}

function randround(how_many_points_do_i_get) {

const leftover = how_many_points_do_i_get % 1;

// Random round to decide if you get a fractional point.

if (Math.random() > leftover) {

how_many_points_do_i_get -= leftover

} else {

how_many_points_do_i_get += (1 - leftover)

}

return how_many_points_do_i_get

}

function random_point([ax, ay], [bx, by], [cx, cy]) {

const a = [bx - ax, by - ay]

const b = [cx - ax, cy - ay]

let [u1, u2] = [Math.random(), Math.random()]

if (u1 + u2 > 1) {u1 = 1 - u1; u2 = 1 - u2}

const w = [u1 * a[0] + u2 * b[0], u1 * a[1] + u2 * b[1]]

return [w[0] + ax, w[1] + ay]

}

balancer = () => (Math.sin(Date.now()/500) + 1)/2

map.color_func = function(f) {

const balance = (Math.sin(Date.now()/500) + 1)/2

const r1 = 1 - f.properties["2016_Trump"]/f.properties["2016_tot"]

const r2 = 1 - f.properties["2020_Trump"]/f.properties["2020_tot"]

if (f.properties["2020_tot"] === 0) {return [1, 1, 1]}

const {r, g, b} = d3.rgb(colorscale(r1*(1-balance) + r2*balance))

return [r/255, g/255, b/255]

}

colorscale = d3.scaleSequential(d3.interpolateRdBu).domain([0.05, .95])

map = new TriMap(div, [election_districts])

md`# TriMap

A handler class to deal with interactions between regl contexts and feather feature sets. I'll use this more later.`

md`## Sentinels

To listen for changes in the sliders without rebuilding the whole webgl context.`

{

sentinel

map.generate_random_points(candidates, n_represented)

}

{

// Separate so shifts to opacity don't regenerate points

map.point_opacity = point_opacity

}

class TriMap {

constructor(div, layers) {

this.div = div

this.regl = wrapRegl({canvas: div, extensions: ["OES_element_index_uint"]})

for (let layer of layers) {

layer.bind_to_regl(this.regl)

}

this.layers = layers;

const {width, height} = div

this.magic_numbers = window_transform(

d3.scaleLinear().domain(layers[0].bbox.x).range([0, width]),

d3.scaleLinear().domain(layers[0].bbox.y).range([0, height]), width, height)

.map(d => d.flat())

this.prepare_div(width, height)

this.set_renderer()

//this.regl.frame(() => this.tick())

this.random_points = []

// this.generate_random_points()

}

prepare_div(width, height) {

this.zoom = {transform: {k: 1, x: 0, y:0}}

d3.select(this.div).call(d3.zoom().extent([[0, 0], [width, height]]).on("zoom", (event, g) => {

this.zoom.transform = event.transform

}));

return div;

}

get size_func() {

return this._size_function ? this._size_function : () => 1

}

set size_func(f) {

this._size_function = f

}

set color_func(f) {

this._color_function = f

}

get color_func() {

return this._color_function ? this._color_function : () => [.8, .8, .8]

}

generate_random_points(fields, represented=1) {

const { regl } = this;

const positions = random_points(this.layers[0], fields, represented)

if (this.random_points) {

for (let point of this.random_points) {

// Housekeeping.

point.buffer.destroy()

}

this.random_points = positions.map(

(d, i) => { return {

label: fields[i],

year: +fields[i].split("_")[0],

buffer: regl.buffer(d)

}

})

}

point_tick() {

const { regl } = this;

const calls = []

const b = balancer()

// multiple interleaved tranches prevent Trump or Biden from always being on top. This is

// an issue with Williams's maps, which over-represent the Hispanic population of DC because it

// gets plotted last.

const alpha_scale = d3.scaleSqrt().domain([0, 500]).range([0, 1])

const n_tranches = 8

for (let offset of d3.range(n_tranches)) {

for (let pointset of this.random_points) {

calls.push({

position: pointset.buffer,

offset: offset * 8,

stride: 8 * n_tranches,

transform: this.zoom.transform,

color: pointset.label.match("Trump") ? [.8, .4, .2] : pointset.label.match(/Biden|Clinton/) ? [.2, .4, .8] : [.2, .8, .4],

centroid: [0, 0],

size: 1,

alpha: this.point_opacity

})

}

const random = d3.randomLcg(0.9051667019185816);

const shuffle = d3.shuffler(random);

shuffle(calls)

this.render_points(calls)

}

tick(wut) {

const { regl } = this

regl.clear({

color: [0, 0, 0, .01],

})

const alpha = 1

if (wut === "points") {

this.point_tick()

} else {

this.poly_tick()

}

poly_tick() {

const { regl } = this;

const calls = []

return

for (let feature of this.layers[0]) {

if (feature.properties['2020_tot'] === null) {continue}

const {vertices, coords} = feature;

calls.push({

transform: this.zoom.transform,

color: this.color_func(feature),

centroid: [feature.properties.centroid_x, feature.properties.centroid_y],

size: this.size_func(feature),

alpha: 1,

vertices: vertices,

coords: coords

})

}

this.render_polygons(calls)

}

get vertex_shader() {return `

precision mediump float;

attribute vec2 position;

uniform float u_size;

uniform vec2 u_centroid;

varying vec4 fragColor;

uniform float u_k;

uniform float u_time;

uniform vec3 u_color;

varying vec4 fill;

// Transform from data space to the open window.

uniform mat3 u_window_scale;

// Transform from the open window to the d3-zoom.

uniform mat3 u_zoom;

uniform mat3 u_untransform;

// We can bundle the three matrices together here for all shaders.

mat3 from_coord_to_gl = u_window_scale * u_zoom * u_untransform;

float u_scale_factor = 0.35;

void main () {

// scale to normalized device coordinates

// gl_Position is a special variable that holds the position

// of a vertex

vec2 from_center = position-u_centroid;

vec3 p = vec3(from_center * u_size + u_centroid, 1.) * from_coord_to_gl;

gl_Position = vec4(p, 1.0);

gl_PointSize = u_size * (exp(log(u_k)*u_scale_factor));

fragColor = vec4(u_color.rgb, 1.);

//gl_Position = vec4(position / vec2(1., u_aspect), 1., 1.);

}

set_renderer() {

// this.render_polygons = this.regl(this.renderer())

this.render_points = this.regl(this.renderer("points"))

}

renderer(wut = "polygons") {

const { regl, magic_numbers } = this;

const definition = {

depth: {

enable: false

blend: {enable: true, func: {

srcRGB: 'one',

srcAlpha: 'one',

dstRGB: 'one minus src alpha',

dstAlpha: 'one minus src alpha',

}

vert: this.vertex_shader,

frag: `

precision highp float;

uniform float u_alpha;

varying vec4 fragColor;

void main() {

vec2 coord = gl_PointCoord;

vec2 cxy = 2.0 * coord - 1.0;

float r_sq = dot(cxy, cxy);

if (r_sq > 1.0) {discard;}

gl_FragColor = fragColor * u_alpha;

}`,

attributes: {

position: wut == "polygons" ?

(_, {coords}) => coords:

(_, {position, stride, offset}) => {return {buffer: position, offset , stride}}

elements: wut == "polygons" ? (_, {vertices}) => vertices : undefined,

uniforms: {

u_time: (context, _) => performance.now()/500,

u_k: function(context, props) {

return props.transform.k

u_centroid: propd("centroid", [0, 0]),

u_color: (_, {color}) => color ? color : [.8, .9, .2],

u_window_scale: magic_numbers[0].flat(),

u_untransform: magic_numbers[1].flat(),

u_zoom: function(context, props) {

const g = [

// This is how you build a transform matrix from d3 zoom.

[props.transform.k, 0, props.transform.x],

[0, props.transform.k, props.transform.y],

[0, 0, 1],

].flat()

return g

u_alpha: (_, {alpha}) => alpha ? alpha : 1,

u_size: (_, {size}) => size || 1,

primitive: wut == "polygons" ? "triangles" : "points"

}

if (wut === "polygons") {

delete definition['count']

}

return definition

}

function propd(string, def) {

return (_, props) => {

if (props[string] !== undefined) {return props[string]}

return def

}

wrapRegl = require("regl")

d3 = require("d3@v6")

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