The end-to-end solution for building and hosting better data apps, dashboards, and reports.
athletes = FileAttachment("athletes.csv").csv({typed: true})
Plot.plot({
y: {
grid: true
},
marks: [
Plot.rectY(athletes, Plot.binX({y: "count"}, {x: "weight"})),
Plot.ruleY([0])
]
})
Plot.plot({
x: {
round: true
},
y: {
grid: true
},
marks: [
Plot.rectY(athletes, Plot.binX({y: "count"}, {x: "weight", inset: 0})),
Plot.ruleY([0])
]
})
Plot.plot({
y: {
grid: true
},
marks: [
Plot.areaY(athletes, Plot.binX({y: "count", filter: null}, {x: "weight", fill: "#ccc"})),
Plot.lineY(athletes, Plot.binX({y: "count", filter: null}, {x: "weight"})),
Plot.ruleY([0])
]
})
Plot.plot({
y: {
grid: true
},
marks: [
Plot.rectY(athletes, Plot.binX({y: "count"}, {x: "weight", thresholds: "sturges"})),
Plot.ruleY([0])
]
})
Plot.plot({
y: {
grid: true
},
marks: [
Plot.rectY(athletes, Plot.binX({y: "count"}, {x: "weight", cumulative: true})),
Plot.ruleY([0])
]
})
Plot.plot({
y: {
grid: true
},
color: {
legend: true
},
marks: [
Plot.rectY(athletes, Plot.binX({y: "count"}, {x: "weight", fill: "sex"})),
Plot.ruleY([0])
]
})
Plot.plot({
y: {
grid: true
},
color: {
legend: true
},
marks: [
Plot.rectY(athletes, Plot.stackY(Plot.binX({y: "count"}, {x: "weight", fill: "sex"}))),
Plot.ruleY([0])
]
})
Plot.plot({
y: {
grid: true
},
marks: [
Plot.rectY(athletes, Plot.binX({y2: "count"}, {x: "weight", fill: "sex", mixBlendMode: "multiply"})),
Plot.ruleY([0])
]
})
Plot.plot({
x: {
round: true
},
color: {
scheme: "YlGnBu"
},
marks: [
Plot.barX(athletes, Plot.binX({fill: "count"}, {x: "weight"}))
]
})
Plot.plot({
grid: true,
round: true,
color: {
scheme: "YlGnBu"
},
marks: [
Plot.rect(athletes, Plot.bin({fill: "count"}, {x: "weight", y: "height", inset: 0}))
]
})
Plot.plot({
grid: true,
round: true,
marks: [
Plot.rect(athletes, Plot.bin({fillOpacity: "count"}, {x: "weight", y: "height", fill: "sex", inset: 0}))
]
})
Plot.plot({
grid: true,
round: true,
r: {
range: [0, 10]
},
color: {
scheme: "YlGnBu"
},
marks: [
Plot.dot(athletes, Plot.bin({r: "count"}, {x: "weight", y: "height"}))
]
})
Plot.plot({
grid: true,
round: true,
r: {
range: [0, 10]
},
marks: [
Plot.dot(athletes, Plot.bin({r: "count"}, {x: "weight", y: "height", stroke: "sex"}))
]
})
Plot.plot({
r: {
range: [0, 14]
},
marks: [
Plot.dot(athletes, Plot.binX({r: "count"}, {x: "weight"}))
]
})
Plot.plot({
marginLeft: 100,
padding: 0,
x: {
round: true,
grid: true
},
fy: {
label: null,
domain: d3.groupSort(athletes, g => d3.median(g, d => d.weight), d => d.sport)
},
color: {
scheme: "YlGnBu"
},
facet: {
data: athletes,
marginLeft: 100,
y: "sport"
},
marks: [
Plot.barX(athletes, Plot.binX({fill: "proportion-facet"}, {x: "weight", inset: 0.5}))
]
})
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.
