Notebooks 2.0 is here.

Read the preview announcement
The avatar for @angiehjort
Angie Hjort
Data graphics developer at Gapminder. Teacher at DIS Stockholm. Escaping flatland one chart at a time.
Public
Edited
Jan 16
Fork of Exploratory data analysis
•
12 forks
10
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
sampleData = d3.range(100).map(d => ({x: Math.random(), y: Math.random()}))
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
<div style="height:200px">
<h3>2. HTML cell</h3>
<ul>
<li>This is what web pages are made of</li>
<li>Cumbersome to write, since everything is made of tags you need to close</li>
<li>Change box background to yellow --></li>
</ul>
<div class="fancy">But look what it can do!</div>
<style>
.fancy{
position:absolute;
top: 100px;
left: 400px;
padding: 20px;
border: 1px solid red;
transform: rotate(10deg);
}
</style>
</div>
Insert cell
Insert cell
Insert cell
{
//here you can write calculations and logic
//comments are ignored
while(true) { // Loop goes on forever
await Promises.delay(1000); // This causes the loop to "wait" 1000 milliseconds instead of spamming your computer
yield "The time is now " + d3.timeFormat("%H:%M:%S")(Date.now()) + ". Try adding date!"
}
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
//type here
Insert cell
Insert cell
Insert cell
// reference here
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// import the file here
Insert cell
Insert cell
//add your cells here
Insert cell
Insert cell
Insert cell
//add code here
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof slider = Inputs.range([0, 0.99], {label: "Confidence interval", step: 0.01})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {pizzaorders} from "@observablehq/data-vis-course-assignment"
Insert cell
pizzaorders
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
import {showMe} from "@observablehq/show-me"
Insert cell
import {toc} from "@nebrius/indented-toc"
Insert cell
screenshot20250115At190837 = FileAttachment("Screenshot 2025-01-15 at 19.08.37.png").image({width: 500})
Insert cell
screenshot20250115At191614 = FileAttachment("Screenshot 2025-01-15 at 19.16.14.png").image({width: 500})
Insert cell
screenshot20250115At192956 = FileAttachment("Screenshot 2025-01-15 at 19.29.56.png").image({width: 500})
Insert cell
screenshot20250115At195522 = FileAttachment("Screenshot 2025-01-15 at 19.55.22.png").image({width: 500})
Insert cell
screenshot20250115At204455 = FileAttachment("Screenshot 2025-01-15 at 20.44.55.png").image({width: 500})
Insert cell
adelie = FileAttachment("6107068.jpg").image({width: 300})
Insert cell
detailed = FileAttachment("image-657921d3-d15e-4feb-8fce-dadfe4a75e5f.png").image({width: 500})
Insert cell
incorrect_aggr = FileAttachment("image-cdf0b0e4-fc75-4cf4-8bc4-a05b49509cdc.png").image({width: 500})
Insert cell
useless = FileAttachment("image-e3e822d8-d619-4afc-ae8f-26461062b13c.png").image({width: 500})
Insert cell
correct_aggr = FileAttachment("image-f2ee3249-ece6-45e9-9682-75d6832edd06.png").image({width: 500})
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