2e:null 2f:["$","title",null,{"children":"Classic map polygon outlines with webgl | Benjamin Schmidt | Observable"}] 34:T6f9,md`# Classic map polygon outlines with webgl Good early 20th-century mapmakers, like the cartographers of the 9th edition of Stieler's Handatlas shown below, generally outlined only the boundaries of areas. Modern choropleths tend to cover the whole polygon with color, which is often easier. But it's not always desirable, becase overcoloration makes it hard to exress other things on the page. Here's one, extremely naive, strategy for getting a decaying gradient at the edges of a polygon. ${stielerr} The algorithm is: 1. Draw a fully-colored set of polygons to a framebuffer. 2. Run a simple edge-detection filter that is black with alpha of 1 if any adjacent pixel is a different color. 3. Set up two ping-pong buffers, and copy the largest adjacent pixel from the edges to them, but with a modest decay. The number is chosen so that opacity will be 1/255 at the pixel distance chosen as a cutoff. 4. Once we've diffused enough pixels, render to the display buffer with color chosen from the first buffer, but alpha chosen from the diffused one. Step 3 is pretty inefficient--I'm sure there's a better way to encode the distance to the nearest edge. But it seems to run fine. I'm pretty sure I've seen a strategy on this site for drawing these to canvas with double-overlaid paths and clipping with canvas or SVG, but I can't seem to find it. One interesting feature of doing it with fill color using webgl is that if two adjacent polygons share a color, there will be no edge between them! That can be a problem--I've slightly jittered colors here to make sure the pinks are a pixel or two different--but it also means that you can effortless merge into larger categories without any need to think about the underlying topology. Try changing the variable to "states." `35:T40f,edge_propagation = `precision mediump float; varying vec2 uv; uniform sampler2D tex; uniform float wRcp, hRcp; uniform float u_decay; void main() { // The immediate neighbors vec4 maxlr = max(texture2D(tex, uv + vec2(wRcp, 0.)), texture2D(tex, uv + vec2(-wRcp, 0.))); vec4 maxud = max(texture2D(tex, uv + vec2(0., hRcp)), texture2D(tex, uv + vec2(0., -hRcp))); vec4 max_neighbor1 = max(maxlr, maxud) * u_decay; // Corners vec4 maxulur = max(texture2D(tex, uv + vec2(wRcp, hRcp)), texture2D(tex, uv + vec2(-wRcp, hRcp))); vec4 maxlllr = max(texture2D(tex, uv + vec2(wRcp, -hRcp)), texture2D(tex, uv + vec2(-wRcp, -hRcp))); vec4 max_neighbor2 = max(maxulur, maxlllr) * pow(u_decay, 1.414); // i.e., sqrt(2) vec4 max_neighbor = max(max_neighbor1, max_neighbor2); vec4 current = texture2D(tex, uv); gl_FragColor = max(max_neighbor, current); } `36:T416,gaussian_blur = `precision mediump float; vec4 blur13(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) { vec4 color = vec4(0.0); vec2 off1 = vec2(1.411764705882353) * direction; vec2 off2 = vec2(3.2941176470588234) * direction; vec2 off3 = vec2(5.176470588235294) * direction; color += texture2D(image, uv) * 0.1964825501511404; color += texture2D(image, uv + (off1 / resolution)) * 0.2969069646728344; color += texture2D(image, uv - (off1 / resolution)) * 0.2969069646728344; color += texture2D(image, uv + (off2 / resolution)) * 0.09447039785044732; color += texture2D(image, uv - (off2 / resolution)) * 0.09447039785044732; color += texture2D(image, uv + (off3 / resolution)) * 0.010381362401148057; color += texture2D(image, uv - (off3 / resolution)) * 0.010381362401148057; return color; } uniform vec2 iResolution; uniform sampler2D iChannel0; uniform vec2 direction; void main() { vec2 uv = vec2(gl_FragCoord.xy / iResolution.xy); gl_FragColor = blur13(iChannel0, uv, iResolution.xy, direction); }`37:T438,simple_shader = function(regl, frag_shader = edge_detection, blend = false) { return regl({ blend: { enable: blend, func: { srcRGB: 'one', srcAlpha: 'one', dstRGB: 'one minus src alpha', dstAlpha: 'one minus src alpha', } }, frag: frag_shader, vert: ` precision mediump float; attribute vec2 position; varying vec2 uv; void main() { uv = 0.5 * (position + 1.0); gl_Position = vec4(position, 0, 1); } `, attributes: { position: [ -4, -4, 4, -4, 0, 4 ] }, depth: { enable: false }, count: 3, uniforms: { u_decay: (_, {decay}) => decay, tex: (_, {layer}) => layer, color: (_, {color}) => color, alpha: (_, {alpha}) => alpha, wRcp: ({viewportWidth}) => {return 1.0 / viewportWidth}, hRcp: ({viewportHeight}) => 1.0 / viewportHeight }, }) }38:T2c87,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.width = width this.height = height this.set_magic_numbers() this.prepare_div(width, height) this.set_renderer() //this.regl.frame(() => this.tick()) } add_layer(layer) { layer.bind_to_regl(this.regl) this.layers.push(layer) } fbo(name) { this.buffers = this.buffers || new Map() if (this.buffers.get(name)) { return this.buffers.get(name) } const fbo = this.regl.framebuffer({ width: this.width, height: this.height, stencil: false }) this.buffers.set(name, fbo) return this.buffers.get(name) } set_magic_numbers() { const { layers, width, height } = this; const extent = layers[0].bbox; const scales = {}; const scale_dat = {'x': {}, 'y': {}} for (let [name, dim] of [['x', width], ['y', height]]) { const limits = extent[name] scale_dat[name].limits = limits; scale_dat[name].size_range = limits[1] - limits[0] scale_dat[name].pixels_per_unit = dim / scale_dat[name].size_range } const data_aspect_ratio = scale_dat.x.pixels_per_unit / scale_dat.y.pixels_per_unit let x_buffer_size = 0, y_buffer_size = 0, x_target_size = width, y_target_size = height; if (data_aspect_ratio > 1) { // There are more pixels in the x dimension, so we need a buffer // around it. x_target_size = width / data_aspect_ratio; x_buffer_size = (width - x_target_size)/2 } else { y_target_size = height * data_aspect_ratio; y_buffer_size = (height - y_target_size)/2 } scales.x = d3.scaleLinear() .domain(scale_dat.x.limits) .range([x_buffer_size, width-x_buffer_size]) scales.y = d3.scaleLinear() .domain(scale_dat.y.limits) .range([y_buffer_size, height-y_buffer_size]) this.magic_numbers = window_transform( scales.x, scales.y, width, height) .map(d => d.flat()) } 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 index_color() { return function(f) { if (f._index_color) {return f._index_color} f._index_color = [0, 1, 2].map(d => 1 / 255 * Math.floor(Math.random() * 255)) return f._index_color } } get color_func() { return this._color_function ? this._color_function : () => [.8, .8, .8] } single_blur_pass(fbo1, fbo2, direction) { const { regl } = this; fbo2.use( () => { regl.clear({color: [0, 0, 0, 0]}); regl( { frag: gaussian_blur, uniforms: { iResolution: ({viewportWidth, viewportHeight}) => [viewportWidth, viewportHeight], iChannel0: fbo1, direction }, /* 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; varying vec2 uv; void main() { uv = 0.5 * (position + 1.0); gl_Position = vec4(position, 0, 1); }`, attributes: { position: [ -4, -4, 4, -4, 0, 4 ] }, depth: { enable: false }, count: 3, })() }) } blur(fbo1, fbo2, passes = 5 ) { let remaining = passes - 1 while (remaining > -1) { this.single_blur_pass(fbo1, fbo2, [2 ** remaining, 0]) this.single_blur_pass(fbo2, fbo1, [0, 2 ** remaining]) remaining -= 1 } } draw_edges(layer) { const {regl} = this; const colors = this.fbo("colorpicker") const edges = this.fbo("edges") colors.use(d => { this.regl.clear({color: [0, 0, 0, 0]}) this.poly_tick(layer) }) edges.use(() => { this.regl.clear({color: [1, 1, 1, 1]}) const shader = simple_shader(this.regl, edge_detection) shader({layer: colors}) }) // Copy the edges to a ping-pong shader to be blurred. const pingpong = [this.fbo("ping"), this.fbo("pong")] const copier = simple_shader(this.regl, copy_shader) let alpha = state.decay; const decay = state.decay; pingpong[0].use(() => { regl.clear({color: [0, 0, 0, 0]}) copier({layer: edges}) }) const edge_propagator = simple_shader(this.regl, edge_propagation) while (alpha > 1/255) { pingpong[1].use(() => { regl.clear({color: [0, 0, 0, 0]}) edge_propagator({layer: pingpong[0], decay: decay}) }) // swap the buffers. alpha *= decay pingpong.reverse() } const final_shade = simple_shader(this.regl, alpha_color_merge, true) // First copy the blur final_shade({alpha: pingpong[0], color: colors}) } point_tick() { const { regl } = this; const calls = [] // multiple interleaved tranches prevent Trump or Biden from always being on top. This is // an issue with Williamson'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 = 1 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, // Drops the last point in each tranch--needs a modulo operation to know how // many to expect. count: Math.floor(pointset.count/n_tranches), color: color_scale(pointset.label), centroid: [0, 0], size: this.point_size ? this.point_size : 1, alpha: this.point_opacity > 1/255 ? this.point_opacity : 1/255 }) } } 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: [1, 1, 1, 1], }) const alpha = 1 if (wut === "points") { this.point_tick() } else { this.draw_edges(this.layers[0]) /* this.fbo("points").use(d => { regl.clear({ color: [0, 0, 0, 0] }) // this.point_tick() }) */ //const copier = simple_shader(this.regl, copy_shader, true) //copier({layer: this.fbo("points")}) } } poly_tick(layer) { const { regl } = this; const calls = [] for (let feature of layer) { //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; uniform float u_scale_factor; // We can bundle the three matrices together here for all shaders. mat3 from_coord_to_gl = u_window_scale * u_zoom * u_untransform; 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")) } get point_frag() { return ` 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; }`} get triangle_frag() { return ` precision highp float; uniform float u_alpha; varying vec4 fragColor; void main() { gl_FragColor = fragColor * u_alpha; }`} 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: wut == 'polygons' ? this.triangle_frag : this.point_frag, attributes: { position: wut == "polygons" ? (_, {coords}) => coords: (_, {position, stride, offset}) => {return {buffer: position, offset , stride}} }, count: regl.prop("count"), elements: wut == "polygons" ? (_, {vertices}) => vertices : undefined, uniforms: { u_time: (context, _) => performance.now()/500, u_scale_factor: () => this.scale_factor ? this.scale_factor : .5, 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 } }39:T2f11,class TriFeather { constructor(bytes) { this.bytes = bytes this.t = arrow.Table.from(bytes) } get n_coords() { this.coord_buffer; return this._n_coords; } get coord_buffer() { if (this._coord_buffer) { return this._coord_buffer } const d = this.t.get(0).vertices; this._coord_bytes = d.byteOffset this._n_coords = (d.byteLength/4/2) this._coord_buffer = new DataView(d.buffer, d.byteOffset, d.byteLength) return this._coord_buffer } static polygon_to_triangles(polygon) { // Actually perform the earcut work on a polygon. const el_pos = [] const coords = polygon.flat(2) const vertices = earcut(...Object.values(earcut.flatten(polygon))) return { coords, vertices } } static from_feature_collection(feature_collection, projection, options = {dictionary_threshold: .75, clip_to_sphere: false}) { if (projection === undefined) {throw "Must define a projection"} // feature_collections: a (parsed) geoJSON object. // projection: a d3.geoProjection instance; // eg, d3.geoMollweide().transform([10, 20]) // options: const properties = new Map() // Stores the number of bytes used for the coordinates. const coord_resolutions = [null] const coord_buffer_offset = [null] // centroids let you have fun with shapes. Store x and y separately. const centroids = [[null], [null]] const bounds = [null] // Storing areas makes it possible to weight centroids. const areas = [null] let i = -1; const path = d3.geoPath() let clip_shape; let projected = d3.geoProject(feature_collection, projection) if (options.clip_to_sphere) { clip_shape = d3.geoProject({"type": "Sphere"}, projection) for (let feature of projected.features) { const new_coords = clip.intersection(feature.coordinates, clip_shape.coordinates) if (projected.type == "Polygon" && typeof(new_coords[0][0][0] != "numeric")) { projected.type = "MultiPolygon" } feature.coordinates = new_coords } } const {indices, points} = this.lookup_map_and_coord_buffer(projected) const coord_indices = indices; const coord_codes = points; // Stash the vertices in the first item of the array. const vertices = [new Uint8Array(coord_codes.buffer)] properties.set("id", ["Dummy feather row"]) i = 0; for (let feature of projected.features) { // start at one; the first slot is reserved for caching the full // feature list i++; properties.get("id")[i] = feature.id || `Feature_no_${i}` for (let [k, v] of Object.entries(feature.properties)) { if (!properties.get(k)) {properties.set(k, [])} properties.get(k)[i] = v } const projected = feature.geometry const [x, y] = path.centroid(projected) const bbox = new Float32Array(path.bounds(projected).flat()) centroids[0][i] = x; centroids[1][i] = y areas[i] = path.area(projected) bounds[i] = bbox let loc_coordinates; if (projected === null) { console.warn("Error on", projected) coord_resolutions[i] = null vertices[i] = null continue } else if (projected.type == "Polygon") { loc_coordinates = [projected.coordinates] } else if (projected.type == "MultiPolygon") { loc_coordinates = projected.coordinates } else { throw "All elements must be polygons or multipolgyons." } let all_coords = [] let all_vertices = [] for (let polygon of loc_coordinates) { const { coords, vertices } = TriFeather.polygon_to_triangles(polygon); // Allow coordinate lookups by treating them as a single 64-bit int. const bigint_coords = new BigInt64Array(new Float32Array(coords.flat(3)).buffer); // Reduce to the indices of the master lookup table. const lookup_points = vertices.map(vx => coord_indices.get(bigint_coords[vx])) all_vertices.push(...lookup_points) } const [start, end] = d3.extent(all_vertices) const diff = end - start coord_buffer_offset[i] = (start) // Normalize the vertices around the lowest element. // Allows some vertices to be stored at a lower resolution. for (let j=0; j 200/array.length) {continue} // Only check a subsample for speed. Try // to get about 200 instances for each row. if (el === undefined || el === null) { continue } if (typeof(el) === "string") { strings += 1 seen.add(el) } else if (typeof(el) === "number") { if (el % 1 > 0) { floats += 1 } else if (isFinite(el)) { max_int = Math.max(Math.abs(el), max_int) } else { } } else { throw `No behavior defined for type ${typeof(el)}` } } if ( strings > 0 ) { // moderate overlap if (seen.length < strings.length * .75) { return new arrow.Dictionary(new arrow.Utf8(), new arrow.Int32()) } else { return new arrow.Utf8() } } if (floats > 0) { return new arrow.Float32() } if (Math.abs(max_int) < 2**8) { return new arrow.Int8() } if (Math.abs(max_int) < 2**16) { return new arrow.Int16() } if (Math.abs(max_int) < 2**32) { return new arrow.Int32() } else { return new arrow.Int64() } } coord(ix) { // NB this manually specifies little-endian, although // Arrow can potentially support big-endian frames under // certain (future?) circumstances. return [ this.coord_buffer.getFloat32(ix*4*2, true), this.coord_buffer.getFloat32(ix*2*4 + 4, true) ] } static pack_binary(els) { const { Builder, Binary } = arrow; const binaryBuilder = Builder.new({ type: new Binary(), nullValues: [null, undefined], highWaterMark: 2**16 }); for (let el of els) { binaryBuilder.append(el) } return binaryBuilder.finish().toVector() } bind_to_regl(regl) { this.regl = regl this.element_handler = new Map(); // Elements can't share buffers (?) so just use a map. this.regl_coord_buffer = regl.buffer( {data: this.t.get(0).vertices, type: "float", usage: "static"}) this.prepare_features_for_regl() } prepare_features_for_regl() { this.features = [] const {t, features, regl, element_handler, regl_coord_buffer} = this; // Start at 1, not zero, to avoid the dummy. for (let ix = 1; ix this.coord(i)[0])), y: d3.extent(d3.range(this.n_coords).map(i => this.coord(i)[1])), } return this._bbox } *[Symbol.iterator]() { for (let feature of this.features) { yield feature } } static lookup_map_and_coord_buffer (geojson) { const all_coordinates = new Float64Array(geojson.features.filter(d => d.geometry).map(d => d.geometry.coordinates).flat(4)) const feature_collection = geojson const codes = new Float64Array(all_coordinates.buffer) const indices = new Map() for (let code of codes) { if (!indices.has(code)) { indices.set(code, indices.size) } } const points = new Float64Array(indices.size) for (let [k, v] of indices.entries()) { points[v] = k } return {indices, points} } }3a:T1085,states = [ { "name": "Alabama", "abbreviation": "AL" }, { "name": "Alaska", "abbreviation": "AK" }, { "name": "American Samoa", "abbreviation": "AS" }, { "name": "Arizona", "abbreviation": "AZ" }, { "name": "Arkansas", "abbreviation": "AR" }, { "name": "California", "abbreviation": "CA" }, { "name": "Colorado", "abbreviation": "CO" }, { "name": "Connecticut", "abbreviation": "CT" }, { "name": "Delaware", "abbreviation": "DE" }, { "name": "District Of Columbia", "abbreviation": "DC" }, { "name": "Federated States Of Micronesia", "abbreviation": "FM" }, { "name": "Florida", "abbreviation": "FL" }, { "name": "Georgia", "abbreviation": "GA" }, { "name": "Guam", "abbreviation": "GU" }, { "name": "Hawaii", "abbreviation": "HI" }, { "name": "Idaho", "abbreviation": "ID" }, { "name": "Illinois", "abbreviation": "IL" }, { "name": "Indiana", "abbreviation": "IN" }, { "name": "Iowa", "abbreviation": "IA" }, { "name": "Kansas", "abbreviation": "KS" }, { "name": "Kentucky", "abbreviation": "KY" }, { "name": "Louisiana", "abbreviation": "LA" }, { "name": "Maine", "abbreviation": "ME" }, { "name": "Marshall Islands", "abbreviation": "MH" }, { "name": "Maryland", "abbreviation": "MD" }, { "name": "Massachusetts", "abbreviation": "MA" }, { "name": "Michigan", "abbreviation": "MI" }, { "name": "Minnesota", "abbreviation": "MN" }, { "name": "Mississippi", "abbreviation": "MS" }, { "name": "Missouri", "abbreviation": "MO" }, { "name": "Montana", "abbreviation": "MT" }, { "name": "Nebraska", "abbreviation": "NE" }, { "name": "Nevada", "abbreviation": "NV" }, { "name": "New Hampshire", "abbreviation": "NH" }, { "name": "New Jersey", "abbreviation": "NJ" }, { "name": "New Mexico", "abbreviation": "NM" }, { "name": "New York", "abbreviation": "NY" }, { "name": "North Carolina", "abbreviation": "NC" }, { "name": "North Dakota", "abbreviation": "ND" }, { "name": "Northern Mariana Islands", "abbreviation": "MP" }, { "name": "Ohio", "abbreviation": "OH" }, { "name": "Oklahoma", "abbreviation": "OK" }, { "name": "Oregon", "abbreviation": "OR" }, { "name": "Palau", "abbreviation": "PW" }, { "name": "Pennsylvania", "abbreviation": "PA" }, { "name": "Puerto Rico", "abbreviation": "PR" }, { "name": "Rhode Island", "abbreviation": "RI" }, { "name": "South Carolina", "abbreviation": "SC" }, { "name": "South Dakota", "abbreviation": "SD" }, { "name": "Tennessee", "abbreviation": "TN" }, { "name": "Texas", "abbreviation": "TX" }, { "name": "Utah", "abbreviation": "UT" }, { "name": "Vermont", "abbreviation": "VT" }, { "name": "Virgin Islands", "abbreviation": "VI" }, { "name": "Virginia", "abbreviation": "VA" }, { "name": "Washington", "abbreviation": "WA" }, { "name": "West Virginia", "abbreviation": "WV" }, { "name": "Wisconsin", "abbreviation": "WI" }, { "name": "Wyoming", "abbreviation": "WY" } ]3b:[{"id":"946df481fd8ce651f8652b0562cb9746b5bbdd2a12f1ed283343698c5ed3a4918659c8e707b7677a13adeddfb89deca0d5a6fe213f949b53eb73be5e2f59046b","href":"https://static.observableusercontent.com/files/946df481fd8ce651f8652b0562cb9746b5bbdd2a12f1ed283343698c5ed3a4918659c8e707b7677a13adeddfb89deca0d5a6fe213f949b53eb73be5e2f59046b","name":"stieler.png","type":"image/png","lastModified":1607620359348.666,"size":1218998},{"id":"b7dbc8d7bb8aaa1d8177d022130533d0137157419da911572031b7efa07d6dc55b20a9daedbd128de18830a44fac7eff5fc8afe514b51e49beed7feb7da86fba","href":"https://static.observableusercontent.com/files/b7dbc8d7bb8aaa1d8177d022130533d0137157419da911572031b7efa07d6dc55b20a9daedbd128de18830a44fac7eff5fc8afe514b51e49beed7feb7da86fba","name":"congressional@5.trifeather","type":"application/octet-stream","lastModified":1607619998997.918,"size":2687850}] 32:{"id":"bcc5a5226bba0af9","slug":"classic-map-polygon-outlines-with-webgl","title":"Classic map polygon outlines with webgl","thumbnail":"35c94bc98b4a36472fc63b64ee2da0b6b71b43665cf7cabaf7372a5d46db5f7c","access_level":"public","create_time":"$D2020-12-10T17:06:38.997Z","update_time":"$D2020-12-22T20:25:04.934Z","view_time":null,"first_public_time":"$D2020-12-11T15:03:16.802Z","has_unpublished_edits":null,"fork":{"id":"77c117fdd456245c","slug":"regl-dot-density","title":"Fast, flexible dot-density maps of America","owner":{"id":"18bbeceb36c8f564","login":"bmschmidt","name":"Benjamin Schmidt"}},"stars":1,"starred":false,"owner":{"type":"team","id":"18bbeceb36c8f564","login":"bmschmidt","name":"Benjamin Schmidt","avatar_url":"https://avatars-next.observableusercontent.com/addc2adb5ec95cc72a64820e4a08488bad5d48d95a895eef85a45b136ed66792","tier":"starter_2024"},"version":2043,"publish_version":2043,"role":null,"authored":false,"authors":[{"type":"individual","id":"33354ca265b21f01","login":"bmschmidt","name":"Benjamin Schmidt","avatar_url":"https://avatars-next.observableusercontent.com/addc2adb5ec95cc72a64820e4a08488bad5d48d95a895eef85a45b136ed66792","tier":null}],"members":[{"type":"individual","id":"33354ca265b21f01","login":"bmschmidt","name":"Benjamin Schmidt","avatar_url":"https://avatars-next.observableusercontent.com/addc2adb5ec95cc72a64820e4a08488bad5d48d95a895eef85a45b136ed66792","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"dd0419b5d6424c58","slug":"webgl-cartography","title":"WebGL cartography","owner":{"id":"18bbeceb36c8f564","login":"bmschmidt","name":"Benjamin Schmidt"}},"type":"notebook","body":{"title":"Classic map polygon outlines with webgl","cells":[{"id":0,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1786,"value":"stielerr = md`${await FileAttachment(\"stieler.png\").image()}\n\nStieler's Handatlas, 1911. [Source: David Rumsey historical maps.](https://www.davidrumsey.com/luna/servlet/detail/RUMSEY~8~1~297380~90068972:Nr--72--Afrika,-Bl--4------von-C--B?qvq=w4s:/when%2F1911;q:author%3D%22Stieler%2C%20Adolf%22;lc:RUMSEY~8~1&mi=157&trs=218)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":845,"value":"md`## Zoom in with the mouse/pinch.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2033,"value":"viewof automatic = radio({title: \"Automatic oscillation?\", options: [\"automatic\", \"manual override\"], value: \"automatic\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1840,"value":"viewof pixels = slider({title: \"Number of pixels to spread\", min: 0, max: 60, value: 5, step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1911,"value":"viewof colorby = radio({title: \"Colorize polygns by\", options: [\"Congressional District\", \"State\"], value: \"Congressional District\", description: \"The same polygons are being drawn in both cases, but the algorithm automatically merges polygons of the same color\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"div = DOM.canvas(width, width * .66)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1899,"value":"md`The edge propagation shader to check the adjacent pixels and transfer their decayed color over.\nThis runs once per every pixel each tick. Webgl programming is weird enough that I can't tell if this is insane or not.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1892,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1909,"value":"map.color_func = function(f) {\n if (colorby == \"State\") {\n let {r, g, b} = d3.rgb(d3.interpolateSinebow(+f.properties.STATEFP/80))\n if (isNaN(r)) {\n r = .5, g = .5 + Math.random() * .1, b = .4\n }\n return [r/255, g/255, b/255]\n }\n if (f._index_color) {return f._index_color}\n f._index_color = random_pastel()\n return f._index_color\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1985,"value":"{\n const frame = map.regl.frame(() => {\n if (automatic==\"automatic\") {\n\n viewof pixels.setValue((Math.sin(performance.now()/5e2) + 1.01) * 6)\n }\n state.decay = Math.exp(Math.log(1/255)/pixels)\n map.tick(\"triangles\")\n })\n invalidation.then(() => frame.cancel())\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1751,"value":"stieler = new Image(await FileAttachment(\"stieler.png\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1088,"value":"import {fullscreen} from \"@fil/fullscreen\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"import { radio, slider, checkbox, select} from '@severo/inputs-setter'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":826,"value":"md`## Map projection\n\nThis is all in d3-geo-albersUsa.\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1816,"value":"state = ({})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"flip = d3.geoTransform({\n point: function(x, y) {\n this.stream.point(x * 100000, -y * 100000);\n }\n});\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":828,"value":"md`# The shapefile\n\nHere I only load the pre-computed binary file, because it's faster; but I leave in commented form the code I used to initially create it from geojson.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1332,"value":"congressional_districts = new TriFeather(await FileAttachment(\"congressional@5.trifeather\").arrayBuffer())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"function randround(how_many_points_do_i_get) {\n const leftover = how_many_points_do_i_get % 1;\n // Random round to decide if you get a fractional point.\n if (Math.random() > leftover) {\n how_many_points_do_i_get -= leftover\n } else {\n how_many_points_do_i_get += (1 - leftover)\n }\n return how_many_points_do_i_get\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"md `## Random points\n\nGenerating random points in a polygon is hard--you can generate a random point in a bounding box, but then you have to find out whether that point actually falls in the polygon.\n\nGenerating random points in a triangle is quick. I just copy the algorithm from here: https://blogs.sas.com/content/iml/2020/10/19/random-points-in-triangle.html\n\n1. Define the vectors a = P2 - P1 and b = P3 - P1. The vectors define the sides of the triangle when it is translated to the origin.\n2. Generate random uniform values u1, u2 ~ U(0,1)\n3. If u1 + u2 > 1, apply the transformation u1 → 1 - u1 and u2 → 1 - u2.\n4. Form w = u1 a + u2 b, which is a random point in the triangle at the origin.\n5. The point w + P1 is a random point in the original triangle.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"scale_color = d3.scaleOrdinal(d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":942,"value":"color_scale = (d) => {const {r, g, b} = d3.rgb(scale_color(d)); return [r/255, g/255, b/255]}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1089,"value":"fullscreen(div, {center: true})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"import { window_transform } from '@bmschmidt/sharing-a-single-zoom-state-between-svg-canvas-and-webgl'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1359,"value":"arrow = require('apache-arrow')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1362,"value":"earcut = require('earcut')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1364,"value":"clip = {}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1701,"value":"function random_pastel() {\n const scheme = d3.schemeDark2\n const {r, g, b} = d3.rgb(scheme[Math.floor(Math.random() * scheme.length)])\n return [r + Math.random() * 10 - 5, g + Math.random() * 10 - 5, b + Math.random() * 10 - 5].map(d => d/255)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"colorscale = d3.scaleSequential(d3.interpolateRdBu).domain([0.05, .95])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"map = new TriMap(div, [congressional_districts])\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"md`# TriMap\n\nA handler class to deal with interactions between regl contexts and feather feature sets. I'll use this more later.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1521,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1537,"value":"copy_shader = `\n precision mediump float;\n varying vec2 uv;\n uniform sampler2D tex;\n uniform float wRcp, hRcp;\n void main() {\n vec4 c = texture2D(tex, uv);\n if (c.a > 0.) {\n gl_FragColor = c;\n } else {\n discard;\n }\n } \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1652,"value":"alpha_color_merge = `\n precision mediump float;\n varying vec2 uv;\n uniform sampler2D color;\n uniform sampler2D alpha;\n uniform float wRcp, hRcp;\n void main() {\n vec4 col = texture2D(color, uv);\n vec4 alph = texture2D(alpha, uv);\n float a = alph.a;\n if (a < 1./255.) {\n discard;\n } else if (col.a == 0.) {\n discard;\n if (sin(a*3.14*8.) > 0.9) {\n a = .9;\n } else {\n discard;\n }\n } else if (a < .99) {\n a = .25;\n } else {\n a = 1.;\n }\n gl_FragColor = vec4(col.rgb * a, a);\n } \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1531,"value":"edge_detection = `\n precision mediump float;\n varying vec2 uv;\n uniform sampler2D tex;\n uniform float wRcp, hRcp;\n void main() {\n // 4 adjacent pixels; left, right, up down.\n vec4 l = texture2D(tex, uv + vec2(-wRcp, 0.));\n vec4 r = texture2D(tex, uv + vec2(wRcp, 0.));\n vec4 u = texture2D(tex, uv + vec2(0., hRcp));\n vec4 d = texture2D(tex, uv + vec2(0., -hRcp)); \n vec4 around = (l + r + u + d) / 4.;\n vec4 current = texture2D(tex, uv);\n if (distance(around, current) < 0.001) {\n gl_FragColor = vec4(0., 0., 0., 0.); \n } else {\n gl_FragColor = vec4(0., 0., 0., 1.);\n }\n }\n `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1524,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1082,"value":"custom_regions = [{\"label\": \"Northeast\", \"value\": \"northeast\"}, \"midwest\", \"south\", \"west\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1508,"value":"map.layers[1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1150,"value":"m = new Uint16Array([1, 2, 3, 4, 5, 6])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"function propd(string, def) {\n return (_, props) => {\n if (props[string] !== undefined) {return props[string]}\n return def\n }\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1355,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1514,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"wrapRegl = require(\"regl\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1052,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"d3 = require(\"d3@v6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3b","stdlib":"1","titling":"auto"}} 33:"$32:body"