Public
Edited
Nov 7, 2022
viewof table = Inputs.table(cars)
Inputs.table(cars, {rows:3})
Inputs.table(cars, {
columns:['name', 'cylinders', 'power (hp)', 'year']
})
Plot.plot({
marks: [
Plot.barY(cars, {x:'year', y:'cylinders'})
]
})
states = d3.csv("https://raw.githubusercontent.com/smach/SampleData/master/east_coast_states.csv")
Inputs.table(states)
// Region filter
viewof selected_region =
Inputs.select(states.map(d => d.Region), {sort: true, unique: true, label: "Select region:"})
// Percent change filter
viewof selected_change = Inputs.range([-12, 19], {label: "Minimum Pct Change", step: 0.5, placeholder: "5"})
// filtered data set based on values from above filters.
// Use === in JavaScript to test for strict equality
filtered_states = states.filter(function(d) {return d.Region === selected_region && d.PctChange_2020 >= selected_change})
Plot.plot({
marginLeft: 120,
marks: [
Plot.barX(states, {x:'PctChange_2020', y:'State', fill: 'Division',
sort: {y: 'x', reverse: true}})
],
color: { legend: true
}
})
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.
