playing with space, shape, colour & composition
sol108 = config => {
config = {
data: null,
columnLength: 100,
circleFill: '#a6d40d',
strokeCol: '#ff5ec4',
strokeWidth: 1,
...config,
}
const { data, circleFill, strokeCol } = config
const svg = DOM.svg(width, height)
const sel = d3.select(svg)//.style('background', '#000')
// loop 50 times (so we connect to each point)
data.forEach((o, n) => {
// append 50 lines driven by the data
sel.selectAll('line.id-' + n)
.data(data)
.enter('line.id-' + n).append('line')
// append a line form a reference (point in data)
.attr('x1', data[n].x)
.attr('y1', data[n].y)
// connecting to all other points (all points in data)
.attr('x2', d => d.x)
.attr('y2', d => d.y)
// styles
.attr('stroke', strokeCol)
.attr('stroke-width', config.strokeWidth)
.style('opacity', 0.1)
})
// append the 50 circles to see the joins
sel.selectAll('circle')
.data(data)
.join('circle')
.attr('r', 8)
.attr('cx', d => d.x)
.attr('cy', d => d.y)
.style('fill', circleFill)
.style('opacity', 0.5)
return svg
}
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.
