chart3 = {
let el = this;
if (!el) {
el = DOM.svg(width + margin.left + margin.right, height + margin.top + margin.bottom)
const svg = d3.select(el)
const defs = svg.append("defs")
// To clip the left and right parts of the area (see css styles below)
defs.append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("x", 0)
.attr("width", width)
.attr("height", height);
// To clip the vertical line segments above the series line (see css styles below)
defs.append("clipPath")
.attr("id", "top-clip")
.append("path")
.datum(data)
.attr("d", area);
const focus = svg.append("g")
.attr("class", "focus")
.attr("transform", `translate(${margin.left},${margin.top})`);
focus.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area);
focus.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
focus.append("path")
.datum(data)
.attr("id", "top-line")
.attr("d", line)
focus.append("path")
.datum(data)
.attr("id", "top-line-fill")
.attr("d", line)
focus.append("line")
.attr("id", "left-line")
.attr('x1', 0)
.attr('y1', 0)
.attr('x2', 0)
.attr('y2', 0);
focus.append("line")
.attr("id", "right-line")
.attr('x1', 0)
.attr('y1', 0)
.attr('x2', 0)
.attr('y2', 0);
focus.append("g")
.attr("class", "x axis")
.attr("transform", `translate(0,${height})`)
.call(xAxis);
}
else {
updateChart3()
}
return el;
}
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.
