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 playInterpolate along lineV60 coffee | James Hoffmann recipewaffle timeSVG clipPath using d3columns/divisonsUK waffle mapforce animationCluster packinginterpolating two strings
poly-linear scale with css radial gradient
// values passed into divergingScale function
values = [d3.randomInt(0, pivot)(), d3.randomInt(0, max)(), d3.randomInt(pivot, max)()]
{
return html`
<style>
.radial {
width: ${width*0.8}px;
height: ${width*0.8}px;
background: radial-gradient(
circle ${circle}px,
${d3.color(divergingScale()(values[0])).hex()},
${d3.color(divergingScale()(values[1])).hex()},
${d3.color(divergingScale()(values[2])).hex()}
)
}
</style>
<div class="radial"></div>
`
}
function divergingScale () {
return d3.scaleLinear()
.domain([0, pivot, max])
.range([c1, c2, c3]) // col1, col2, col3
}
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.
