The avatar for @dv-develop-2025s
DV DEVELOP 2025 SPRING
Public
Edited
Jan 22
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
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!"//"return" would freeze the output
}
}
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.dot(cars, {x: "power (hp)", y: "economy (mpg)"})
]
})
Insert cell
Insert cell
cars
Insert cell
penguins
Insert cell
Insert cell
Insert cell
mypenguins = penguins
Insert cell
mypenguins
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
smolpenguins
Insert cell
Insert cell
Insert cell
smolpenguins
X
body_mass_g
Y
—
Color
sex
Size
—
Facet X
sex
Facet Y
species
Mark
bar
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
workbook = FileAttachment("Book1.xlsx").xlsx()
Insert cell
workbook.sheetNames
Insert cell
data1 = workbook.sheet(0, {
headers: true,
// range: "A1:J10"
})
Insert cell
data1
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
data2
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
viewof confidence = Inputs.range([0, 0.99], {label: "Confidnce interval", step: 0.01})
Insert cell
CellToExport=Plot.plot({
title:"Quartet",
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(data2, { fx: (d) => niceFx(d.class), fy: (d) => niceFy(d.class), x: "x", y: "y", fill:"orange", stroke:"#ff0404", r:5, tip: true }),
Plot.linearRegressionY(data2, { fx: (d) => niceFx(d.class), fy: (d) => niceFy(d.class), x: "x", y: "y", stroke:"Blue", r:5, tip: true, ci:confidence })
]
})
Insert cell
niceFx = (key) => key == "a" || key == "c" ? 1:2;
Insert cell
niceFy=(key)=> key == "a"||key == "b" ? 1:2;
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