The avatar for @xaviers-workspace
Xavier's Workspace
Public
Edited
Jan 23
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
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!"
}
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.dot(cars, {x: "power (hp)", y: "economy (mpg)"})
]
})
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
species
Facet Y
sex
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
// import the file here

Insert cell
workbook = FileAttachment("anscombe@1.xlsx").xlsx()
Insert cell
workbook.sheetNames
Insert cell
data = workbook.sheet(0, {
headers: true,
// range: "A1:J10"
})
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
viewof confidence = Inputs.range([0, 0.99], {label: "Confidence 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: 0.1 }),
Plot.dot(data1, { fx: (d) => niceFx(d.class), fy: (d) => niceFy(d.class), x: "x", y: "y", fill: "orange", stroke: "#ff4a13", r: 5, tip: true }),
Plot.linearRegressionY(data1, {
fx: (d) => niceFx(d.class),
fy: (d) => niceFy(d.class),
x: "x",
y: "y",
stroke: "blue",
fill: "orange",
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
Plot.plot({
marks: [
Plot.dot(penguins, {x: "culmen_length_mm", y: "culmen_depth_mm", stroke: "species"}),
Plot.linearRegressionY(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
import {c} from "@xaviers-workspace/my-first-notebook"
Insert cell
c
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
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