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
...
]
})
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
