playing with space, shape, colour & composition
Public
Edited
Sep 6, 2023
render(range)
// x and y of each triangle point
trianglePoints = [
[75, 0],
[0, 150],
[150, 150]
];
// create multiple triangles
function render(nTimes) {
const svg = d3.select(vis)
.style('background', '#4e1d4c');
const dj = svg.selectAll('g')
.data(d3.range(nTimes))
.join('g')
// rotate each 'g'
.attr('transform', (d, i) => `translate(${w/2}, ${h/2}) rotate(${i * rotation})`);
dj.selectAll('path')
.data([null]) // reset as I only want one path to render into each 'g'
.join('path')
.attr('d', ("M " + ([].concat( trianglePoints )) + " Z"))
.style('fill', 'none')
.style('stroke', '#f99d1b')
.style('stroke-width', 3)
.style('stroke-opacity', 0.5);
return nTimes;
}
w = width
h = 500
circlesNeeded = Math.round(360 / rotation)
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.
