Published
Edited
Jun 5, 2019
1 star
vl_filter_oneOf = ({
"$schema": "https://vega.github.io/schema/vega-lite/v3.3.0.json",
"description": "A scatterplot showing horsepower and miles per gallons for various cars.",
"data": {"url": "https://raw.githubusercontent.com/vega/vega-datasets/master/data/cars.json"},
"mark": "point",
"transform":[{"filter": {"field": "Origin", "oneOf": ["Japan"]}}],
"encoding": {
"x": {"field": "Horsepower","type": "quantitative"},
"y": {"field": "Miles_per_Gallon","type": "quantitative"}
}
})
viewof view_static_filter = embed(vl_filter_oneOf)
vl2vega_filter_oneOf_signal = {
var temp = JSON.parse(JSON.stringify(vl_filter_oneOf))
// add signal in vega-lite
temp.transform[0].filter = ({field: "Origin", oneOf: [{signal: "signal_origin"}]});
// compile to vega
var result = embed.vl.compile(temp).spec;
// declare the signal and provide a default value
result['signals'] = [{
"name": "signal_origin",
"value": "Japan"
}]
return result
}
viewof view_dynamic_filter = embed(vl2vega_filter_oneOf_signal)
viewof bind_origin = select({
title: "Origin Input",
options: ["USA", "Europe", "Japan"],
value: "Japan"
})
// update the view when the rotation changes
view_dynamic_filter.signal('signal_origin', bind_origin).run()
vl_init_signal = ({
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"data": {
"values": [
{"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},
{"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},
{"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52}
]
},
"selection": {
// signal patch (eg. "E")
"select": {"empty": "none", "type": "single", "init":{"a":{"signal": "signal_init_value"}}}
},
"mark": {
"type": "bar",
"color": "#4C78A8"
},
"encoding": {
"x": {"field": "a", "type": "ordinal"},
"y": {"field": "b", "type": "quantitative"},
"fillOpacity": {
"condition": {"selection": "select", "value": 1},
"value": 0.3
}
},
"config": {
"scale": {
"bandPaddingInner": 0.1
}
}
})
viewof view_dynamic_init = embed(vl_init_signal, {patch: {signals: [{
"name": "signal_init_value",
"value": "E"
}]}})
viewof bind_init_value = select({
title: "Init Input",
options: ["E", "F", "A"],
value: "E"
})
// update the view when the rotation changes
view_dynamic_init.signal('signal_init_value', bind_init_value).run()
embed = require("vega-embed@3")
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.
