{
// CHART CODE
const height = 100;
const svg = d3.create('svg')
.attr('viewBox', [0, 0, width, height]);
const data = [
{
x1: 0,
y1: 0,
x2: width,
y2: 100,
color: 'red',
id: '1',
},
{
x1: 0,
y1: height,
x2: width,
y2: 0,
color: 'orange',
id: '2',
},
{
x1: 0,
y1: height / 2,
x2: width,
y2: height / 2,
color: 'blue',
id: '3',
},
];
const lines = svg.append('g')
.selectAll('line')
.data(data)
.join('line')
.attr('id', d => d.id)
.attr('x1', d => d.x1)
.attr('y1', d => d.y1)
.attr('x2', d => d.x2)
.attr('y2', d => d.y2)
.attr('stroke', d => d.color)
.attr('stroke-width', '10');
lines.on('mouseover', onMouseOver)
.on('mouseout', onMouseOut);
// Helper methods
const UNFOCUSED_COLOR = 'lightgrey';
function onMouseOver(d) {
const line = d.target;
const getStrokeColor = (d) => {
if (d.id === line.id) return d.color;
return UNFOCUSED_COLOR;
};
lines.attr('stroke', getStrokeColor);
}
function onMouseOut(d) {
lines.attr('stroke', d => d.color);
}
return svg.node();
}
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.
