playing with space, shape, colour & composition
{
// Create an SVG element
svg5.createSVG(width, 540)
// Add content / elements
svg5.background('#f58e84')
svg5.fill('#f8ed43')
svg5.noStroke()
// render bgd shape
shape(width/2, 270, sqrtScale(100), sqrtScale(100))
// update elements
svg5.strokeWidth(2)
svg5.stroke('#7a4456')
svg5.noFill()
// create a circle for each percent
d3.range(pct).forEach(d => {
if (d % 3 === 1) { // only show every third value to avoid moire effect
shape(width/2, 270, sqrtScale(d), sqrtScale(d))
} else {
return false
}
})
// Finally, render the svg
return html`${svg5.getHTML()}`
}
// return a square of circle based on input selection
function shape (x, y, w, h) {
if (shapeSelection === 'Square') {
return svg5.square(x - (w/2), y - (h/2), w, h);
} else if (shapeSelection === 'Circle') {
return svg5.circle(x, y, w, h);
} else { // return them both!
return svg5.square(x - (w/2), y - (h/2), w, h),
svg5.circle(x, y, w, h);
}
}
// d3 scale for shape area to reflect pct
sqrtScale = d3.scaleSqrt()
.domain([0, 100])
.range([0, 490])
svg5 = require('https://bundle.run/svg5@0.1.3')
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.
