Published unlisted
Edited
Jul 6, 2022
d3 create separate element based on separate data
{
const width = 1280;
const height = 720;
const svg = d3.select('svg')
.attr('xmlns', 'http://www.w3.org/2000/svg')
.attr('viewBox', `0 0 ${width} ${height}`)
const rect = svg.append('rect')
.attr('x', '0')
.attr('y', '0')
.attr('width', `${width}`)
.attr('height', `${height}`)
.attr('fill', `#EFEFEF`)
//src
const dataHorizontal = [
{ x: 0, y: 0 },
{ x: 1280, y: 0 }
];
const pathVal = d3.line()
.x(d => d.x)
.y(d => d.y)
(dataHorizontal);
const index1 = [1, 2, 3];
const index2 = [4, 5, 6, 7, 8, 9, 10, 11]
const multiplier = 60;
//based on index1
svg.selectAll('path')
.data(index1)
.join('path')
.attr('class', (d) => `ln${d}`)
.attr('d', pathVal)
.attr('stroke', () => { return `hsla(${Math.random() * 360} , ${((Math.random() + Math.random()/2)*100).toFixed(2)}%, 50%, 1)`; })
.style('transform', (d, i) => { return `translateY(${d*multiplier}px)` })
.attr('stroke-width', '2')
//based on index2
svg.selectAll('path')
.data(index2)
.join('path')
.attr('class', (d) => `ln${d}`)
.attr('d', pathVal)
.attr('stroke', () => { return `hsla(${Math.random() * 360} , ${((Math.random() + Math.random()/2)*100).toFixed(2)}%, 50%, 1)`; })
.style('transform', (d, i) => { return `translateY(${d*multiplier}px)` })
.attr('stroke-width', '2')
}
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.
