Mostly front end. Mostly data vis and creative coding projects.
Senior Software Engineer at Uber. Formerly at BuzzFeed and NYTimes.
canvas = {
const context = DOM.context2d(width, height)
context.fillStyle = 'hsl(216deg 100% 13%)'
context.fillRect(0, 0, width, height)
context.globalCompositeOperation = 'lighter'
const minY = 0
const maxY = 300
const binPxSize = 2
const binSize = binPxSize / width * data.length
for (let i = 0; i < width; i += 1) {
const start = Math.floor(binSize * i)
const end = Math.floor(binSize * (i + 1))
const vals = data.slice(start, end)
vals.sort((a, b) => a - b)
while (vals.length > 1) {
const bottom = vals.shift()
const top = vals.pop()
const x1 = i * binPxSize
const y1 = lerp(bottom, minY, maxY, height, 0)
const y2 = lerp(top, minY, maxY, height, 0)
context.fillStyle = 'rgba(255, 255, 255, 0.03)'
context.fillRect(x1, y1, binPxSize, y2 - y1)
}
}
return context.canvas
}
height = 200
width = 400
import {octave, perlin2} from "@mbostock/perlin-noise"
noise = octave(perlin2, 3)
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.
