Published unlisted
Edited
Oct 3, 2022
countries = FileAttachment("bubble-chart-data.csv").csv({typed: true})
table = Inputs.table(countries)
basicPlot = Plot.plot({
marks: [
Plot.dot(countries, {
x: "income",
y: "lifeexp",
})
]
})
moreEncodings = Plot.plot({
marks: [
Plot.dot(countries, {
x: "income",
y: "lifeexp",
fill: "continent",
r: "population"
})
]
})
blackStrokes = Plot.plot({
marks: [
Plot.dot(countries, {
x: "income",
y: "lifeexp",
fill: "continent",
r: "population",
stroke: "black",
strokeWidth: 1
})
]
})
logarithmicX = Plot.plot({
marks: [
Plot.dot(countries, {
x: "income",
y: "lifeexp",
fill: "continent",
r: "population",
stroke: "black",
strokeWidth: 1
})
],
x: {type: "log"}
})
scaleOptions = Plot.plot({
marks: [
Plot.dot(countries, {
x: "income",
y: "lifeexp",
fill: "continent",
r: "population",
stroke: "black",
strokeWidth: 1
})
],
x: {type: "log", grid: true, ticks: 3, label: "Income (GDP/capita) →"},
y: {grid: true, ticks: 4, domain: [50, 85], label: "↑ Life expectancy (years)"}
})
colorLegend = Plot.plot({
marks: [
Plot.dot(countries, {
x: "income",
y: "lifeexp",
fill: "continent",
r: "population",
stroke: "black",
strokeWidth: 1
})
],
x: {type: "log", grid: true, ticks: 3, label: "Income (GDP/capita) →"},
y: {grid: true, ticks: 4, domain: [50, 85], label: "↑ Life expectancy (years)"},
color: {legend: true, range: ["#FF265C", "#FFE700", "#4ED7E9", "#70ED02", "purple"]}
})
tooltips = Plot.plot({
marks: [
Plot.dot(countries, {
x: "income",
y: "lifeexp",
fill: "continent",
r: "population",
stroke: "black",
strokeWidth: 1,
title: "country"
})
],
x: {type: "log", grid: true, ticks: 3, label: "Income (GDP/capita) →"},
y: {grid: true, ticks: 4, domain: [50, 85], label: "↑ Life expectancy (years)"},
color: {legend: true, range: ["#FF265C", "#FFE700", "#4ED7E9", "#70ED02", "purple"]}
})
facets = Plot.plot({
facet: {
data: countries,
x: "continent"
},
width: 1000,
height: 300,
marks: [
Plot.dot(countries, {
x: "income",
y: "lifeexp",
fill: "continent",
r: "population",
stroke: "black",
strokeWidth: 1,
title: "country"
})
],
x: {type: "log", grid: true, ticks: 3, label: "Income (GDP/capita) →"},
y: {grid: true, ticks: 4, domain: [50, 85], label: "↑ Life expectancy (years)"},
color: {legend: true, range: ["#FF265C", "#FFE700", "#4ED7E9", "#70ED02", "purple"]}
})
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.
