The avatar for @dv-develop-2025s
DV DEVELOP 2025 SPRING
Public
Edited
Jan 27
Fork of Introduction to Observable
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 ${width} pixels wide

**Add a variable above**
formatting easy and _intuitive_
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: 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("%Y-%m-%d %H:%M:%S")(Date.now()) + ". Try adding date!"
}
}
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.dot(cars, {x: "power (hp)", y: "economy (mpg)"})
]
})
Insert cell
cars
Insert cell
Insert cell
Insert cell
//type here
Insert cell
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
data
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
workbook1 = FileAttachment("quarlet.xlsx").xlsx()
Insert cell
workbook1.sheetNames
Insert cell
data1 = workbook1.sheet(0, {
headers: true,
// range: "A1:J10"
})
Insert cell
data1
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
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
confidence
Insert cell
viewof confidence = Inputs.range([0, 0.99], (label: "Confidence interval", step: 0.01})
Insert cell
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: { grid: true, domain: [2, 14] },
marks: [
Plot.frame({ strokeOpacity: 1 }),
Plot.dot(data, {
fx: (d) => niceFx(d.class),
fy: (d) => niceFy(d.class),
x: "x",
y: "y",
fill: "orange",
r: 5,
tip: true
}),
Plot.linearRegressionY(data, {
fx: (d) => niceFx(d.class),
fy: (d) => niceFy(d.class),
x: "x",
y: "y",
stroke: "blue",
fill: "orange",
r: 5,
tip: true,
ci: 0
})
]
});

Insert cell
niceFx = (key) =>key == "A" || key == "C" ? 1 : 2
Insert cell
niceFy = (key) =>key == "A" || key == "B" ? 1 : 2
Insert cell
Plot.plot({
marks: [
Plot.linearRegressionY(penguins , {x: "culmen_length_mm", y: "culmen_depth_mm", stroke: "species"}),
Plot.dot (penguins , {x: "culmen_length_mm", y: "culmen_depth_mm", stroke: "species"})
]
})
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