You can go to the blockbuilder and to fork this block and create your own visualizations. Check out the Vega-Lite website for more information, tutorials, and documentation. Happy hacking!
forked from domoritz's block: Vega-Lite Bl.ocks example
license: bsd-3-clause |
You can go to the blockbuilder and to fork this block and create your own visualizations. Check out the Vega-Lite website for more information, tutorials, and documentation. Happy hacking!
forked from domoritz's block: Vega-Lite Bl.ocks example
{ | |
"$schema": "https://vega.github.io/schema/vega-lite/v2.json", | |
"data": { | |
"url": "https://gist.githubusercontent.com/john-guerra/6aad3bb76af2c5cad8b683bb18367ae8/raw/1bf08c11786ae15ed9e5fb8760899b761cc25f28/ieeevisTweets.json" | |
}, | |
"transform": [ | |
{ | |
"aggregate": [{"op": "count", "as": "count"}], | |
"groupby": ["user.screen_name"] | |
}, | |
{ | |
"window": [{"op": "rank", "as": "rank"}], | |
"sort": [{"field": "count", "order": "descending"}] | |
}, | |
{"filter": "datum.rank <= 10"} | |
], | |
"mark": "bar", | |
"encoding": { | |
"x": {"field": "count", "type": "quantitative"}, | |
"y": {"field": "user.screen_name", "type": "nominal", | |
"sort":{"order": "descending", "op":"mean", "field":"count"} | |
} | |
} | |
} |
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://cdn.jsdelivr.net/npm/vega@3"></script> | |
<script src="https://cdn.jsdelivr.net/npm/vega-lite@2"></script> | |
<script src="https://cdn.jsdelivr.net/npm/vega-embed@3"></script> | |
</head> | |
<body> | |
<div id="vis"></div> | |
<script> | |
const spec = "bar.vl.json"; | |
vegaEmbed('#vis', spec, {defaultStyle: true, renderer:"svg"}).catch(console.warn); | |
</script> | |
</body> |