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 recipeSVG clipPath using d3columns/divisonsUK waffle mapforce animationCluster packinginterpolating two strings
waffle time
function render () {
const sel = d3.select(vis)
let now = new Date()
// render time labels
let hours = now.getHours()
let minutes = now.getMinutes()
let seconds = now.getSeconds()
sel.select('.time-hour').text(hours + ' hrs')
sel.select('.time-minutes').text(minutes + ' mins')
sel.select('.time-seconds').text(seconds + ' secs')
// render percent labels
let hoursPercent = Math.floor((100 / 24) * hours)
let minutesPercent = Math.floor((100 / 60) * minutes)
let secondsPercent = Math.floor((100 / 60) * seconds)
sel.select('.percent-hour').text(hoursPercent + ' %')
sel.select('.percent-minutes').text(minutesPercent + ' %')
sel.select('.percent-seconds').text(secondsPercent + ' %')
// render charts
waffle(hoursPercent, {
bind: sel.select('.chart-hours'),
squareCol: '#a6d40d'
})
waffle(minutesPercent, {
bind: sel.select('.chart-minutes'),
squareCol: '#a6d40d'
})
waffle(secondsPercent, {
bind: sel.select('.chart-seconds'),
squareCol: '#ff5ec4'
})
}
<hr>
<link href="https://fonts.googleapis.com/css?family=Space+Mono" rel="stylesheet">
<link href="https://unpkg.com/basscss@8.0.2/css/basscss.min.css" rel="stylesheet">
<style>
.charts, .digits {
width: 800px;
font-family:'Space Mono',monospace;
}
.colon {
color:#e0e5db;
font-size: 72px;
right: -2px;
}
.charts .colon {
top: 60px
}
.digits .colon {
top: -50px;
}
.digit {
color: #454545;
font-weight: normal;
}
</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.
