penguins
data = penguins
data
Type Table, then Shift-Enter. Ctrl-space for more options.
x = Plot.plot({
color: {
legend: true,
},
style: {
//background: "black",
//color: "white"
},
x: {
//range: [0]
},
//width: width,
//height: 500,
caption: "bill shape of penguins",
marks: [
Plot.dot(penguins, {x:"culmen_depth_mm", y: "culmen_length_mm", fill: "sex"})
],
})
Plot.auto(penguins, {x:"culmen_depth_mm", y: "culmen_length_mm"}).plot()
Plot.auto(penguins, {x:"species", y: "culmen_length_mm"}).plot()
Plot.plot({
color: {
legend: true,
},
r: {
range: [0, 20]
},
marks: [
Plot.dot(penguins, {
x: "culmen_depth_mm",
y: "culmen_length_mm",
r: "body_mass_g",
fill: "island",
opacity: .4
})
]
})
viewof interestId = Inputs.range([0, penguins.length], {step: 1})
Plot.plot({
marks: [
Plot.dot(penguins, {
x:"culmen_depth_mm",
y: "culmen_length_mm",
fill: "sex",
opacity: .8
}),
Plot.circle(
penguins.filter((p, i) => i === interestId),
{
x: "culmen_depth_mm",
y: "culmen_length_mm",
r: 20,
stroke: "red",
z: 0
}
)
]
})
Plot.plot({
marks: [
Plot.dot(penguins, {x:"culmen_depth_mm", y: "body_mass_g", fill: "sex"}),
Plot.ruleY([5750]),
Plot.textY([5750], {text: d => "chonky penguins", lineAnchor: "bottom"}),
Plot.ruleX([d3.median(penguins, d => d.culmen_depth_mm)]),
]
})
import {addTooltips} from "@mkfreeman/plot-tooltip"
addTooltips(
Plot.plot({
color: {
legend: true,
},
marks: [
Plot.dot(penguins, {
x:"culmen_depth_mm",
y: "culmen_length_mm",
fill: "island",
title: (d) =>
`${d.sex} \n bill depth: ${d.culmen_depth_mm} \n bill length: ${d.culmen_length_mm}`
})
]
})
)
Plot.plot({
color: {
legend: true
},
facet: {
x: "species",
y: "island",
data: penguins,
},
marks: [
Plot.rectY(
penguins,
Plot.binX(
{ y: "count" },
{ x: "body_mass_g", fill: "sex", thresholds: 20 }
)
),
Plot.ruleX([5500])
]
})
Plot with Weather
weather2012 = weather.filter(d => d.date.getFullYear() === 2012)
import {san_diego_stops} from "@eads/first-observable-notebook-imports"
Plot.plot({
marks: [
Plot.dot(san_diego_stops, {x: "perceived_age"})
]
})
Plot.plot({
marks: [
Plot.auto(san_diego_stops, {x: "perceived_age"})
]
})
stops_by_age_count = san_diego_stops_aq.groupby('perceived_age').rollup({
count: aq.op.count(),
}).objects()
Plot.plot({
width,
marks: [
Plot.barY(stops_by_age_count, {"x": "perceived_age", y: "count"}),
Plot.text(stops_by_age_count, {"x": "perceived_age", y: "count", text: "perceived_age", dy: -5}),
]
})
Plot.plot({
marks: [
Plot.rectY(san_diego_stops, Plot.binX({y: "count"}, {x: "perceived_age"}))
]
})
Plot.plot({
marks: [
Plot.rectY(san_diego_stops, Plot.binX({y: "count"}, {x: "perceived_age"})),
Plot.text(san_diego_stops, Plot.binX({y: "count"}, {x: "perceived_age", fill: 'black', lineAnchor: 'bottom' }))
]
})
san_diego_stops_aq = aq.from(san_diego_stops)
san_diego_stops_aq.groupby("reason_for_stop_detail").count().view()
op.parse_date('2022-04-01')
import { aq, op } from "@uwdata/arquero"
Plot.plot({
marks: [
Plot.line(san_diego_stops,{x: "date_stop", y: ""})
]
})
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.
