Published
Edited
Dec 1, 2021
Insert cell
Insert cell
Insert cell
Insert cell
viewof min = Inputs.range([0, 20000], {value: 0, step: 500, label: "Min Points"})
Insert cell
userPlot = Plot.plot({
width: 1000,
x: {
label: "Language"
},
y: {
grid: true
},
marks: [
Plot.barY(languages, {rx: 4, x: "abbreviation", y: "points", fill: "#7ac70c"}),
Plot.text(languages, {x: "abbreviation", y: "points", text: d => d.points.toFixed(0), dy: -5}),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
languages = user.languages.map(l => ({
language: l.language_string,
abbreviation: l.language,
points: l.points,
level: l.level,
learning: l.learning,
"points to next level": l.to_next_level
})
)
.filter(l => l.points >= min)
Insert cell
Insert cell
Insert cell
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