The avatar for @workbook
workbook
Learning ObservableJS.
Public
Edited
Feb 8
1
Insert cell
Insert cell
Insert cell
iris = FileAttachment("iris.csv").csv({typed: true})
Insert cell
iris
Insert cell
typeof(iris)
Insert cell
typeof(iris[0])
Insert cell
iris
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
iris.columns
Insert cell
Object.keys(iris[0])
Insert cell
Insert cell
viewof checkboxes = Inputs.checkbox(iris.columns, {label: "Select columns", value: iris.columns })
Insert cell
checkboxes
Insert cell
selectedData = iris.map(d => {
const returnObject = {};
checkboxes.forEach(e => returnObject[e] = d[e]);
return returnObject
})
Insert cell
viewof filters = Inputs.form(
checkboxes.map(d => {
if(d === 'species') {
return Inputs.select(uniqueWhile(selectedData,k => k[d]),{value: uniqueWhile(selectedData,k => k[d]), multiple: true, label: `${d}`})
} else {
return Inputs.range(d3.extent(selectedData, e => e[d]), {step: .1, label: `${d}`})
}
})
)
Insert cell
filters
Insert cell
filteredData = selectedData.filter(d => {
const filter = checkboxes.map((e, i) => {
if(d[e[i]] === 'species') {
return d[e] === filters[i]
} else {
return d[e] >= filters[i]
}
})
return filter.includes(false) ? false : true
})
Insert cell
Insert cell
iris_aq = aq.from(iris)
Insert cell
iris_aq
.select(checkboxes)
.filter(d => d.sepal_length > 6.1)
.view()
//.derive({weight_kg: d => d["weight (lb)"] *0.45})
//.rename({"economy (mpg)": "mpg"})
//.view()
Insert cell
iris_filtered = iris_aq.objects()
Insert cell
Plot.plot({
marks: [
Plot.dot(iris_filtered, {
x: "sepal_length",
y: "petal_length",
fill: "species",
title: (d) =>
`${d.species} \n Petal length: ${d.petal_length} \n Sepal length: ${d.sepal_length}`
})
]
})
Insert cell
Insert cell
uniqueWhile = (arr, fn) => {
let out = [],
i = -1,
n = arr.length;
while (++i < n){
const d = fn ? fn(arr[i], i, arr) : arr[i];
if (!out.includes(d)) out.push(d);
}
return out;
}
Insert cell
import {aq, op} from "@uwdata/arquero"
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more