Published
Edited
Jun 5, 2019
1 star
Insert cell
Insert cell
vl_spec = ({
"config": {"view": {"width": 400, "height": 300}},
"layer": [
{
"data": {
"name": "errordata",
"url": "https://dmws.hkvservices.nl/dataportal/data.asmx/read?database=Ethiopia&key=errorband_stations",
"format": {
"type": "csv",
"parse": {
"high_val": "number",
"low_val": "number",
"value_mean": "number"
}
}
},
"transform": [{"filter": {"field": "locationId", "oneOf": ["DAM_Koka"]}}],
"mark": {"type": "area", "opacity": 0.4},
"encoding": {
"color": {
"type": "nominal",
"field": "leg1",
"legend": {"title": "Legend"}
},
"x": {"type": "temporal", "field": "date"},
"y": {
"type": "quantitative",
"field": "low_val",
"title": "Discharge(m3/s)"
},
"y2": {"field": "high_val"}
}
},
{
"data": {"name": "errordata"},
"transform": [{"filter": {"field": "locationId", "oneOf": ["DAM_Koka"]}}],
"mark": {"type": "line", "opacity": 0.8},
"encoding": {
"color": {"type": "nominal", "field": "leg2"},
"x": {"type": "temporal", "field": "date", "title": "Date"},
"y": {"type": "quantitative", "field": "value_mean"}
},
"height": 300,
"width": 450
},
{
"data": {
"name": "current_year",
"url": "https://dmws.hkvservices.nl/mangrove.ws/entry.asmx/Call?function=mangrove.fews.GetTimeSeries&parameters={host:%27172.17.40.9%27,port:8080,region:%27FewsWebServices%27,version:%271.24%27,onlyHeaders:%27false%27,start:%272018-09-01T00:00:00.000Z%27,end:%272019-09-01T00:00:00.000Z%27,filterid:%27f_gaugingstations%27,locations:[%27DAM_Koka%27],parameters:[%27Q.STAT%27]}",
"format": {"type": "json", "property": "series"}
},
"transform": [
{"flatten": ["events"]},
{"calculate": "'current year'", "as": "leg3"}
],
"mark": {"type": "line", "color": "darkblue", "opacity": 0.8},
"encoding": {
"color": {"type": "nominal", "field": "leg3"},
"tooltip": [
{
"type": "nominal",
"field": "header.locationid",
"format": "",
"title": "Location"
},
{
"type": "quantitative",
"field": "events.value",
"format": ".2f",
"title": "discharge [m3/s]"
}
],
"x": {"type": "temporal", "field": "events.timestamp"},
"y": {"type": "quantitative", "field": "events.value"}
},
"height": 300,
"width": 450
},
{
"data": {"name": "now_date", "values": [{"dummy": 0}]},
"transform": [{"calculate": "now()", "as": "date_now"}],
"mark": {"type": "rule", "color": "green", "strokeWidth": 2},
"encoding": {"x": {"type": "temporal", "field": "date_now"}}
}
],
"$schema": "https://vega.github.io/schema/vega-lite/v3.2.1.json"
})
Insert cell
Insert cell
Insert cell
vg_spec_hacked = {
// make a copy of the vega-lite spec
var temp = JSON.parse(JSON.stringify(vl_spec));
// graft the signal on to the specification for the bin-step {step: {signal: "bin_width"}}
temp.layer[0].transform[0].filter = ({field: "locationId", oneOf: [{signal: "station"}]});
temp.layer[1].transform[0].filter = ({field: "locationId", oneOf: [{signal: "station"}]});
//temp.layer[1].transform[0].filter.oneOf = ([{signal: "station"}]);
// compile into vega
var result = embed.vl.compile(temp).spec;
// declare the signal and provide a default value
result['signals'] = [{
"name": "station",
"value": "DAM_Koka"
}]
// return the vega spec
return result;
}
Insert cell
Insert cell
Insert cell
Insert cell
// hook up the signal to the value of the input
view_hacked.signal('station', station).run()
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more