The avatar for @deepalikank
Deepali Kank
Data Analyst with a passion for Data visualization and storytelling
Public
Edited
Mar 9
Fork of World Happiness Report 2024
1
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
// Plot labels
title: "World Happiness Report Explained by 6 Factors",
subtitle: "Select Factors to see the relation per country",

// Adjust x and y axis
x: { label: filters.selectX, tickSize: 0 },
y: { label: filters.selectY, tickSize: 0 },
width: 1000,
height: 600,

// Marks similar to ggplot geoms
marks: [
Plot.ruleY([0]),
Plot.ruleX([0]),
Plot.dot(happiness, {
// Bind x and y to select input dropdown
x: filters.selectX,
y: filters.selectY,

// Text that appears on hover
title: (d) =>
`${d.country_name}\n ${d[filters.selectX]} \n ${d[filters.selectY]}`,

// Conditional fill: highlight India
fill: (d) => (d.country_name === "India" ? "#f18f01" : "#5e548e"),

// Stroke style
stroke: (d) => (d.country_name === "India" ? "black" : "white"),
strokeWidth: (d) => (d.country_name === "India" ? 2 : 1),

opacity: 0.9,
r: 8 // Same size for all dots
})
]
})
Insert cell
happiness
X
social_support
Y
healthy_life_expectancy
Color
#ff5375
Size
—
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
Plot.plot({
marks: [
Plot.dot(happiness, {
x: "social_support",
y: "healthy_life_expectancy",
fill: "#ff5375",
tip: true,
r: 6,
stroke: "white"
})
]
})
Insert cell
features = [
"ladder_score",
"log_gdp_per_capita",
"social_support",
"healthy_life_expectancy",
"freedom_to_make_life_choices",
"generosity",
"perceptions_of_corruption"
]
Insert cell
import { Plot } from "@mkfreeman/plot-tooltip"
Insert cell
happiness.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
happiness
SELECT country_name, ladder_score FROM "happiness"
Insert cell
happiness
SELECT country_name, 'log_gdp_per_capita' AS Feature, Log_GDP_per_capita AS Value
FROM happiness
UNION ALL
SELECT country_name, 'social_support', Social_support
FROM happiness
UNION ALL
SELECT country_name, 'healthy_life_expectancy', Healthy_life_expectancy
FROM happiness
UNION ALL
SELECT country_name, 'freedom_to_make_life_choices', Freedom_to_make_life_choices
FROM happiness
UNION ALL
SELECT country_name, 'generosity', Generosity
FROM happiness
UNION ALL
SELECT country_name, 'perceptions_of_corruption', Perceptions_of_corruption
FROM happiness;

Insert cell
Plot.plot({
marks: [
Plot.barY(alphabet, {x: "letter", y: "frequency", sort: {x: "y", reverse: true}}),
Plot.ruleY([0])
]
})
Insert cell
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