Digital Humanist. Manhattan-based.
Dot Density election maps of AmericaFast, flexible dot-density maps of AmericaClassic map polygon outlines with webglDot-density election maps with WebglAnimating voting maps with reglStrategies for triangle-packing maps.Pre-triangulated binary maps for webgl.Spinning out of controlA binary file format for projected, triangulated, shapefiles with metadata.
Gapminder charts w/ country shapes.
colorscale(lookups.get("usa-" + date).income_per_person_long_series)
scale_life(70)
colorScale = d3.scaleOrdinal(d3.schemeCategory10).domain(country_feather.getColumn("REGION_UN"))
colorscale = d3.scaleSequentialLog(d3.interpolateViridis).domain([1, 1e6]).clamp(true)
colorscale(1)
size_scale = d3.scaleSqrt().domain([1, 2e9]).range([.01, .3]).clamp(true)
country_feather.getColumn("ADM0_A3_IS").toArray().filter(d => d=="USA")
draw_frame = function(date) {
// const overall_radius = jitter_radius / 100 * (Math.sin(Date.now()/1000) + 1)/2
const prop_list = []
let ix = -1
for (let feature of country_feather) {
ix += 1
const lookup = lookups.get(feature['ADM0_A3_IS'].toLowerCase() + "-" + date)
if (lookup===undefined) {
continue
}
const { REGION_WB } = feature;
let SCALE = size_scale(lookup.population_total/feature.pixel_area);
if (feature.vertices === null) {continue}
if (feature.coordinates === null) {continue}
if (handler.element_handler.get(ix) === undefined) {
handler.element_handler.set(ix, gl.elements({
primitive: 'triangles',
usage: 'static',
data: feature.vertices,
type: "uint" + feature.coord_resolution,
length: feature.vertices.length, // in bytes
count: feature.vertices.length / feature.coord_resolution * 8
}))
handler.coord_handler.post_data(ix, feature.coordinates)
}
let color = d3.rgb(colorScale(feature.REGION_UN))
let {r, g, b} = color
const v = {
color: [r/255, g/255, b/255],
zoom: 1,
centroid: [feature.centroid_x, feature.centroid_y],
translate: [0, 0],
angle: handler.get_prop("angle", ix),
scale: SCALE,
elements: handler.element_handler.get(ix),
coords: handler.coord_handler.get(ix),
center: [scale_life(+lookup.life_expectancy_years), scale_income(+lookup.income_per_person_long_series)],
incidence: 1
}
prop_list.push(v)
}
gl.clear({color: [0, 0, 0, 0]})
render(prop_list)
}
draw_loop = {while(true) {
yield(draw_frame(date))
}}
income = aq.from(await d3.csv('https://raw.githubusercontent.com/open-numbers/ddf--gapminder--systema_globalis/master/countries-etc-datapoints/ddf--datapoints--income_per_person_long_series--by--geo--time.csv'))
render = gl(
//Starting point: https://observablehq.com/@marcom13/mesh-rendering-using-webgl-regl
{
depth: {
enable: false
},
blend: {enable: true, func: {
srcRGB: 'one',
srcAlpha: 'one',
dstRGB: 'one minus src alpha',
dstAlpha: 'one minus src alpha',
}
},
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;
uniform vec2 u_centroid;
uniform vec2 u_center;
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;
vec2 p_from_centroid = position - u_centroid;
if (u_incidence == 0.) {
rot=p_from_centroid*rotate2d(u_theta);
} else {
float angle = atan(p_from_centroid.x, p_from_centroid.y);
float magnitude = sqrt(dot(p_from_centroid, p_from_centroid));
/*
float adjust = (6. + cos(angle) * cos(u_theta) + sin(angle) * sin(u_theta))/6.;
//if (adjust < 1.) {adjust = 1./adjust;}
rot = vec2(magnitude * adjust * sin(angle), magnitude* adjust * cos(angle));
*/
float adjust = magnitude * (2. + sin(angle - u_theta)) / 2.;
rot = vec2(adjust * sin(angle), adjust * cos(angle));
//rot = vec2(.03 * sin(angle), .03 * cos(angle));
}
//vec2 rot_adj = rot * u_scale + u_centroid;
vec2 rot_adj = rot * u_scale + u_center;
gl_Position = vec4(
rot_adj.x *u_zoom + translate.x * u_zoom,
-rot_adj.y * u_zoom * aspect - translate.y*u_zoom*aspect, 0., 1.);
}
`,
frag: `
precision mediump float;
varying vec3 fragColor;
void main () {
gl_FragColor = vec4(fragColor * .25, .25);
}
`,
attributes: {
position: (state, props) => props.coords
},
elements: function (state, props) {return props.elements},
uniforms: {
u_centroid: gl.prop('centroid'),
u_center: (_, {centroid, center}) => center ? center: centroid,
u_theta: (_, {angle}) => angle !== undefined ? angle : 0,
u_zoom: (_, {zoom}) => zoom * zoom,
u_scale: (_, {scale}) => scale,
u_incidence: (_, {incidence}) => incidence == "distortion" ? 1 : 0,
aspect: width/height,
translate: (state, props) => props.translate,
color: (state, props) => props.color
},
primitive: "triangle",
}
)
function plot_variable() {}
//aq.fromArrow(country_feather).view()
diff(country_feather.getColumn("ADM0_A3_IS").toArray().map(d=>d.toLowerCase()), g)
lookups.get("usa-2017").income_per_person_long_series
function diff(a, b) {
const s = new Set(a)
return Array.from(b).filter(d=> !s.has(d))
}
g = new Set(pop.column("geo").data)
import {handler, myCanvas, country_feather, gl, Scrubber} from '@bmschmidt/countries-spinning-out-of-control'
join_natural = function(a, b) {
// Arquero does some weird things on joins.
const names = a.columnNames()
return a.join(b, undefined, [names,b.columnNames().filter(d => names.indexOf(d) == -1)])
}
viewof joint_data = join_natural(join_natural(pop, lifespans), income).view()
margin = .1
scale_income = d3.scaleLog().domain(d3.extent(joint_data.column("income_per_person_long_series").data.map(d => +d))).range([1 - margin*2, -1 + margin*2])
scale_life(100)
lookups = d3.rollup(joint_data, r => r[0], k=> k.geo + "-" + k.time)
pop = aq.from(await d3.csv("https://raw.githubusercontent.com/open-numbers/ddf--gapminder--systema_globalis/master/countries-etc-datapoints/ddf--datapoints--population_total--by--geo--time.csv"))
lifespans = aq.from(await d3.csv("https://raw.githubusercontent.com/open-numbers/ddf--gapminder--systema_globalis/master/countries-etc-datapoints/ddf--datapoints--life_expectancy_years--by--geo--time.csv"))
d3 = require('d3@v6')
height = width * .66
import { aq, op } from '@uwdata/arquero'
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.