Public
Edited
Mar 11, 2024
16 forks
viewof amount = Inputs.range([0, 100], {label: "Amount", step: 1})
We can get a variable's value in a Markdown cell, like: The amount is ${amount}.
<p>The amount is ???.</p>
<svg width=100 height=100 style="border: 1px solid #000;">
</svg>
data1 = cars
data1
Type Table, then Shift-Enter. Ctrl-space for more options.
// TODO: Attach WorldJustice2019.xlsx
...
data = olympians
data
X
date_of_birth
Y
—
Color
#ffc850
Size
—
Facet X
sex
Facet Y
—
Mark
bar
Type Chart, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
marks: [
Plot.frame({ strokeOpacity: 0.1 }),
Plot.rectY(
data,
Plot.binX(
{ y: "count" },
{ fx: "sex", x: "date_of_birth", fill: "#ffc850", tip: true }
)
),
Plot.ruleY([0])
]
})
data2 = penguins
data2
Type Table, then Shift-Enter. Ctrl-space for more options.
// TODO: create a one-dimensional dot plot.
...
//TODO create a scatterplot
...
// Solution
Plot.dot(penguins, {x: "flipper_length_mm", y: "body_mass_g"}).plot()
// Use a color to identify species.
// Also add a legend to know which species each color represents!
// Let's also add a small configuration to the plot to show grid lines.
Plot.dot(penguins, {
x: "flipper_length_mm",
y: "body_mass_g",
... // TODO: Use color to show species
})
.plot({
// TODO: Add grid
...
// TODO: Add color lengend
...
})
// We can also start with Plot.plot
Plot.plot({
// TODO: Define the overall configuration for the plot, including visual aids and styling options
// TODO: Specify the data representation within the plot inside marks: [...]
})
Plot.plot({
grid: true,
color: {
legend: true,
},
marks: [
Plot.dot(penguins, {
x: "flipper_length_mm",
y: "body_mass_g",
fill: "species"
}),
// TODO: Add a voronoi mark
...
]
})
// Based on previous chart, we dd a facet on sex
Plot.plot({
// TODO: set facet
...
grid: true,
color: {
legend: true,
},
marks: [
..., // TODO: Adds a frame around the plot for clarity and visual containment of the plot elements.
Plot.dot(penguins, {x: "flipper_length_mm", y: "body_mass_g", fill: "species"})
]
})
// TODO: Create a bar chart with Plot.barY
// Facet our data on "island" to draw a bar chart for each of the islands
Plot.barY(
penguins,
Plot.groupX(
{y: "count"},
{x: "species", fill: "species"}
)
)
.plot({
// TODO: Configure faceting to separate the data into subplots based on the island attribute
// TODO: Optional - Add frames to each facet for clarity
marks: [
..., // Draws a frame around each facet
]
})
// Another technique would be to create circles with x="species" and y="island", and a radius that corresponds to the number of individuals
Plot.dot(
penguins,
Plot.group(
//TODO: create the circles
...
)
).plot({
// TODO: Adjust the radius scale so dots are sized between 0 and 50 pixels for visibility
...
})
// Create a histogram of body_mass_g
// Play with the thresholds option to create more rects.
// You can use x and y facets on the previous chart to show how this distribution varies.
// Try with x: "sex", then y: "species"
Plot.rectY(
penguins,
Plot.binX(
{y: "count"},
{
x: "body_mass_g",
fill: "species",
thresholds: 20
}
)
).plot({
//TODO: set facets
...
})
// An alternative approach is to only facet on x, and then stack the results by species.
Plot.rectY(
penguins,
// TODO: Use Plot.stackY to create a vertical rectangular plot with stacks
...
).plot({
// TODO: Create separate plots (facets) for each sex
...
color: {
legend: true
},
marks: [
Plot.frame(),
]
})
// Use the dodge transformation
Plot.plot({
// TODO: Configure the y-axis to display grid lines for better readability
...
color: {
legend: true
},
marks: [
// TODO: Create dot marks with custom positioning and coloring
// Use the dodgeX strategy to position dots to minimize overlap, based on the "middle" of their x-values
...
]
})
// Use the Plot.groupZ transform with a ‘median’ reducer on x.
// Plot.tickX can create a full-height tick at the computed value.
Plot.plot({
facet: {
data: penguins,
x: "sex",
y: "species",
marginRight: 80
},
color: {
legend: true
},
marks: [
Plot.frame(),
Plot.rectY(penguins, Plot.binX(
{y: "count"},
{
x: "body_mass_g",
thresholds: 20,
fill: "species"
})),
// TODO: Overlay median body mass ticks for each group with Plot.tickX
...
]
})
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.
