Public
Edited
Dec 15
Insert cell
Insert cell
Insert cell
chart = Plot.plot({
color: {
legend: true,
type: "categorical",
domain: ["female", "male"],
range: ["purple", "green"]
},
marks: [
Plot.linearRegressionY(
olympians.filter((d) => d.sport == sport_selected),
{ x: "height", y: "weight", stroke: "red" }
),
Plot.dot(
olympians
.filter((d) => d.sport == sport_selected)
.filter((d) => d.gold + d.silver + d.bronze == 0),
{
x: "height",
y: "weight",
fill: "sex",
opacity: 0.5,
tip: true,
title: (d) =>
[
"name: " + d.name,
d.nationality,
"altura:" + d.height + " m.",
"peso: " + d.weight + " kg",
"sin medallas 😢"
].join("\n")
}
),
Plot.circle(
olympians
.filter((d) => d.sport == sport_selected)
.filter((d) => d.gold + d.silver + d.bronze > 0),
{
x: "height",
y: "weight",
fill: "sex",
r: 5,
opacity: 1,
tip: true,
title: (d) =>
[
"name: " + d.name,
d.nationality,
"altura:" + d.height + " m.",
"peso: " + d.weight + " kg",
"🥇".repeat(d.gold) + "🥈".repeat(d.silver) + "🥉".repeat(d.bronze)
].join("\n")
}
)
]
})
Insert cell
olympians[0]
Insert cell
// codigo que utilizamos durante la clase
s = {
let sports = new Set();
olympians.forEach((d) => {
sports.add(d.sport);
});
return sports;
}
Insert cell
// otra manera mas eficiente de armar el conjunto de deportes.
new Set(olympians.map((d) => d.sport))
Insert cell
Plot.plot({
marks: [
Plot.barX(
cars,
Plot.groupY(
{ x: "count" },
{ y: "cylinders", sort: { y: "x", reverse: true } }
)
),
Plot.ruleX([0])
]
})
Insert cell
Plot.plot({
width: 500,
height: 400,
color: {
legend: true,
type: "categorical",
domain: ["female", "male"],
range: ["pink", "steelblue"]
},
marks: [
Plot.dot(
olympians.filter((d) => d.sport == "weightlifting"),
{
x: "weight",
y: "height",
fill: "sex",
stroke: "grey",
strokeWidth: 0.5
}
)
]
})
Insert cell
Plot.plot({
grid: true,
x: { label: "Body mass (g)" },
y: { label: "Flipper length (mm)" },
symbol: { legend: true },
marks: [
Plot.dot(penguins, {
x: "body_mass_g",
y: "flipper_length_mm",
// stroke: "species",
symbol: "species"
})
]
})
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