Published
Edited
Mar 25, 2020
2 stars
chart = {
console.clear();
const svg = d3.select("svg");
svg.selectAll("g, line").remove();
let areaLayer = svg
.append("g")
.attr("transform", "translate(" + margin + "," + margin + ")");
let linesLayer = svg
.append("g")
.attr("transform", "translate(" + margin + "," + margin + ")");
let markersLayer = svg
.append("g")
.attr("transform", "translate(" + margin + "," + margin + ")");
let path = areaLayer
.append("path")
.datum(data)
.attr("fill", "pink")
.attr("d", area);
let circles = markersLayer
.selectAll("circle")
.data(data)
.join("g");
circles
.append("circle")
.attr("id", d => "circle-" + d.x)
.attr("cx", d => x(d.x))
.attr("cy", d => y(d.y))
.attr("r", r)
.style("stroke", "white");
let highlightedPoints = [3, 30];
highlightedPoints.forEach(function(point) {
console.log(point);
let circle = d3.select("#circle-" + point);
let text = d3.select("#ref-point-" + point);
let textNode = text.node();
let svgNode = svg.node();
let bbText = textNode.getBoundingClientRect();
let bbSVG = svgNode.getBoundingClientRect();
let padding = 17;
let lessXSVG = -(margin + padding);
let plusXText = bbText.x;
let x2 = lessXSVG + plusXText + bbText.width / 2;
let y2 = -(bbSVG.top - bbText.top);
let arrow = linesLayer
.append("line")
.attr("x1", circle.attr("cx"))
.attr("y1", circle.attr("cy"))
.attr("x2", x2)
.attr("y2", y2)
.style("fill", "none")
.style("stroke", "blue")
.style("stroke-dasharray", "2,2");
});
}
d3 = require("d3@5", "d3-random@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.
