Data Analyst with a passion for Data visualization and storytelling
Public
Edited
Jun 4, 2023
1 fork
Plot.plot({
style: {
backgroundColor: "white",
fontFamily: "Secular One",
fontSize: 12
},
aspectRatio: 1,
x: {
label: "Age (years) →",
grid: true,
tickSize: 0
},
y: {
grid: true,
label: "← Women · Men →",
labelAnchor: "center",
ticks: false
},
marks: [
Plot.dot(
df,
Plot.stackY2({
x: (d) => 2023 - d.birth_date.getUTCFullYear(),
y: (d) => (d.gender === "male" ? 1 : -1),
fill: (d) =>
d.gender === "male"
? "#4876FF"
: d.gender === "female"
? "#FF3E96"
: "black",
stroke: "black",
r: 10,
title: (d) => `${d.name}: ${d.Age}\n ${d.place_of_death_or_residence}`
})
),
Plot.ruleY([0])
],
height: 800,
width: 1200,
fontfamily: "Secular One"
})
import { Plot } from "@mkfreeman/plot-tooltip"
old_people.csv
df
Type Table, then Shift-Enter. Ctrl-space for more options.
df
Plot.plot({
style: {
backgroundColor: "white",
fontFamily: "Secular One",
fontSize: 12
},
marks: [
Plot.barX(alive, {
x: "Age_1",
y: "name",
sort: { y: "x", reverse: true },
fill: (d) =>
d.gender === "male"
? "#4876FF"
: d.gender === "female"
? "#FF3E96"
: "black"
}),
Plot.text(alive, {
text: (d) => `${d.place_of_death_or_residence}`,
y: "name",
x: "Age_1",
textAnchor: "end",
color: "black"
}),
Plot.ruleX([0])
],
height: 500,
width: 800,
marginLeft: 150
})
Plot.plot({
style: {
backgroundColor: "white",
fontFamily: "Secular One",
fontSize: 12
},
marks: [
Plot.barX(
df,
Plot.groupY(
{ x: "count" },
{
y: "place_of_death_or_residence",
sort: { y: "x", reverse: true },
fill: (d) =>
d.place_of_death_or_residence === "United States"
? "steelblue"
: d.place_of_death_or_residence === "Japan"
? "red"
: "lightgray"
}
)
),
Plot.ruleX([0])
],
height: 700,
width: 800,
marginLeft: 150
})
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.
