Public
Edited
Mar 16, 2023
alphabet
olympians
Plot.plot({
marks: [
Plot.barX(olympians, Plot.groupY({x: "count"}, {y: "nationality", sort: {y: "x", reverse: true, limit: 10}})),
Plot.ruleX([0])
]
})
Plot.plot({
marks: [
// Plot.barX(olympians, {x: ()=> 1, y: "nationality", sort: {y: "x", reverse: true, limit: 10}}),
Plot.barX(olympians, Plot.groupY({x: 'count', title: 'count'}, {y: d => d.nationality, // or y: d => 'nationality' its the same
sort: {y: "x",
reverse: true, limit: 20
}})),
Plot.ruleX([0])
]
})
// binning and histograms
Plot.plot({
marks: [
Plot.dot(olympians, Plot.dodgeY({x: 'weight', fill: 'steelblue', r: 1}))],
x: {
lable: 'weight (kg)'
},
width,
height:1200
})
Plot.plot({
color: {
scheme: "ylgnbu"
},
marks: [
Plot.hexagon(olympians, Plot.hexbin({fill: "sum"}, {x: "weight", y: "height"}))
]
})
viewof numBins = Inputs.range([1, 100], {label: 'number of bins', step: 1})
Plot.plot({
marks: [
Plot.rectY(olympians, Plot.binX({y: 'count'}, {x:'weight', fill: 'steelblue', thresholds: numBins})),
Plot.ruleY([0])
]
})
// stacking, better for less categories
Plot.plot({
marks: [
Plot.barY(olympians, Plot.groupX({y: "count"}, {x: "nationality", fill: 'sex', title: 'sport', sort: {x: "y", reverse: true, limit: 10}})),
]
})
import {Plot} from '@mkfreeman/plot-tooltip'
DonutChart(islands, { name: d => d.name, value: d => d.value, innerRadius: 0})
// staking method, deadline for assignment, april 4th, 2-3 hours
// smoothing and window functions
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.
