Playing with the Layout engine.
From the docs, understanding how to add titles per row and column is not straigforward. So better to start with a vega-lite example and check its vega full specification for a better understanding.
Last active
April 24, 2018 15:53
-
-
Save XavierGimenez/00e97370ec2b332fc14d06f217a4c907 to your computer and use it in GitHub Desktop.
vega.js playground
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title></title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.0-rc4/vega.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.0-beta.10/vega-lite.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-beta.19/vega-embed.js"></script> | |
| <style> | |
| body { | |
| font-family: sans-serif; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="vis" style="height: 500px;"></div> | |
| </body> | |
| <script type="text/javascript"> | |
| vega.embed( | |
| '#vis', | |
| "vega-spec.json", | |
| { | |
| 'renderer': 'svg', | |
| 'height:': 500, | |
| 'actions': false | |
| }); | |
| </script> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "$schema": "https://vega.github.io/schema/vega/v3.json", | |
| "padding": 5, | |
| "signals": [ | |
| {"name": "size", "value": 50}, | |
| {"name": "offset", "update": "15"}, | |
| {"name": "chartStep", "update": "size + offset"}, | |
| {"name": "cellHeight", "update": "size"}, | |
| {"name": "cellWidth", "update": "size*2"}, | |
| {"name": "width", "update": "chartStep * 4"}, | |
| {"name": "height", "update": "chartStep * 4"} | |
| ], | |
| "data": [ | |
| { | |
| "name": "mydata", | |
| "values": [ | |
| { | |
| "sector": "Industria Alimentaria", | |
| "collaborationType": "Empresa - Empresa", | |
| "percentage": 40 | |
| }, | |
| { | |
| "sector": "Industria Alimentaria", | |
| "collaborationType": "Empresa - Agent del sistema RDI", | |
| "percentage": 40 | |
| }, | |
| { | |
| "sector": "Industria Alimentaria", | |
| "collaborationType": "Agent del sistema RDI - Agent del sistema RDI", | |
| "percentage": 20 | |
| }, | |
| { | |
| "sector": "Indústria de la química, energia i recursos", | |
| "collaborationType": "Empresa - Empresa", | |
| "percentage": 25 | |
| }, | |
| { | |
| "sector": "Indústria de la química, energia i recursos", | |
| "collaborationType": "Empresa - Agent del sistema RDI", | |
| "percentage": 40 | |
| }, | |
| { | |
| "sector": "Indústria de la química, energia i recursos", | |
| "collaborationType": "Agent del sistema RDI - Agent del sistema RDI", | |
| "percentage": 35 | |
| }, | |
| { | |
| "sector": "Indústria de la mobilitat sostenible", | |
| "collaborationType": "Empresa - Empresa", | |
| "percentage": 10 | |
| }, | |
| { | |
| "sector": "Indústria de la mobilitat sostenible", | |
| "collaborationType": "Empresa - Agent del sistema RDI", | |
| "percentage": 30 | |
| }, | |
| { | |
| "sector": "Indústria de la mobilitat sostenible", | |
| "collaborationType": "Agent del sistema RDI - Agent del sistema RDI", | |
| "percentage": 60 | |
| }, | |
| { | |
| "sector": "Indústria del disseny", | |
| "collaborationType": "Empresa - Empresa", | |
| "percentage": 10 | |
| }, | |
| { | |
| "sector": "Indústria del disseny", | |
| "collaborationType": "Empresa - Agent del sistema RDI", | |
| "percentage": 30 | |
| }, | |
| { | |
| "sector": "Indústria del disseny", | |
| "collaborationType": "Agent del sistema RDI - Agent del sistema RDI", | |
| "percentage": 60 | |
| }, | |
| { | |
| "sector": "Indústries culturals", | |
| "collaborationType": "Empresa - Empresa", | |
| "percentage": 70 | |
| }, | |
| { | |
| "sector": "Indústries culturals", | |
| "collaborationType": "Empresa - Agent del sistema RDI", | |
| "percentage": 15 | |
| }, | |
| { | |
| "sector": "Indústries culturals", | |
| "collaborationType": "Agent del sistema RDI - Agent del sistema RDI", | |
| "percentage": 15 | |
| }, | |
| { | |
| "sector": "Indústries de la salut i ciències", | |
| "collaborationType": "Empresa - Empresa", | |
| "percentage": 15 | |
| }, | |
| { | |
| "sector": "Indústries de la salut i ciències", | |
| "collaborationType": "Empresa - Agent del sistema RDI", | |
| "percentage": 50 | |
| }, | |
| { | |
| "sector": "Indústries de la salut i ciències", | |
| "collaborationType": "Agent del sistema RDI - Agent del sistema RDI", | |
| "percentage": 35 | |
| }, | |
| { | |
| "sector": "TIC", | |
| "collaborationType": "Empresa - Empresa", | |
| "percentage": 10 | |
| }, | |
| { | |
| "sector": "TIC", | |
| "collaborationType": "Empresa - Agent del sistema RDI", | |
| "percentage": 50 | |
| }, | |
| { | |
| "sector": "TIC", | |
| "collaborationType": "Agent del sistema RDI - Agent del sistema RDI", | |
| "percentage": 50 | |
| }, | |
| { | |
| "sector": "Nanotecnologia", | |
| "collaborationType": "Empresa - Empresa", | |
| "percentage": 60 | |
| }, | |
| { | |
| "sector": "Nanotecnologia", | |
| "collaborationType": "Empresa - Agent del sistema RDI", | |
| "percentage": 20 | |
| }, | |
| { | |
| "sector": "Nanotecnologia", | |
| "collaborationType": "Agent del sistema RDI - Agent del sistema RDI", | |
| "percentage": 20 | |
| }, | |
| { | |
| "sector": "Fotònica", | |
| "collaborationType": "Empresa - Empresa", | |
| "percentage": 85 | |
| }, | |
| { | |
| "sector": "Fotònica", | |
| "collaborationType": "Empresa - Agent del sistema RDI", | |
| "percentage": 10 | |
| }, | |
| { | |
| "sector": "Fotònica", | |
| "collaborationType": "Agent del sistema RDI - Agent del sistema RDI", | |
| "percentage": 5 | |
| }, | |
| { | |
| "sector": "Materials avançats", | |
| "collaborationType": "Empresa - Empresa", | |
| "percentage": 70 | |
| }, | |
| { | |
| "sector": "Materials avançats", | |
| "collaborationType": "Empresa - Agent del sistema RDI", | |
| "percentage": 15 | |
| }, | |
| { | |
| "sector": "Materials avançats", | |
| "collaborationType": "Agent del sistema RDI - Agent del sistema RDI", | |
| "percentage": 15 | |
| }, | |
| { | |
| "sector": "Biotecnologia", | |
| "collaborationType": "Empresa - Empresa", | |
| "percentage": 50 | |
| }, | |
| { | |
| "sector": "Biotecnologia", | |
| "collaborationType": "Empresa - Agent del sistema RDI", | |
| "percentage": 25 | |
| }, | |
| { | |
| "sector": "Biotecnologia", | |
| "collaborationType": "Agent del sistema RDI - Agent del sistema RDI", | |
| "percentage": 25 | |
| }, | |
| { | |
| "sector": "Tecnologies de fabricació avançada", | |
| "collaborationType": "Empresa - Empresa", | |
| "percentage": 40 | |
| }, | |
| { | |
| "sector": "Tecnologies de fabricació avançada", | |
| "collaborationType": "Empresa - Agent del sistema RDI", | |
| "percentage": 10 | |
| }, | |
| { | |
| "sector": "Tecnologies de fabricació avançada", | |
| "collaborationType": "Agent del sistema RDI - Agent del sistema RDI", | |
| "percentage": 50 | |
| } | |
| ] | |
| }, | |
| { | |
| "name": "domain_property_sector", | |
| "source": "mydata", | |
| "transform": [{"type": "aggregate", "groupby": ["sector"]}] | |
| }, | |
| { | |
| "name": "domain_property_collaborationType", | |
| "source": "mydata", | |
| "transform": [{"type": "aggregate", "groupby": ["collaborationType"]}] | |
| } | |
| ], | |
| "scales": [ | |
| { | |
| "name": "xscale", | |
| "nice": true, | |
| "range": [0, {"signal": "cellWidth"}], | |
| "domain": [0, 100] | |
| }, | |
| { | |
| "name": "yscale", | |
| "type": "band", | |
| "range": [0, {"signal": "cellHeight"}], | |
| "padding": 0.05, | |
| "round": true, | |
| "domain": {"data": "mydata", "field": "collaborationType"} | |
| } | |
| ], | |
| "layout": { | |
| "columns": {"signal": "length(data('domain_property_sector'))/2"}, | |
| "padding": 5 | |
| }, | |
| "marks": [ | |
| { | |
| "name": "column_header", | |
| "type": "group", | |
| "role": "column-header", | |
| "from": {"data": "domain_property_sector"}, | |
| "title": { | |
| "text": {"signal": "parent[\"sector\"]"}, | |
| "offset": 10, | |
| "orient": "top", | |
| "style": "guide-label" | |
| }, | |
| "encode": {"update": {"width": {"signal": "cellWidth"}}} | |
| }, | |
| { | |
| "name": "row-header", | |
| "type": "group", | |
| "role": "row-header", | |
| "encode": {"update": {"height": {"signal": "cellHeight"}}}, | |
| "axes": [{"scale": "yscale", "orient": "left"}] | |
| }, | |
| { | |
| "name": "row-header2", | |
| "type": "group", | |
| "role": "row-header", | |
| "encode": {"update": {"height": {"signal": "cellHeight"}}}, | |
| "axes": [{"scale": "yscale", "orient": "left"}] | |
| }, | |
| { | |
| "name": "sector", | |
| "type": "group", | |
| "from": {"facet": {"data": "mydata", "name": "sectors", "groupby": "sector"}}, | |
| "encode": { | |
| "enter": { | |
| "height": {"signal": "cellHeight"}, | |
| "width": {"signal": "cellWidth"}, | |
| "stroke": {"value": "white"} | |
| } | |
| }, | |
| "marks": [ | |
| { | |
| "type": "rect", | |
| "from": {"data": "sectors"}, | |
| "encode": { | |
| "enter": { | |
| "y": {"scale": "yscale", "field": "collaborationType"}, | |
| "height": {"scale": "yscale", "band": 1}, | |
| "x": {"scale": "xscale", "value": 0}, | |
| "width": {"scale": "xscale", "field": "percentage"} | |
| }, | |
| "update": {"fill": {"value": "steelblue"}} | |
| } | |
| } | |
| ] | |
| } | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment