Public
Edited
Mar 25, 2024
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
penguin = penguins
Insert cell
Plot.plot({
marks: [
Plot.dot(penguin, {x: "flipper_length_mm", y: "body_mass_g"})
]
})





Insert cell
Insert cell
Plot.plot({
marks: [
Plot.barY(penguin,
Plot.groupX(
{y: "count"},
{x: "species"}
)),
Plot.ruleY([0])
]
})
Insert cell
island = penguin.filter(function(d) {return d.island === "Biscoe"})
Insert cell
Plot.plot({
title: "Biscoe by sex",
color: {
scheme: "Dark2",
legend: true},
marks: [
Plot.barY(island,
Plot.groupX(
{y: "count"},
{x: "species",fill: "sex"}
)),
Plot.ruleY([0])
]
})
Insert cell
pizzaSales = pizza
Insert cell
pizzaSales
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Plot.plot({
marginLeft: 50,
width: 928,
y: {
grid: true,
label: "Sales revenue by pizza"
},
marks: [
Plot.areaY(pizzaSales, {x: "order_date", y: "revenue", fill: "category"}),
Plot.ruleY([0])
]
})
Insert cell
Plot.plot({
title: "Sales by revenue",
color: {
scheme: "Dark2",
legend: true},
marks: [
Plot.dot(pizzaSales, {
x: "order_date",
y: "revenue",
fill: "category",
})
]
})
Insert cell
Plot.plot({
title: "Monthly revenue by category",
color: {
scheme: "Dark2",
legend: true},
marks: [
Plot.ruleY([0]),
Plot.lineY(pizzaSales, {
x: "order_date",
y: "revenue",
interval: "month",
stroke: "category"}) //
]
})
Insert cell
Insert cell
Plot.plot({
title: "Sale of the pizza by day",
marks: [
Plot.barY(XL,
Plot.groupX( // group on the x axis
{y: "count"}, // the specific data reducer, that is, how our aggregate value is calculated. This is just like when we do Pivot tables in Excel and choose a value calculator.
{x: "day_of_week"} // the variable being grouped on the x axis.
)),
Plot.ruleY([0]) // line at y=0, ie, the bottom border of the graph.
]
})
Insert cell
Plot.plot({
title: "Monthly revenue by category",
marks: [
Plot.ruleY([0]),
Plot.lineY(XL, {
x: "day_of_week",
y: "revenue",
stroke: "name"}) //
]
})
Insert cell
Plot.plot({
title: "Meat Lover's Pizza Day",
marks: [
Plot.barY(XL,
Plot.groupX( // group on the x axis
{y: "count"}, // the specific data reducer, that is, how our aggregate value is calculated. This is just like when we do Pivot tables in Excel and choose a value calculator.
{x: "day_of_week"} // the variable being grouped on the x axis.
)),
Plot.ruleY([0]) // line at y=0, ie, the bottom border of the graph.
]
})
Insert cell
XL = pizzaSales.filter(function(d) {return d.name === "Meat Lover's Pizza Extra Large"})
Insert cell
Plot.plot({
title: "Mass histogram",
marks: [
Plot.rectY(XL, // this will work as a barY, but rectY will give us a default bar with smaller gaps and is generally recommended for numeric values.
Plot.binX( // group on the x axis
{y: "count"}, // the data reducer
{x: "day_of_week"} // the variable being grouped on the x axis.
)),
Plot.ruleY([0]) // line at y=0, ie, the bottom border of the graph.
]
})
Insert cell
Plot.plot({
title: "Mass histogram, with narrower bins",
marks: [
Plot.rectY(XL,
Plot.binX(
{y: "count"},
{x: { //since we are now passing multiple options to the x axis variable, it becomes an object rather than a single string.
thresholds: 7, //the number of bins to use
value: "orders" //the data channel to use.
}}
)),
Plot.ruleY([0])
]
})
Insert cell
Plot.plot({
marks: [
Plot.dot(XL, {x: "day_of_week", y: "orders"})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
//The visual shows edits made in wikipedia. Each edit is followed by the appearance of a circle, the text of the topic covered, and an associated audio note. The size of the circle, the color of the circle, the kind of sound, and the tone - all have meaning. There is a sound related to any changes made in Wikipedia. There are bells, string plucks, and string swell, and all indicate different actions. Additionally, the pitch can tell us the intensity of the edit made. Larger edits have a deeper tone. Edits (whether added or removed) are calculated in terms of bytes. The smaller the circle, the smaller the byte and vis-a-versa.
Insert cell
//It successfully communicates the frequency of edits made and whether they are from automated bots (purple circles) or unregistered contributors (green circles). It also successfully shares the size of the edit made, although the directionality is not legible simply by looking at the visual. Also, the corresponding text is confusing in the sense that the text represents the topic or the name of the contributor. The sound is confusing; I am unable to differentiate between a pluck and a swell, which have very different meanings. This makes it open for misinterpretation.
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