Software engineering with human-centred design, visualization, GIS and data science.
Published
Edited
Dec 19, 2020
1 fork
2 stars
bubbleChart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const chartArea = svg.append("g")
.attr("transform", `translate(${margin},${margin})`);
function renderBubbles(data) {
data.forEach((dataPoints, i) => {
chartArea.selectAll("circle.bubble_" + i)
.data(dataPoints)
.enter()
.append("circle")
.attr("class", "bubble_" + i)
.attr("cx", d => x(d.x))
.attr("cy", y(0))
.attr("r", 0)
.attr("stroke", colors[i])
.attr("fill", colors[i])
.attr("fill-opacity", 0.5);
chartArea.selectAll("circle.bubble_" + i)
.data(dataPoints)
.transition()
.duration(500)
.attr("cx", d => x(d.x))
.attr("cy", d => y(d.y))
.attr("r", d => z(d.z));
});
}
renderAxes(svg);
return Object.assign(svg.node(), {
render(data) {
renderBubbles(data);
}
});
}
md`## Chart Config`
z = d3.scaleLinear()
.domain([0, maxZ])
.range([0, 40])
bubbleChart.render(generateData)
maxZ = 100
randomZ = d3.randomUniform(0, maxZ)
function data() {
let data = lineChartData();
for (let series of data) {
for (let dataPoint of series) {
dataPoint.z = randomZ();
}
}
return data;
}
generateData = {
while (true) {
yield await Promises.tick(1000, data())
}
}
d3 = require("d3@6")
import {height, margin, x, y, colors, data as lineChartData, renderAxes} from "@jeffreymorganio/line-chart"
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.
