Published
Edited
Dec 16, 2018
chart = {
const data = [{
x: 10,
y: 10
}, {
x: 100,
y: 100
}, {
x: 200,
y: 10
}, {
x: 300,
y: 350
}, {
x: 400,
y: 50
}];
const svgNode = svg `<svg width=400 height=400></svg>`;
const g = d3.select(svgNode).append('g')
const line = d3.line()
.x(d => d.x)
.y(d => d.y)
.curve(d3.curveCardinal)
var defs = g.append('defs')
.append('clipPath')
.attr('id', 'clippathContainer1')
.append('rect')
.attr('width', 400)
.attr('height', 200)
var defs2 = g.append('defs')
.append('clipPath')
.attr('id', 'clippathContainer2')
.append('rect')
.attr('width', 400)
.attr('height', 200)
.attr('y', 200)
g
.append('path')
.attr('d', line(data))
.attr('clip-path', `url(#clippathContainer2)`)
.attr('stroke', 'green')
.attr('stroke-width', 5)
.attr('fill', 'none')
g
.append('path')
.attr('d', line(data))
.attr('clip-path', `url(#clippathContainer1)`)
.attr('stroke', 'red')
.attr('stroke-width', 5)
.attr('fill', 'none')
return svgNode;
}
d3 = require('d3')
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.
