Public
Edited
Feb 25, 2024
prediction.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
data
Plot.plot({
height: 500, // Adjust as needed
title: "Estimate by Age and Income", // Title for the plot
y: {
grid: true,
label: "Estimate",
tickFormat: d => `${Math.round(d * 100)}%` // Convert the value to percentage with 0 decimal points
},
x: {
grid: true,
label: "Age"
},
color: {
type: "ordinal",
legend:true,
domain: ["Low Income", "Mid Income", "High Income"],
range: ["purple", "gray", "#51de63"]
},
facet: {
data: data,
x: "Sex"
},
marks: [
// Confidence bands with tooltip
Plot.areaY(data, {
x: "Age",
y1: "conf.low",
y2: "conf.high",
fill: "Income3",
fillOpacity: 0.3,
title: d => `Income: ${d.Income3}\nEstimate: ${(d.estimate * 100).toFixed(2)}%\nAge: ${d.Age}`
}),
// Smooth lines with tooltip
Plot.line(data, {
x: "Age",
y: "estimate",
stroke: "Income3",
title: d => `Income: ${d.Income3}\nEstimate: ${(d.estimate * 100).toFixed(2)}%\nAge: ${d.Age}`
})
]
});
happy_sex_income.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
happy_sexorient_income_age
Type Table, then Shift-Enter. Ctrl-space for more options.
ageGroupOrder = ["[18,24]", "(24,35]", "(35,45]", "(45,55]", "(55,65]", "(65,75]", "(75,85]"];
Plot.plot({
y: {
grid: true,
label: "Estimate",
tickFormat: d => `${Math.round(d)}%` // Convert the value to percentage with 0 decimal points
},
x: {
grid: true,
label: "Age Group",
domain: ageGroupOrder // Ensure age groups are in the correct order
},
color: {
type: "ordinal",
legend: true,
domain: ["LGBT", "Not LGBT"],
range: ["#FF5733", "#33FF57"] // Adjust these colors as needed
},
facet: {
data: data2,
x: "Income3"
},
marks: [
// Confidence intervals
Plot.ruleY(data2, {
x: "Age_group",
y1: "conf.low",
y2: "conf.high",
stroke: "Sexorient",
strokeWidth: 1.5
}),
// Connecting lines
Plot.line(data2, {
x: "Age_group",
y: "estimate",
stroke: "Sexorient",
strokeWidth: 1.5
}),
// Dots for estimates
Plot.dot(data2, {
x: "Age_group",
y: "estimate",
fill: "Sexorient",
r: 4 // Adjust the dot size as needed
})
]
});
Plot.plot( { height: 500, // Adjust as needed
color: {
type: "ordinal",
legend: true,
range: ["purple", "gray", "#51de63"]
},
x: {
line: true,
domain: gallup_us_use1_meta["Age_group"].Levels
},
marks: [
Plot.frame({ strokeOpacity: 0.1 }),
Plot.line(
happy_sex_income,
{
fx: "Sex",
x: "Age_group",
y: "estimate",
stroke: "Income3",
tip: true
}
),
// Error bars using Plot.link
Plot.link(
happy_sex_income,
{
fx: "Sex",
x: "Age_group",
y1: "conf.low",
y2: "conf.high",
stroke: "Income3",
strokeOpacity: 0.5,
strokeWidth: 3,
tip: true
}
)
]
})
gallup_us_use1_meta = FileAttachment("gallup_us_use1_meta.json").json()
happy_sexorient_income_age.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
happy_sexorient_income_age.sort((a, b) => {
return gallup_us_use1_meta["Age_group"].Levels.indexOf(a.Age_group) - gallup_us_use1_meta["Age_group"].Levels.indexOf(b.Age_group);
})
Plot.plot( { height: 500, // Adjust as needed
width: 900, // Adjust as needed
color: {
type: "ordinal",
legend: true,
range: ["purple", "gray", "#51de63"]
},
x: {
line: true,
domain: gallup_us_use1_meta["Age_group"].Levels
},
marks: [
Plot.frame({ strokeOpacity: 0.1 }),
Plot.line(
happy_sexorient_income_age,
{
fx: "Income3",
x: "Age_group",
y: "estimate",
stroke: "Sexorient",
tip: true
}
),
// Error bars using Plot.link
Plot.link(
happy_sexorient_income_age,
{
fx: "Income3",
x: "Age_group",
y1: "conf.low",
y2: "conf.high",
stroke: "Sexorient",
strokeOpacity: 0.5,
strokeWidth: 3,
tip: true
}
)
]
})
gallup_us_use1_meta["Age_group"].Levels
happy_sex_income
X
Age_group
Y
estimate
Color
—
Size
—
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
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.
