Published
Edited
Sep 12, 2020
2 forks
Importers
5 stars
chart = {
const target = html`<svg>`;
const svg = d3.select(target).attr("viewBox", [0, 0, width, height]);
const g = svg
.append("g")
.attr("class", "gDrawing")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
g.append("g")
.attr("class", "xAxis")
.attr("transform", `translate(0, ${height - margin.top - margin.bottom})`)
.append("text")
.attr("class", "axisLabel")
.style("fill", "black")
.attr("transform", `translate(${width - margin.left - margin.right}, 30)`)
.style("text-anchor", "end");
g.append("g")
.attr("class", "yAxis")
.append("text")
.attr("class", "axisLabel")
.style("fill", "black")
.attr("transform", `translate(0, -10)`)
.style("text-anchor", "middle");
return target;
}
update = {
const g = d3.select(chart).select(".gDrawing");
g.select(".xAxis")
.call(d3.axisBottom(x))
.select(".axisLabel")
.text(xAttr);
g.select(".yAxis")
.call(d3.axisLeft(y))
.select(".axisLabel")
.text(yAttr); // there was a bug here 🤷
const t = g.transition().duration(1000);
const move = sel =>
sel.attr("cx", d => x(d[xAttr])).attr("cy", d => y(d[yAttr]));
const rows = g
.selectAll(".rows")
.data(data.slice(0, maxN))
.join(
enter =>
enter
.append("circle")
.attr("class", "rows")
.style("fill", "red")
.call(enter => enter.transition(t).style("fill", "steelblue"))
.call(move),
update =>
update
.style("opacity", 1)
.style("fill", "steelblue")
.call(update => update.transition(t).call(move)),
exit =>
exit.style("fill", "grey").call(exit =>
exit
.transition(t)
.style("opacity", 0)
.remove()
)
)
.attr("r", 5);
invalidation.then(() => d3.interrupt(t));
}
x = d3
.scaleLinear()
.domain(d3.extent(data, d => d[xAttr]))
.range([0, width - margin.left - margin.right])
.nice()
y = d3
.scaleLinear()
.domain(d3.extent(data, d => d[yAttr]))
.range([height - margin.top - margin.bottom, 0])
.nice()
margin = ({ left: 40, top: 20, bottom: 50, right: 20 })
height = 400
attrs = Object.keys(data[0])
quants = attrs.filter(a => typeof data[0][a] === "number")
categoricals = attrs.filter(a => typeof data[0][a] !== "number")
data = vegaDatasets["penguins.json"]()
vegaDatasets = require("vega-datasets@2")
d3 = require("d3@6")
import { slider, select } from "@jashkenas/inputs"
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.
