Software engineering with human-centred design, visualization, GIS and data science.
scatterplotChart.render(generateData)
x = d3.scaleLinear()
.domain([0, maxXY])
.range([0, chartWidth])
y = d3.scaleLinear()
.domain([0, maxXY])
.range([chartHeight, 0])
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));
}
symbols = d3.scaleOrdinal().range(d3.symbols)
function symbolPath(symbolType) {
return d3.symbol().type(symbolType)()
}
maxXY = 1000
randomXY = d3.randomUniform(0, maxXY)
randomZ = {
const randomSymbolIndex = d3.randomUniform(0, d3.symbols.length)
return function() {
return Math.floor(randomSymbolIndex())
}
}
numberOfDataPoints = 100
function data() {
return d3.range(0, numberOfDataPoints).map(_ => ({ x: randomXY(), y: randomXY(), z: randomZ() }))
}
generateData = {
while (true) {
yield await Promises.tick(2000, data())
}
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
d3 = require("d3@6")
import {chartWidth, chartHeight, height, margin, colors} 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.
