Principal Web Developer at Freedom of the Press Foundation
createTileLength = () => Math.ceil(Math.abs(d3.randomNormal(0, 3)()))
gridLengths = new Array(GRID_HEIGHT).fill().map(() => {
let row = []
let nextNumber
let rowLength = 0
while (rowLength < GRID_WIDTH) {
nextNumber = createTileLength()
if (rowLength + nextNumber > GRID_WIDTH) nextNumber = GRID_WIDTH - rowLength
rowLength += nextNumber
row.push(nextNumber)
}
return row
})
rects = gridLengths.map(
(rowLengths, i) => rowLengths.map(
(width, j, arr) => htl.svg.fragment`<rect
y=${TILE_HEIGHT * i}
x=${d3.sum(arr.slice(0, j)) * TILE_WIDTH}
height=${TILE_HEIGHT}
width=${width * TILE_WIDTH}
fill=${getColor(j + (width / 2))}
/>`
)
).flat()
colorScale = d3.scaleLinear().domain([0, GRID_WIDTH]).range([startColor, endColor])
getColor = (n) => colorScale(n + d3.randomUniform(-gradientJitter, gradientJitter)())
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.
