Software engineering with human-centred design, visualization, GIS and data science.
Published
Edited
Dec 19, 2020
Importers
2 stars
height = 400
margin = 50
colors = d3.schemeCategory10
x = d3.scaleLinear()
.domain([0, numberOfDataPoints])
.range([0, chartWidth])
y = d3.scaleLinear()
.domain([0, maxY])
.range([chartHeight, 0])
chartWidth = width - 2 * margin
chartHeight = height - 2 * margin
dotRadius = 2
curves = ({
"Basis": d3.curveBasis,
"Linear": d3.curveLinear,
"Natural": d3.curveNatural,
"Step": d3.curveStep
})
curve = curves[curveName]
function renderAxes(svg) {
svg.append("g")
.attr("transform", `translate(${margin},${height - margin})`)
.call(d3.axisBottom(x.domain([0, numberOfDataPoints - 1])));
svg.append("g")
.attr("transform", `translate(${margin},${margin})`)
.call(d3.axisLeft(y).ticks(5));
}
lineChart.render(generateData)
numberOfSeries = 3
numberOfDataPoints = 10
maxY = 50
randomY = d3.randomUniform(0, maxY)
function data() {
return d3.range(numberOfSeries).map(() => {
return d3.range(numberOfDataPoints).map((_, i) => ({ x: i, y: randomY() }))
})
}
generateData = {
while (true) {
yield await Promises.tick(1000, data())
}
}
d3 = require("d3@6")
import {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.
