Published
Edited
Apr 3, 2019
1 fork
6 stars
viewof weather = embed({
data: {values: data},
mark: "bar",
encoding: {
x: {field: "weather", type: "nominal"},
y: {aggregate: "count", field: "*", type: "quantitative"}
}
})
viewof weatherSelect = embed({
data: {values: data},
mark: "bar",
selection: {
barSelection: {fields: ["weather"], on: "click", type: "multi"}
},
encoding: {
x: {field: "weather", type: "nominal"},
y: {aggregate: "count", field: "*", type: "quantitative"}
}
})
barSelection = Generators.observe(notify => {
const barSelection = (name, value) => notify(value);
weatherSelect.addSignalListener("barSelection", barSelection);
notify(weatherSelect.signal("barSelection"));
return () => weatherSelect.removeSignalListener("barSelection", barSelection);
})
viewof weatherLine = embed({
data: {values: data},
mark: "area",
transform: [
{filter: {field: "weather", oneOf: selection}}
],
encoding: {
x: {timeUnit: "month", field: "date", type: "temporal"},
y: {aggregate: "mean", field: "precipitation", type: "quantitative"},
color: {field: "weather", type: "nominal"}
}
})
selection = {
if(isEmpty(barSelection)){
return ["rain", "fog", "drizzle", "sun", "snow"]
} else {
return barSelection.weather
}
}
brushSelection = Generators.observe(notify => {
const brushSelection = (name, value) => notify(value);
chart.addSignalListener("plotbrush", brushSelection);
notify(chart.signal("plotbrush"));
return () => chart.removeSignalListener("plotbrush", brushSelection);
})
Dmain = {
if(isEmpty(value)){
return ["Sun Jan 01 2012 00:00:00 GMT-0800 (Pacific Standard Time)", "Thu Dec 31 2015 00:00:00 GMT-0800 (Pacific Standard Time)"]
} else {
return value[0].values[0].map(d => ''+d)
}
}
value = Generators.observe(notify => {
const signaled = (name, value) => notify(chart.data("plotbrush_store"));
chart.addSignalListener("plotbrush", signaled);
notify(chart.signal("plotbrush"));
return notify(chart.data("plotbrush_store"));
})
vega_explicit = {
const [Vega, VegaLite] = await Promise.all([
require("vega@3/build/vega.min.js"),
require("vega-lite@3/build/vega-lite.min.js")
]);
return async spec => {
const div = document.createElement("div");
const view = new Vega.View(Vega.parse(VegaLite.compile(spec).spec));
await view.initialize(div).runAsync();
return div;
};
}
vega_explicit({
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"name": "trellis_barley",
"description": "The Trellis display by Becker et al. helped establish small multiples as a “powerful mechanism for understanding interactions in studies of how a response depends on explanatory variables”. Here we reproduce a trellis of Barley yields from the 1930s, complete with main-effects ordering to facilitate comparison.",
"data": {"url": "https://vega.github.io/vega-lite/data/barley.json"},
"mark": "point",
"encoding": {
"facet": {
"field": "site",
"type": "ordinal",
"sort": {"op": "median", "field": "yield"}
},
"x": {
"aggregate": "median",
"field": "yield",
"type": "quantitative",
"scale": {"zero": false}
},
"y": {
"field": "variety",
"type": "ordinal",
"sort": {"encoding": "x", "order": "descending"},
"scale": {"rangeStep": 12}
},
"color": {"field": "year", "type": "nominal"}
},
"resolve": {"axis": {"x": "independent", "y": "independent"}},
"config": {
"facet":{
"columns": 2
}
}
})
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.
