https://twitter.com/maxmunnecke
Published
Edited
Dec 18, 2019
md`# Multi-line chart`
embed = require("vega-embed@6")
stats=[{"region":"O1","avg":"4.77","std":"1.62"},{"region":"Fz","avg":"4.67","std":"1.67"},{"region":"P4","avg":"4.67","std":"1.74"},{"region":"T6","avg":"4.58","std":"1.68"},{"region":"F4","avg":"4.66","std":"2.49"},{"region":"F8","avg":"3.94","std":"2.27"},{"region":"P3","avg":"4.76","std":"1.56"},{"region":"T5","avg":"4.54","std":"1.62"},{"region":"O2","avg":"4.59","std":"1.76"},{"region":"Cz","avg":"4.71","std":"1.67"},{"region":"C3","avg":"5.37","std":"2.40"},{"region":"T3","avg":"5.24","std":"2.42"},{"region":"Pz","avg":"4.85","std":"2.40"},{"region":"Fp2","avg":"2.20","std":"0.40"},{"region":"F3","avg":"5.11","std":"2.40"},{"region":"F7","avg":"5.47","std":"2.37"},{"region":"C4","avg":"5.52","std":"2.35"},{"region":"T4","avg":"4.50","std":"2.34"},{"region":"Fpz","avg":"4.60","std":"2.40"},{"region":"Fp1","avg":"2.00","std":"0.00"}]
viewof statschart = embed({
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Stock prices of 5 Tech Companies over Time.",
width: 400,
height:350,
data: {values: stats},
"mark": {
"type": "point",
"point": true
},
"encoding": {
"x": {"field": "avg", "type": "quantitative"},
"y": {"field": "std", "type": "quantitative"},
"color": {"field": "region", "type": "nominal","sort": {"encoding": "y", "order": "descending"}}
}
})
viewof stat2schart = embed({
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Google's stock price over time.",
"data": {values: slope},
"transform": [{"filter": "datum.n<300"}],
"mark": {
"type": "line",
"interpolate": "step-after"
},
"encoding": {
"x": {"field": "n", "type": "quantitative",
"scale": {"domain": [0, 300]},
"axis":{"title":"Circuit rank"}
},
"tooltip": [
{"field": "n", "type": "quantitative", "label":"hey"},
{"field": "v", "type": "quantitative"}
]
},
"layer": [{
"mark": {"type": "line", "color": "orange","interpolate":"step-after"},
"encoding": {
"y": {"field": "v", "type": "quantitative",
"axis":{"title":"Circuit value"}}
}
}, {
"mark": "rule",
"selection": {
"hover": {"type": "single", "on": "mouseover", "empty": "none"}
},
"encoding": {
"color": {
"condition":{
"selection": {"not": "hover"}, "value": "transparent"
}
}
}
}],
"config": {"axisY": {"minExtent": 30}}
})
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.
