The avatar for @dv-develop-2025s
DV DEVELOP 2025 SPRING
Public
Edited
Jan 22
11
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
sampleData = d3.range(100).map(d => ({x: Math.random(), y: Math.random()}))
Insert cell
Plot.dot(sampleData, { x: "x", y: "y" }).plot({ height: 200 })
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
<div style="height: 100px"></div>
## Cell types
### 1. Markdown cell
* does formatting like you would explain a plain text to work
* the data is kept in plain text
* enables smooth writing of basic documents
* can be interactive: this notebook is 928 pixels wide

**Add a variable above**
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);
background-color: yellow;
}
</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 of %Y-%M-%d")(Date.now())
}
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
cars
Insert cell
Insert cell
mypenguins = penguins
Insert cell
mypenguins
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
smolPenguins
Insert cell
Insert cell
Insert cell
Insert cell
smolPenguins
X
body_mass_g
Y
—
Color
sex
Size
—
Facet X
species
Facet Y
sex
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.

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
workbook.sheetNames
Insert cell
data = workbook.sheet(0, {
headers: true,
range: "A1:C43"
})
Insert cell
data
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
data1
X
x
Y
y
Color
—
Size
—
Facet X
class
Facet Y
—
Mark
dot
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
cellToExport = Plot.plot({
style: ({fontSize: 16}),
marginBottom: 50,
marginTop: 40,
width: width,
height: 800,
fx: {axis: null},
fy: {axis: null},
x: {grid: true, domain: [2, 21]},
y: {frid: true, domain: [2, 14]},
marks: [
Plot.frame({ strokeOpacity: 1 }),
Plot.dot(data1, { fx: (d) => niceFx(d.class), fy: (d) => niceFy(d.class), x: "x", y: "y", stroke: "#ff4a13", fill: "orange", tip: true }),
Plot.linearRegressionY(data1, { fx: (d) => niceFx(d.class), fy: (d) => niceFy(d.class), x: "x", y: "y", stroke: "blue", r: 5, fill: "orange", tip: true , ci: confidence})
]
})
Insert cell
niceFy = (key) => key == "A" || key == "B" ? 1 : 2;
Insert cell
niceFx = (key) => key == "A" || key == "C" ? 1 : 2;
Insert cell
Plot.plot({
marks: [
Plot.linearRegressionY(penguins, {x: "culmen_length_mm", y: "culmen_depth_mm", stroke: "species"})
]
})
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