Published
Edited
Jul 15, 2019
chart = {
const svg = d3.select(DOM.svg(width, height));
svg.append("g")
.attr("id", "background");
svg.append("g")
.attr("id", "counter");
svg.append("g")
.attr("id", "series");
var counts = entry_counts(x),
scales = generate_scales(counts);
svg.select("#background")
.append("rect")
.classed("active", true)
.attrs({
"width": width,
"height": 200,
"fill": "#F7F7F7"
})
.on("mousemove", function() { click_fun(svg, this) });
svg.select("#series")
.selectAll("circle")
.data(x).enter()
.append("circle")
.attrs({
"cx": (d) => scales.t(d.t),
"cy": (d) => scales.x(d.x),
"fill": (d) => scales.fill(d.in_range),
"r": 2
});
svg.select("#counter")
.selectAll("circle")
.data(counts).enter()
.append("circle")
.attrs({
"cx": (d) => scales.t(d.t),
"cy": (d) => scales.counter(d.count),
"fill": "#515771",
"r": 3,
"opacity": 0.8
});
return svg.node()
}
n = 200
x = initialize_x(n);
height = 400;
//d3 = require("d3@5")
d3 = require("d3-selection", "d3-selection-multi", "d3-scale", "d3-array")
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.
