playing with space, shape, colour & composition
Simple canvas particle systemword distribution experimental visualsHarmonic Oscillations: An Interactive Canvas of Dynamic ShapesCanvas dynamic patternSimple canvas polygonRandom force networkits 100.0% rectangle squareusing date as seed for viewSVG hexbin image renderword cloud alternativerandom city landscapeSol LeWitt Wall DrawingStrange Attractors v1Morphological TableD3 | parametric equationsI am inexpressibleTeam clusters using circle packingTeam groupingTeam waffleLaurie Anderson quotes — type playpoly-linear scale with css radial gradientInterpolate along lineV60 coffee | James Hoffmann recipewaffle timeSVG clipPath using d3UK waffle mapforce animationCluster packinginterpolating two strings
columns/divisons
Lines(d3.range(columns), {
colour: '#a90636',
x: (d, i) => i * (w / (columns - 1)) + strokeWidth
})
xData = d3.quantize( d3.interpolate(strokeWidth, w), columns )
Lines(xData, {
colour: '#4f8fe6',
x: d => d // use the data for `x` placement
})
Lines(d3.range(columns), {
colour: '#9c52f2',
x: (d, i) => linearScale(i) // could pass in `d` as it's the same as `i` in this case
})
Lines(d3.range(columns), {
colour: '#ffa6d9',
x: (d, i) => pointScale(i)
})
function Lines(data, {
colour = 'hsl(80deg 70% 40%)',
x = null // pass in how to calcualte x
} = {}) {
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height);
svg
.selectAll('line')
.data(data)
.join('line')
.attr('x1', x)
.attr('x2', x)
.attr('y1', 0)
.attr('y2', height)
.attr('stroke-width', strokeWidth)
.attr('stroke', colour)
return svg.node()
}
w = width-(strokeWidth*2)
height = 50
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.
