vega.js playground

Readme.md

Vega.js example with small multiples, legends amb multiple marks.

By using the mark type group we can facet the data and create small multiples, as this:

"marks": [   
    {
       "name": "rankName2",
       "type": "group",

       "from": {
           "facet": {
               "data": "region_only",
               "name": "rankNames",
               "groupby": "rankName"
           }
       },
       ...
```       

However, as two diferent marks are displayed (rects and lines, based on another field different from the one used by the facet), I didn't found in the specs a way inject some data transformation again to have diferent facets again, one for each type of visual mark. So the mark group is used twice, one to display each type of mark. Far far being ideal.

academics-distribution-toscana-italy.json

{
  "$schema": "https://vega.github.io/schema/vega/v3.0.json",
  "width": 800,
  "height": 200,
  "padding": {"top": 5, "right": 5, "bottom": 5, "left": 5},

  "signals": [
    {"name": "offset", "value": 15},
    {"name": "width", "value": "width"},
    {"name": "cellHeight", "value": 200},
    {"name": "cellWidth", "update": "width / 3"}
  ],
  "data": [
    {
      "name": "dataset",
      "values": [{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore associato","age":"30-34","total":0.91,"region":"italia"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore associato","age":"35-39","total":8.84,"region":"italia"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore associato","age":"40-44","total":24.94,"region":"italia"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore associato","age":"45-49","total":30.22,"region":"italia"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore associato","age":"50-54","total":14.53,"region":"italia"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore associato","age":"55-59","total":8.51,"region":"italia"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore associato","age":"60-64","total":6.52,"region":"italia"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore associato","age":"65-69","total":5.45,"region":"italia"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore associato","age":"70-71","total":0.08,"region":"italia"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Ricercatore a tempo indeterminato","age":"30-34","total":5.19,"region":"italia"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Ricercatore a tempo indeterminato","age":"35-39","total":26.28,"region":"italia"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Ricercatore a tempo indeterminato","age":"40-44","total":28.72,"region":"italia"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Ricercatore a tempo indeterminato","age":"45-49","total":19.47,"region":"italia"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Ricercatore a tempo indeterminato","age":"50-54","total":9.3,"region":"italia"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Ricercatore a tempo indeterminato","age":"55-59","total":5.57,"region":"italia"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Ricercatore a tempo indeterminato","age":"60-64","total":4.92,"region":"italia"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Ricercatore a tempo indeterminato","age":"65-69","total":0.54,"region":"italia"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Ricercatore a tempo indeterminato","age":"70-71","total":0,"region":"italia"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore ordinario","age":"30-34","total":0,"region":"italia"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore ordinario","age":"35-39","total":0.56,"region":"italia"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore ordinario","age":"40-44","total":4.56,"region":"italia"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore ordinario","age":"45-49","total":17.96,"region":"italia"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore ordinario","age":"50-54","total":22.74,"region":"italia"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore ordinario","age":"55-59","total":18.74,"region":"italia"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore ordinario","age":"60-64","total":15.86,"region":"italia"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore ordinario","age":"65-69","total":19.16,"region":"italia"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore ordinario","age":"70-71","total":0.42,"region":"italia"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Ricercatore a tempo indeterminato","age":"30-34","total":2.91,"region":"toscana"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Ricercatore a tempo indeterminato","age":"35-39","total":12.62,"region":"toscana"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Ricercatore a tempo indeterminato","age":"40-44","total":36.89,"region":"toscana"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Ricercatore a tempo indeterminato","age":"45-49","total":22.33,"region":"toscana"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Ricercatore a tempo indeterminato","age":"50-54","total":13.59,"region":"toscana"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Ricercatore a tempo indeterminato","age":"55-59","total":7.77,"region":"toscana"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Ricercatore a tempo indeterminato","age":"60-64","total":0.97,"region":"toscana"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Ricercatore a tempo indeterminato","age":"65-69","total":2.91,"region":"toscana"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Ricercatore a tempo indeterminato","age":"70-71","total":0,"region":"toscana"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore associato","age":"30-34","total":1.32,"region":"toscana"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore associato","age":"35-39","total":6.58,"region":"toscana"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore associato","age":"40-44","total":23.68,"region":"toscana"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore associato","age":"45-49","total":34.21,"region":"toscana"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore associato","age":"50-54","total":18.42,"region":"toscana"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore associato","age":"55-59","total":9.21,"region":"toscana"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore associato","age":"60-64","total":5.26,"region":"toscana"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore associato","age":"65-69","total":1.32,"region":"toscana"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore associato","age":"70-71","total":0,"region":"toscana"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore ordinario","age":"30-34","total":0,"region":"toscana"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore ordinario","age":"35-39","total":0,"region":"toscana"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore ordinario","age":"40-44","total":3.45,"region":"toscana"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore ordinario","age":"45-49","total":14.66,"region":"toscana"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore ordinario","age":"50-54","total":20.69,"region":"toscana"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore ordinario","age":"55-59","total":19.83,"region":"toscana"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore ordinario","age":"60-64","total":16.38,"region":"toscana"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore ordinario","age":"65-69","total":24.14,"region":"toscana"},{"year":2014,"cunAreaCode":"AREA12","rankName":"Professore ordinario","age":"70-71","total":0.86,"region":"toscana"}]
    },
    {
        "name": "region_only",
        "source": "dataset",
        "transform":[
            {
                "type": "filter",
                "expr": "datum.region == 'toscana'"
            }
        ]
    },
    {
        "name": "country_only",
        "source": "dataset",
        "transform":[
            {
                "type": "filter",
                "expr": "datum.region == 'italia'"
            }
        ]
    }
  ],
  "scales": [
    {
      "name": "gscale",
      "type": "band",
      "range": [0, {"signal": "width"}],
      "round": true,
      "domain": {
        "data": "dataset",
        "field": "rankName"
      },
      "paddingInner": 0.5,
      "paddingOuter": 0
    },
    {
      "name": "xscale",
      "range": [0, {"signal": "cellWidth"}],
      "domain": {"data": "dataset", "field": "age"},
      "type": "band",
      "padding": 0.1,
      "round": true
    },
    {
      "name": "xscale_country",
      "range": [0, {"signal": "cellWidth"}],
      "domain": {"data": "dataset", "field": "age"},
      "type": "band",
      "round": true
    },
    {
      "name": "cscale",
      "type": "ordinal",
      "range": "category",
      "domain": {"data": "dataset", "field": "rankName"}
    },
    {
      "name": "cscale_perimetro",
      "type": "ordinal",
      "range": ["black", "white"],
      "domain": {"data": "dataset", "field": "region"}
    }
  ],

  "legends":[
    {
      "fill": "cscale",
      "orient": "bottom",
      "title": "Docenti e ricercatori",
      "padding": 4,      
      "encode": {
        "symbols": {
          "enter": {
            "strokeWidth": {"value": 2},            
            "size": {"value": 50}
          }
        }
      }
    },
    {
      "fill": "cscale_perimetro",
      "orient": "bottom",
      "title": "Nazione / Regione",
      "padding": 4,      
      "encode": {
        "symbols": {
          "enter": {
            "strokeWidth": {"value": 2},            
            "size": {"value": 50}
          }
        }
      }
    }
  ],

  "marks": [   
    {
       "name": "rankName2",
       "type": "group",

       "from": {
           "facet": {
               "data": "region_only",
               "name": "rankNames",
               "groupby": "rankName"
           }
       },
       "encode": {
        "enter": {
            "x": {
             "scale": "gscale",   
             "field": "rankName",
             "offset": 
                {
                 "signal": "offset",
                 "height": { "signal": "cellWidth"}
                },
             "width": {"signal": "cellWidth"}
            },
            "height": {"signal": "cellHeight"}
        }   
       },
       "scales": [
        {
          "name": "yscale",
          "range": [200,0],
          "domain": {
            "data": "dataset",
            "field": "total"
          },
          "padding": 0.05
        }
      ],
      "axes": [
        {
          "orient": "bottom",
          "scale": "xscale",
          "labelPadding": 4,
          "tickSize": 0,
          "domain": false,
          "grid": false
        },
        {
            "orient": "left",
            "scale": "yscale",
            "title": "percentuale (%)",
            "titlePadding": 5,
            "labelPadding": 2,
            "tickSize": 0,
            "domain": false,
            "grid": true,
            "encode": {
                "grid": {
                    "enter": {"strokeDash": {"value": [1,6]}}
                }
            }            
        },
        {
            "orient": "bottom",
            "scale": "yscale",
            "title": "Età (anni)",
            "titlePadding": 25,
            "tickSize": 0,
            "labels": false,
            "domain": false
        }
      ],
      "marks": [
        {
            "type": "rect",
            "from": {"data":"rankNames"},
            "encode": {
                "enter": {
                "x": {"scale": "xscale", "field": "age"},
                "width": {"scale": "xscale", "band": 1},
                "y": {"scale": "yscale", "field": "total"},
                "y2": {"scale": "yscale", "value": 0}
                },
                "update": {
                "fill": {"scale": "cscale", "field": "rankName"}
                },
                "hover": {
                "fill": {"value": "brown"}
                }
            }
        }
      ]
    },
    {
       "name": "rankName",
       "type": "group",

       "from": {
           "facet": {
               "data": "country_only",
               "name": "rankNames",
               "groupby": "rankName"
           }
       },
       "encode": {
        "enter": {
            "x": {
             "scale": "gscale",   
             "field": "rankName",
             "offset": 
                {
                 "signal": "offset",
                 "height": { "signal": "cellWidth"}
                },
             "width": {"signal": "cellWidth"}
            },
            "height": {"signal": "cellHeight"}
        }   
       },
       "scales": [
        {
          "name": "yscale",
          "range": [200,0],
          "domain": {
            "data": "dataset",
            "field": "total"
          },
          "padding": 0.05
        }
      ],
      "marks": [
        {
            "type": "rect",
            "from": {"data":"rankNames"},
            "encode": {
                "enter": {
                "x": {"scale": "xscale_country", "field": "age"},
                "width": {"scale": "xscale_country", "band": 1},
                "height": {"value": 3},
                "y": {"scale": "yscale", "field": "total"}
                },
                "update": {
                "stroke": {"value": "white"},
                "strokeWidth": {"value": 0.7},
                "fill": {"value": "black"}
                }
            }
        }
      ]
    }
  ]
}

index.html

<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', 
      "academics-distribution-toscana-italy.json",
      {
        'renderer': 'svg',
        'height:': 200,
        'actions': false
      });
  </script>
  </html>

thumbnail.png