Notebooks 2.0 is here.

Read the preview announcement
The avatar for @lkocevski
Lkocevski
Public
'Worksheets: Learn Plot - Luka Kocevski
Edited
Apr 27, 2023
16
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data = FileAttachment("us-population-state-age.csv")
.csv({ typed: true })
Insert cell
Insert cell
Insert cell
Insert cell
Inputs.table(data)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.barY(data, {x: "name", y: "20-29"})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
width : 1000,
marks: [
Plot.barY(data, {x: "name", y: "20-29"})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
width: 1000,
marginLeft: 80,
y: {
transform: d => d/1_000_000
},
marks: [
Plot.barY(data, {x: "name", y: "20-29"})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
width: 1000,
marginLeft: 80,
y: {
label: "🤑 Millions",
transform: d => d/1_000_000
},
marks: [
Plot.barY(data, {x: "name", y: "20-29", sort: {x: "y", reverse: true}})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
width: 1000,
marginLeft: 80,
y: {
label: "🤑 Millions",
transform: d => d/1_000_000
},
marks: [
Plot.barY(data, {x: "name", y: "20-29", sort: {x: "y", reverse: true}})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
width: 1000,
marginLeft: 80,
y: {
label: "🤑 Millions",
transform: d => d/1_000_000
},
marks: [
Plot.barY(data, {x: "name", y: "20-29", sort: {x: "y", reverse: true}, fill: d => d["20-29"] >1_200_000 ? "salmon": "dodgerblue"})
]
})
Insert cell
Insert cell
Insert cell
Plot.plot({
width: 1000,
marginLeft: 80,
y: {
label: "🤑 Millions",
transform: d => d/1_000_000
},
marks: [
Plot.barY(data, {
x: "name",
y: "20-29",
sort: {x: "y", reverse: true},
fill: d => d["name"] === "VA" ? "red": "dodgerblue"})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Inputs.table(data)
Insert cell
Insert cell
Insert cell
ageRangeToFocus = "<10"
Insert cell
Insert cell
Insert cell
Plot.plot({
width: 1000,
marginLeft: 80,
y: {
label: "🤑 Millions",
transform: d => d/1_000_000
},
marks: [
Plot.barY(data, {
x: "name",
y: ageRangeToFocus,
sort: {x: "y", reverse: true},
fill: d => d["name"] === "VA" ? "red": "dodgerblue"})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
// The dropdown menu should let the user select from '<10', '10-19', '20-29', '30-39', '40-49', '50-59', '60-69', '70-79', '≥80'

// ... your code here.
Insert cell
Insert cell
ageRange_dropdown
Insert cell
Insert cell
Insert cell
Plot.plot({
width: 1000,
marginLeft: 80,
y: {
label: "🤑 Millions",
transform: d => d/1_000_000
},
marks: [
Plot.barY(data, {
x: "name",
y: ageRange_dropdown,
sort: {x: "y", reverse: true},
fill: d => d["name"] === "VA" ? "red": "dodgerblue"})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
width: 1000,
marginLeft: 80,
y: {
label: "🤑 Millions",
transform: d => d/1_000_000
},
marks: [
Plot.barY(data, {
x: "name",
y: ageRange_dropdown,
sort: sort_toggle ? {x: "y", reverse: true} : "",
fill: d => d["name"] === "VA" ? "red": "dodgerblue"})
]
})
Insert cell
Insert cell
Insert cell
import {toc} from "@nebrius/indented-toc"
Insert cell
import {imageToDo} from "@clokman/student-blocks"
Insert cell
imageToDo
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