Infographics & interactive media designer.
Public
Edited
Apr 26, 2022
beergraph = {
let bg = vl.markCircle()
.width(600)
.height(600)
.encode(
vl.x().fieldQ("ibu"), //.bin({bins: 30}),
vl.y().fieldQ("abv"), //.bin({bins: 30}),
vl.color().value("black"),
vl.size().count().legend(false),
vl.opacity().value(.1)
)
.data(beers)
let sel = vl.markCircle()
.width(600)
.height(600)
.encode(
vl.x().fieldQ("ibu"), //.bin({bins: 30}),
vl.y().fieldQ("abv"), //.bin({bins: 30}),
vl.color().value("black"),
vl.size().count(),
vl.opacity().value(1),
vl.tooltip().count()
)
.data(beersWithFilter)
;
return vl.layer( bg , sel).render()
}
styles = {
let s = beers.map( e=>e.style );
let uniq = Array.from( new Set(s) );
return ["all"].concat(uniq);
}
table(chinaVSusa)
beersWithFilter = {
if(selected=="all"){
return beers;
}
return beers.filter( e=>e.style==selected )
}
table(beers)
import { table } from '@tmcw/tables/2'
chinaVSusa = {
return FileAttachment("china_vs_usa_co2_2.csv").csv()
}
import {beers} from "@glebtr/usa-craft-beers"
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.
