Skip to content

Instantly share code, notes, and snippets.

@XavierGimenez
Last active January 14, 2019 15:22
Show Gist options
  • Save XavierGimenez/ee13b5f32f27d48fecc2e66a7513a3cf to your computer and use it in GitHub Desktop.
Save XavierGimenez/ee13b5f32f27d48fecc2e66a7513a3cf to your computer and use it in GitHub Desktop.
sorted stacked chart with vega.js

Sankey diagram with vega.js.

data transforms: stack + joinaggregate + collect

<html>
<head>
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vega@4"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@3"></script>
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<div id="vis" style="height: 500px;"></div>
</body>
<script type="text/javascript">
vegaEmbed('#vis', 'vega-spec.json', {defaultStyle: true});
</script>
</html>
{
"$schema": "https://vega.github.io/schema/vega/v4.json",
"width": 500,
"height": 200,
"padding": 5,
"title" : {
"text" : "Number of R&I outputs by domains",
"offset" : 30
},
"data": [
{
"name": "table",
"values": [
{
"y": "A",
"x": 28,
"c": "Projects"
},
{
"y": "A",
"x": 55,
"c": "Patents"
},
{
"y": "A",
"x": 55,
"c": "Publications"
},
{
"y": "B",
"x": 43,
"c": "Projects"
},
{
"y": "B",
"x": 91,
"c": "Patents"
},
{
"y": "B",
"x": 11,
"c": "Publications"
},
{
"y": "C",
"x": 81,
"c": "Projects"
},
{
"y": "C",
"x": 53,
"c": "Patents"
},
{
"y": "C",
"x": 100,
"c": "Publications"
},
{
"y": "D",
"x": 19,
"c": "Projects"
},
{
"y": "D",
"x": 87,
"c": "Patents"
},
{
"y": "D",
"x": 19,
"c": "Publications"
},
{
"y": "E",
"x": 52,
"c": "Projects"
},
{
"y": "E",
"x": 48,
"c": "Patents"
},
{
"y": "E",
"x": 38,
"c": "Publications"
},
{
"y": "F",
"x": 24,
"c": "Projects"
},
{
"y": "F",
"x": 49,
"c": "Patents"
},
{
"y": "F",
"x": 100,
"c": "Publications"
},
{
"y": "G",
"x": 87,
"c": "Projects"
},
{
"y": "G",
"x": 66,
"c": "Patents"
},
{
"y": "G",
"x": 20,
"c": "Publications"
},
{
"y": "H",
"x": 17,
"c": "Projects"
},
{
"y": "H",
"x": 27,
"c": "Patents"
},
{
"y": "H",
"x": 44,
"c": "Publications"
},
{
"y": "I",
"x": 68,
"c": "Projects"
},
{
"y": "I",
"x": 16,
"c": "Patents"
},
{
"y": "I",
"x": 71,
"c": "Publications"
},
{
"y": "J",
"x": 49,
"c": "Projects"
},
{
"y": "J",
"x": 15,
"c": "Patents"
},
{
"y": "J",
"x": 25,
"c": "Publications"
}
],
"transform": [
{
"type": "stack",
"groupby": [
"y"
],
"sort": {
"field": "c"
},
"field": "x",
"as": [
"x0",
"x1"
]
},
{
"type": "joinaggregate",
"groupby": [
"y"
],
"fields": [
"x"
],
"ops": [
"sum"
],
"as": [
"xsum"
]
},
{
"type": "collect",
"sort": {
"field": "xsum",
"order": "descending"
}
}
]
}
],
"scales": [
{
"name": "y",
"type": "band",
"range": "height",
"domain": {
"data": "table",
"field": "y"
}
},
{
"name": "x",
"type": "linear",
"range": "width",
"nice": true,
"zero": true,
"domain": {
"data": "table",
"field": "x1"
}
},
{
"name": "color",
"type": "ordinal",
"range": {
"scheme" : "tableau10"
},
"domain": {
"data": "table",
"field": "c"
}
}
],
"axes": [
{
"orient": "bottom",
"scale": "x",
"zindex": 1
},
{
"orient": "left",
"scale": "y",
"zindex": 1
}
],
"legends": [
{
"fill": "color",
"title": "R&I outputs",
"orient": "bottom-right"
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "table"
},
"encode": {
"enter": {
"y": {
"scale": "y",
"field": "y"
},
"height": {
"scale": "y",
"band": 1,
"offset": -1
},
"x": {
"scale": "x",
"field": "x0"
},
"x2": {
"scale": "x",
"field": "x1"
},
"fill": {
"scale": "color",
"field": "c"
}
},
"update": {
"fillOpacity": {
"value": 1
}
},
"hover": {
"fillOpacity": {
"value": 0.5
}
}
}
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment