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 wafflepoly-linear scale with css radial gradientInterpolate along lineV60 coffee | James Hoffmann recipewaffle timeSVG clipPath using d3columns/divisonsUK waffle mapforce animationCluster packinginterpolating two strings
Laurie Anderson quotes — type play
// use the selected 'split' quote as data
data = quote.map((d, i) => {
// have a reference to how far we are in the quote
const currentString = quote.slice(0, i).join('');
// generate some random characters — pass in `d` (the last character, so we end the array on it)
const rc = randomCharacters(d);
// map over the random characters as they append to the string
const rc_map = rc.map(c => {
return currentString.concat(c);
})
return rc_map;
}).flat(); // return a flat array
quote = [...laurieanderson[index]] // `index` is updated via the range slider
// adapted from https://observablehq.com/@d3/selection-join
function randomCharacters(lastChar = '') {
return d3.shuffle("abcdefghijklmnopqrstuvwxyz#%&-+_?/\\=".split(""))
.slice(0, Math.floor(2 + Math.random() * 6))
.concat(lastChar); // have the last character be from the actual quote
}
<hr>
<style>
@import url('https://fonts.googleapis.com/css2?family=Andada+Pro:wght@600&display=swap');
.quote {
padding: calc(78*3px) 5px 25px 25px;
font-weight: 600;
min-height: calc(78*4px);
background: #0f261f;
background: repeating-linear-gradient(
90deg,
#0f261f 0px 2px,
#00592e 0px 4px
);
mix-blend-mode: multiply;
}
.quote h2 {
font-family: 'Andada Pro', serif;
color: #ffcfc4;
font-size: 72px;
line-height: 78px;
margin: 0;
padding: 0;
max-width: ${width}px;
}
</style>
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.
