vegalite({
data: {values: cars},
"width": 700,
"height": 300,
"mark": "bar",
"config": {
"axis": {
"titleFontSize": 16
},
"legend": {
}
},
// adds new column to define order - maybe there is a better way?. Change order here to change order of bars
// some other sorting options, if you want to sort by metric (count, median, etc): // https://vega.github.io/vega-lite/docs/sort.html
"transform": [{
"calculate": "if(datum.Origin === 'Japan', 0, if(datum.Origin === 'USA', 1, 2))",
"as": "OriginOrder"
}],
"encoding": {
"x": {
"bin": {"maxbins":20},
"field": "Miles_per_Gallon",
"axis": {
"title": "MPG (binned)"
},
"type": "quantitative",
},
"y": {
"aggregate": "count",
"type": "quantitative"
},
// order bars based on newly created OriginOrder field
"order": {
"field": "OriginOrder",
"type": "quantitative",
},
"color": {
"field": "Origin",
"type": "nominal",
"scale": {
"domain": ["USA","Japan","Europe"],
"range": ["#aaa", "steelblue", "#ccc"]
},
"legend": {"title": "Car Origin"}
}
}
})
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.
