playing with space, shape, colour & composition
Published
Edited
Jan 19, 2022
3 stars
Also listed in…
Sanzo Wada colours
chart = {
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height)
.style('background', [hex[loop]]) // forcing a change
// definition element for SVG
const defs = svg.append('defs');
// create a unique gradient for each circle
data.forEach(d => {
renderGradient(d)
})
function renderGradient(index) {
// unique id required per gradient passed in
const gradient = gradientSetup(defs, `g-${index}`, 'radialGradient')
// colours and offset(s) for gradients
gradient4Colours(gradient, _.sampleSize(hex, 4))
return gradient
}
svg
.selectAll('circle')
.data(data)
.join('circle')
.attr('cx', () => _.random(width))
.attr('cy', () => _.random(height))
.attr('r', d => _.random(10, 100))
.style('fill', d => `url(#g-${d})`)
return svg.node()
}
function gradientSetup(defs, id = 'radial-g1', gradientElment) {
const gradient = defs.append(gradientElment) // e.g. 'radialGradient'
.attr('id', id)
.attr('cx', '50%') // x-center of the gradient
.attr('cy', '50%') // y-center of the gradient
.attr('r', '50%'); // radius of the gradient
return gradient
}
function gradient4Colours(gradient, col) {
// array of four colours passed in at each offset
gradient.append('stop')
.attr('offset', `${_.random(0, 10)}%`)
.attr('stop-color', col[0])
gradient.append('stop')
.attr('offset', `${_.random(10, 50)}%`)
.attr('stop-color', col[1])
gradient.append('stop')
.attr('offset', `${_.random(50, 90)}%`)
.attr('stop-color', col[2])
gradient.append('stop')
.attr('offset', `${_.random(90, 100)}%`)
.attr('stop-color', col[3])
}
data = d3.range(100)
fourRandomColours = _.sampleSize(hex, 4)
Type Markdown, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
hex = colours.filter(d => d.swatch !==5).map(d => d.hex)
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.
