Published
Edited
Dec 19, 2020
Fork of Bubble Chart
Insert cell
Insert cell
Insert cell
Insert cell
scatterplotChart.render(generateData)
Insert cell
x = d3.scaleLinear()
.domain([0, maxXY])
.range([0, chartWidth])
Insert cell
y = d3.scaleLinear()
.domain([0, maxXY])
.range([chartHeight, 0])
Insert cell
function renderAxes(svg) {
svg.append("g")
.attr("transform", `translate(${margin},${height - margin})`)
.call(d3.axisBottom(x));

svg.append("g")
.attr("transform", `translate(${margin},${margin})`)
.call(d3.axisLeft(y).ticks(5));
}
Insert cell
symbols = d3.scaleOrdinal().range(d3.symbols)
Insert cell
function symbolPath(symbolType) {
return d3.symbol().type(symbolType)()
}
Insert cell
Insert cell
maxXY = 1000
Insert cell
randomXY = d3.randomUniform(0, maxXY)
Insert cell
randomZ = {
const randomSymbolIndex = d3.randomUniform(0, d3.symbols.length)
return function() {
return Math.floor(randomSymbolIndex())
}
}
Insert cell
numberOfDataPoints = 100
Insert cell
function data() {
return d3.range(0, numberOfDataPoints).map(_ => ({ x: randomXY(), y: randomXY(), z: randomZ() }))
}
Insert cell
generateData = {
while (true) {
yield await Promises.tick(2000, data())
}
}
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
d3 = require("d3@6")
Insert cell
import {chartWidth, chartHeight, height, margin, colors} from "@jeffreymorganio/line-chart"
Insert cell

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.
Learn more