Public
Edited
Dec 13, 2023
Insert cell
Insert cell
Insert cell
worldbank2010.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Plot.plot({
x: {
type: "log"
},
color: {
legend: true,
type: "categorical",
scheme: "Paired"
},
marks: [
Plot.dot(worldbank2010, { x: "gdp", y: "life_exp", fill: "region"})
]
})
Insert cell
Insert cell
Plot.plot({
x: {
type: "log"
},
y: {
type: "log"
},
color: {
legend: true,
type: "sequential",
scheme: "BuGn",
label: "life expectancy"
},
marks: [
Plot.dot(worldbank2010, { x: "gdp", y: "co2", fill: "life_exp", stroke: "black"})
]
})
Insert cell
Insert cell
Plot.plot({
x: {
type: "log"
},
color: {
legend: true,
type: "quantile",
scheme: "BuYlRd",
tickFormat: ".0f"
},
marks: [
Plot.dot(worldbank2010, { x: "gdp", y: "life_exp", fill: "co2"})
]
})
Insert cell
Insert cell
Insert cell
cars
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
width: width,
height: 300,
x: {
type: "log"
},
color: {
legend: true,
type: "ordinal",
domain: ["NA", "Low income", "Lower middle income", "Upper middle income", "High income"],
range: ["gray", 'red', 'orange', 'blue', 'green']
},
marks: [
Plot.dot(worldbank2010, { x: "gdp", y: "life_exp", fill: "gray", opacity: 0.2}),
Plot.dot(worldbank2010, { x: "gdp", y: "life_exp", fx: "region", fill: "income_group"}),
Plot.text(worldbank2010, Plot.select({y: "max"}, { x: "gdp", y: "life_exp", fx: "region", text: "country_name", fill: "green", dy: -5})),
Plot.text(worldbank2010, Plot.select({y: "min"}, { x: "gdp", y: "life_exp", fx: "region", text: "country_name", fill: "red", dy: -5})),
Plot.frame()
]
})
Insert cell
Insert cell
Insert cell
regions = ["East Asia & Pacific",
"Europe & Central Asia",
"Latin America & Caribbean",
"Middle East & North Africa",
"North America",
"South Asia",
"Sub-Saharan Africa"]
Insert cell
Insert cell
Plot.plot({
height: 300,
x: {
type: "log"
},
color: {
legend: true,
type: "ordinal",
scheme: "BuGn",
domain: ["NA", "Low income", "Lower middle income", "Upper middle income", "High income"]
},
marks: [
Plot.dot(worldbank2010, { x: "gdp", y: "life_exp", fill: "gray", opacity: 0.2}),
Plot.dot(worldbank2010, { x: "gdp", y: "life_exp", fill: "income_group", filter: d => d.region === regionSelected}),
Plot.text(worldbank2010, Plot.select({y: "max"}, { x: "gdp", y: "life_exp", text: "country_name", fill: "green", dy: -5})),
Plot.text(worldbank2010, Plot.select({y: "min"}, { x: "gdp", y: "life_exp", text: "country_name", fill: "red", dy: -5})),
Plot.frame()
]
})
Insert cell
Insert cell
Insert cell
viewof select = Inputs.select(["A", "B"], {label: "Select one"})
Insert cell
select
Insert cell
import { toggleSwitch } from '@chrispahm/toggle-switch-input-button'
Insert cell
import {Scrubber} from '@mbostock/scrubber'
Insert cell
viewof value = Scrubber(d3.range(1950,2009), {
autoplay: false,
delay: 500,
loop: false,
// initial: 5,
// loopDelay: 1000,
// alternate: true
})
Insert cell
viewof range = Inputs.range([1950,2008], {label: "Amount", step: 1})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {nations} from "@observablehq/plot-wealth-health-nations"
Insert cell
nations
Insert cell
viewof year = Scrubber(d3.range(1950,2009), {
autoplay: false,
delay: 100,
loop: false,
// initial: 5,
// loopDelay: 1000,
// alternate: true
})
Insert cell
Plot.plot({
width,
height: 500,
y: {
label: "life expectancy"
},
color: {
legend: true
},
marks: [
Plot.dot(nations, {
x: "income",
y: "lifeExpectancy",
r: "population",
fill: "region",
stroke: "black",
filter: d => d.year == year
}),
Plot.dot(nations, Plot.pointer({
x: "income",
y: "lifeExpectancy",
r: "population",
fill: "region",
stroke: "red",
strokeWidth: 10,
opacity: 0.5,
filter: d => d.year == year,
tip: true,
channels: {
nation: "name",
}
}))
],
x: {
type: "log"
}
})
Insert cell
Insert cell
Insert cell
import {personOutlined, personFilled} from "@datavizstudio/person-isotype-matrix"
Insert cell
import {createMatrixData} from "@datavizstudio/person-isotype-matrix"
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