pixel flipper, data sifter. trying to see what I can while I'm here
firstName = "First"
lastName = "Last"
handle = "handle"
isTextLight = true
colorScale = function(d, frame) {
let s = d3.scaleLinear()
.domain([0, width])
.range([1,0])
// let l = Math.log(d)
// console.log(d,l)
// let sl = s(l);
let sl = s(d)
// let interp = d3.interpolateViridis
let interp = d3.interpolateSinebow
// let interp = d3.interpolateInferno
return interp(Math.abs(Math.sin(sl * 2 * Math.PI/2 + frame/5 * Math.PI/2 /2.5) ) )
}
zoomLevel = 22
projection = d3.geoMercator()
.center([-87.6535176, 41.8960457])
.scale((1 << zoomLevel) / (2 * Math.PI))
.translate([width * 0.45, height * 0.4])
tile = d3.tile()
.size([width, height])
.scale(projection.scale() * 2 * Math.PI)
.translate(projection([0, 0]))
// .zoomDelta(2)
import {preview, animation, download, width, height}
with {firstName, lastName, handle, isTextLight, badgeCode}
from "b93171820ba3f268"
// from "c227e9e8e203016f"
d3 = require("d3-geo@1", "d3-tile@0.0", "d3-scale-chromatic@1", "d3@5")
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.
