chart = {
const width = 928; // uncomment for responsive width
const height = 200;
const data = [[1,2],
[1,6],
[1,8],
[1,3],
[1,12]]
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height)
.attr("style", "max-width: 100%; height: auto;");
svg
.selectAll("circle")
.data(d3.range(data.length))
.join("circle")
.attr("cx", d => 30 + d * 50)
.attr("cy", height / 2)
.attr("r", d => Math.random() * 20)
.attr("fill", "#001b42");
return svg.node();
}
tScale = d3.scaleLinear()
.domain([10, 130])
.range([0, 960])
tScale(80)
tScale(50)
// color encoding
theColor = d3.scaleLinear()
.domain([10, 100])
.range(["brown", "steelblue"])
theColor(20)
theColor(50)
quarter = d3.scaleBand()
.domain(["one", "two", "three", "four"])
.range([0, 100])
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.
