The avatar for @d3
D3
Bring your data to life.
Public
Learn D3
Edited
Oct 26, 2023
50 forks
Importers
72 stars
1
Learn D3
IntroductionBy Example
Data
ScalesShapesAnimationJoinsInteractionFurther Topics
Insert cell
Insert cell
Insert cell
FileAttachment("temperature.csv")
Insert cell
Insert cell
FileAttachment("temperature.csv").text()
Insert cell
Insert cell
FileAttachment("temperature.csv").csv()
Insert cell
Insert cell
Insert cell
"62.7" + "59.9" // 122.6? Nope!
Insert cell
Insert cell
FileAttachment("temperature.csv").csv({typed: true})
Insert cell
Insert cell
Insert cell
1 + 1
Insert cell
name = "fred"
Insert cell
[...name].reverse().join("")
Insert cell
Insert cell
sum = {
let s = 0;
for (let i = 0; i < 10; ++i) {
s += i;
}
return s;
}
Insert cell
Insert cell
s // not defined!
Insert cell
Insert cell
data = {
const text = await FileAttachment("temperature.csv").text();
const parseDate = d3.utcParse("%Y-%m-%d");
return d3.csvParse(text, ({date, temperature}) => ({
date: parseDate(date),
temperature: +temperature
}));
}
Insert cell
Insert cell
d3.extent(data, d => d.date)
Insert cell
d3.extent(data, d => d.temperature)
Insert cell
Insert cell
import {Histogram} from "@d3/histogram"
Insert cell
Histogram(data, {value: d => d.temperature, width, height})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
height = 200
Insert cell
import {keyStyled} from "@mbostock/keys"
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