Published
Edited
Sep 10, 2019
Importers
Also listed in…
uncertainty: templates
Insert cell
md`# point`
Insert cell
chart = {
const svg = d3.select(DOM.svg(width, height))
.style("width", "60%")
.style("height", "auto")
.style("font", "10px sans-serif");
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("r", radius)
.attr("cx", function(d) { return x(d.TimeEruption); })
.attr("cy", function(d) { return y(d.TimeWaiting); })
;

return svg.node();
}
Insert cell
x = d3.scaleLinear()
.domain([
d3.min(data, function(d) {return d.TimeEruption;}),
d3.max(data, function(d) {return d.TimeEruption;}),
])
.range([0 + padding, width - padding])
;
Insert cell
y = d3.scaleLinear()
.domain([
d3.min(data, function(d) {return d.TimeWaiting;}),
d3.max(data, function(d) {return d.TimeWaiting;}),
])
.range([height - padding, 0 + padding])
;
Insert cell
width = 300
Insert cell
height = 300
Insert cell
radius = 3.5
Insert cell
padding = 10
Insert cell
data = d3.csv("https://gist.githubusercontent.com"
+ "/aaronxhill/a93d5a17173e60dc4d8f0e878984abcd"
+ "/raw/e6051b089f3105b6b647ead1c8fe057a9483d839"
+ "/oldfaithful.csv")
//https://gist.github.com/aaronxhill/a93d5a17173e60dc4d8f0e878984abcd/raw/e6051b089f3105b6b647ead1c8fe057a9483d839/oldfaithful.csv
Insert cell
d3 = require("d3@5")
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