Unit Chart Stacked Vega

8/12/2017 - 9:20 PM

unit-chart-stacked-vega.vl.json

{
  "$schema": "https://vega.github.io/schema/vega/v3.0.json",
  "description": "A Stacked Unit-Chart",
  "autosize": "pad",
  "padding": 5,
  "style": "cell",
  "data": [
    {
      "name": "gapminder",
      "url": "gapminder.csv",
      "format": {"type": "csv"},
      "transform": [
        {
          "type": "window",
          "sort": {"field": "continent", "order": "ascending"},
          "groupby":["continent"],
          "ops": ["row_number"],
          "fields": [null],
          "as": ["row_number"]
        }
      ]
    }
  ],
  "signals": [
    {"name": "width","update": "400"},
    {"name": "height","update": "400"}
  ],
  "marks": [
    {
      "name": "marks",
      "type": "rect",
      "style": ["rect"],
      "from": {"data": "gapminder"},
      "encode": {
        "update": {
          "x": {"scale": "x","field": "continent"},
          "width": {"scale": "x","band": true},
          "y": {"scale": "y","field": "row_number"},
          "height": {"scale": "y","band": true},
          "fill": {"scale": "color","field": "continent"},
          "tooltip": {"signal": "''+datum[\"country\"]"}
        }
      }
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "band",
      "domain": {"data": "gapminder","field": "continent","sort": true},
      "range": [0,{"signal": "width"}],
      "round": true,
      "paddingInner": 0.1,
      "paddingOuter": 0.05
    },
    {
      "name": "y",
      "type": "band",
      "domain": {"data": "gapminder","field": "row_number","sort": true},
      "range": [{"signal": "height"},0],
      "round": true,
      "paddingInner": 0.1,
      "paddingOuter": 0.05
    },
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "gapminder","field": "continent","sort": true},
      "range": "category"
    }
  ],
  "axes": [
    {
      "scale": "x",
      "orient": "bottom",
      "title": "continent",
      "zindex": 1
    }
  ],
  "legends": [{"fill": "color","title": "continent"}],
  "config": {
    "axis": {"domainColor": "#888","tickColor": "#888"},
    "axisY": {"minExtent": 30},
    "style": {"cell": {"strokeOpacity": 0}}
  }
}

thumbnail.png

Rendered
Source

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.0/vega.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.0-beta.13/vega-lite.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-beta.19/vega-embed.js"></script>
</head>

<body>  
  <div id="vis"></div>
  <script>  
    const spec = "unit-chart-stacked-vega.vl.json"
    var opts = {"actions": {export: false, source: false, editor: false}};
  	vega.embed('#vis', spec, opts);
  </script>
</body>

gapminder.csv

country,continent,year,lifeExp,pop,gdpPercap
Algeria,Africa,2007,72.301,33333216,6223.367465
Angola,Africa,2007,42.731,12420476,4797.231267
Benin,Africa,2007,56.728,8078314,1441.284873
Botswana,Africa,2007,50.728,1639131,12569.85177
Burkina Faso,Africa,2007,52.295,14326203,1217.032994
Burundi,Africa,2007,49.58,8390505,430.0706916
Cameroon,Africa,2007,50.43,17696293,2042.09524
Central African Republic,Africa,2007,44.741,4369038,706.016537
Chad,Africa,2007,50.651,10238807,1704.063724
Comoros,Africa,2007,65.152,710960,986.1478792
Congo Dem. Rep.,Africa,2007,46.462,64606759,277.5518587
Congo Rep.,Africa,2007,55.322,3800610,3632.557798
Cote d'Ivoire,Africa,2007,48.328,18013409,1544.750112
Djibouti,Africa,2007,54.791,496374,2082.481567
Egypt,Africa,2007,71.338,80264543,5581.180998
Equatorial Guinea,Africa,2007,51.579,551201,12154.08975
Eritrea,Africa,2007,58.04,4906585,641.3695236
Ethiopia,Africa,2007,52.947,76511887,690.8055759
Gabon,Africa,2007,56.735,1454867,13206.48452
Gambia,Africa,2007,59.448,1688359,752.7497265
Ghana,Africa,2007,60.022,22873338,1327.60891
Guinea,Africa,2007,56.007,9947814,942.6542111
Guinea-Bissau,Africa,2007,46.388,1472041,579.231743
Kenya,Africa,2007,54.11,35610177,1463.249282
Lesotho,Africa,2007,42.592,2012649,1569.331442
Liberia,Africa,2007,45.678,3193942,414.5073415
Libya,Africa,2007,73.952,6036914,12057.49928
Madagascar,Africa,2007,59.443,19167654,1044.770126
Malawi,Africa,2007,48.303,13327079,759.3499101
Mali,Africa,2007,54.467,12031795,1042.581557
Mauritania,Africa,2007,64.164,3270065,1803.151496
Mauritius,Africa,2007,72.801,1250882,10956.99112
Morocco,Africa,2007,71.164,33757175,3820.17523
Mozambique,Africa,2007,42.082,19951656,823.6856205
Namibia,Africa,2007,52.906,2055080,4811.060429
Niger,Africa,2007,56.867,12894865,619.6768924
Nigeria,Africa,2007,46.859,135031164,2013.977305
Reunion,Africa,2007,76.442,798094,7670.122558
Rwanda,Africa,2007,46.242,8860588,863.0884639
Sao Tome and Principe,Africa,2007,65.528,199579,1598.435089
Senegal,Africa,2007,63.062,12267493,1712.472136
Sierra Leone,Africa,2007,42.568,6144562,862.5407561
Somalia,Africa,2007,48.159,9118773,926.1410683
South Africa,Africa,2007,49.339,43997828,9269.657808
Sudan,Africa,2007,58.556,42292929,2602.394995
Swaziland,Africa,2007,39.613,1133066,4513.480643
Tanzania,Africa,2007,52.517,38139640,1107.482182
Togo,Africa,2007,58.42,5701579,882.9699438
Tunisia,Africa,2007,73.923,10276158,7092.923025
Uganda,Africa,2007,51.542,29170398,1056.380121
Zambia,Africa,2007,42.384,11746035,1271.211593
Zimbabwe,Africa,2007,43.487,12311143,469.7092981
Argentina,Americas,2007,75.32,40301927,12779.37964
Bolivia,Americas,2007,65.554,9119152,3822.137084
Brazil,Americas,2007,72.39,190010647,9065.800825
Canada,Americas,2007,80.653,33390141,36319.23501
Chile,Americas,2007,78.553,16284741,13171.63885
Colombia,Americas,2007,72.889,44227550,7006.580419
Costa Rica,Americas,2007,78.782,4133884,9645.06142
Cuba,Americas,2007,78.273,11416987,8948.102923
Dominican Republic,Americas,2007,72.235,9319622,6025.374752
Ecuador,Americas,2007,74.994,13755680,6873.262326
El Salvador,Americas,2007,71.878,6939688,5728.353514
Guatemala,Americas,2007,70.259,12572928,5186.050003
Haiti,Americas,2007,60.916,8502814,1201.637154
Honduras,Americas,2007,70.198,7483763,3548.330846
Jamaica,Americas,2007,72.567,2780132,7320.880262
Mexico,Americas,2007,76.195,108700891,11977.57496
Nicaragua,Americas,2007,72.899,5675356,2749.320965
Panama,Americas,2007,75.537,3242173,9809.185636
Paraguay,Americas,2007,71.752,6667147,4172.838464
Peru,Americas,2007,71.421,28674757,7408.905561
Puerto Rico,Americas,2007,78.746,3942491,19328.70901
Trinidad and Tobago,Americas,2007,69.819,1056608,18008.50924
United States,Americas,2007,78.242,301139947,42951.65309
Uruguay,Americas,2007,76.384,3447496,10611.46299
Venezuela,Americas,2007,73.747,26084662,11415.80569
Afghanistan,Asia,2007,43.828,31889923,974.5803384
Bahrain,Asia,2007,75.635,708573,29796.04834
Bangladesh,Asia,2007,64.062,150448339,1391.253792
Cambodia,Asia,2007,59.723,14131858,1713.778686
China,Asia,2007,72.961,1318683096,4959.114854
Hong Kong China,Asia,2007,82.208,6980412,39724.97867
India,Asia,2007,64.698,1110396331,2452.210407
Indonesia,Asia,2007,70.65,223547000,3540.651564
Iran,Asia,2007,70.964,69453570,11605.71449
Iraq,Asia,2007,59.545,27499638,4471.061906
Israel,Asia,2007,80.745,6426679,25523.2771
Japan,Asia,2007,82.603,127467972,31656.06806
Jordan,Asia,2007,72.535,6053193,4519.461171
Korea Dem. Rep.,Asia,2007,67.297,23301725,1593.06548
Korea Rep.,Asia,2007,78.623,49044790,23348.13973
Kuwait,Asia,2007,77.588,2505559,47306.98978
Lebanon,Asia,2007,71.993,3921278,10461.05868
Malaysia,Asia,2007,74.241,24821286,12451.6558
Mongolia,Asia,2007,66.803,2874127,3095.772271
Myanmar,Asia,2007,62.069,47761980,944
Nepal,Asia,2007,63.785,28901790,1091.359778
Oman,Asia,2007,75.64,3204897,22316.19287
Pakistan,Asia,2007,65.483,169270617,2605.94758
Philippines,Asia,2007,71.688,91077287,3190.481016
Saudi Arabia,Asia,2007,72.777,27601038,21654.83194
Singapore,Asia,2007,79.972,4553009,47143.17964
Sri Lanka,Asia,2007,72.396,20378239,3970.095407
Syria,Asia,2007,74.143,19314747,4184.548089
Taiwan,Asia,2007,78.4,23174294,28718.27684
Thailand,Asia,2007,70.616,65068149,7458.396327
Vietnam,Asia,2007,74.249,85262356,2441.576404
West Bank and Gaza,Asia,2007,73.422,4018332,3025.349798
Yemen Rep.,Asia,2007,62.698,22211743,2280.769906
Albania,Europe,2007,76.423,3600523,5937.029526
Austria,Europe,2007,79.829,8199783,36126.4927
Belgium,Europe,2007,79.441,10392226,33692.60508
Bosnia and Herzegovina,Europe,2007,74.852,4552198,7446.298803
Bulgaria,Europe,2007,73.005,7322858,10680.79282
Croatia,Europe,2007,75.748,4493312,14619.22272
Czech Republic,Europe,2007,76.486,10228744,22833.30851
Denmark,Europe,2007,78.332,5468120,35278.41874
Finland,Europe,2007,79.313,5238460,33207.0844
France,Europe,2007,80.657,61083916,30470.0167
Germany,Europe,2007,79.406,82400996,32170.37442
Greece,Europe,2007,79.483,10706290,27538.41188
Hungary,Europe,2007,73.338,9956108,18008.94444
Iceland,Europe,2007,81.757,301931,36180.78919
Ireland,Europe,2007,78.885,4109086,40675.99635
Italy,Europe,2007,80.546,58147733,28569.7197
Montenegro,Europe,2007,74.543,684736,9253.896111
Netherlands,Europe,2007,79.762,16570613,36797.93332
Norway,Europe,2007,80.196,4627926,49357.19017
Poland,Europe,2007,75.563,38518241,15389.92468
Portugal,Europe,2007,78.098,10642836,20509.64777
Romania,Europe,2007,72.476,22276056,10808.47561
Serbia,Europe,2007,74.002,10150265,9786.534714
Slovak Republic,Europe,2007,74.663,5447502,18678.31435
Slovenia,Europe,2007,77.926,2009245,25768.25759
Spain,Europe,2007,80.941,40448191,28821.0637
Sweden,Europe,2007,80.884,9031088,33859.74835
Switzerland,Europe,2007,81.701,7554661,37506.41907
Turkey,Europe,2007,71.777,71158647,8458.276384
United Kingdom,Europe,2007,79.425,60776238,33203.26128
Australia,Oceania,2007,81.235,20434176,34435.36744
New Zealand,Oceania,2007,80.204,4115771,25185.00911

README.md

Rendered
Source

This is a Unit Chart which is Stacked Vertically. Uses the Vega library to do so in a declarative manner.

LICENSE

The MIT License (MIT)

Copyright (c) 2017 Amit Kapoor

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

Unit Chart Stacked Vega