vega chart

Tea growing area India

Chart implemented with vega.js

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>Vega Live Editor</title>
    <script src="https://d3js.org/d3.v3.min.js">></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vega/1.4.0/vega.min.js"></script>
  </head>
  <body>
    <div id="growArea"</div> 
    
     <script type="text/javascript">
        var spec = {
          "width": 600,
          "height": 400,
          "padding": {"top": 100, "left": 150, "bottom": 30, "right": 10},
          "data": [{"name": "table"}],
          "scales": [
            {
              "name": "x", "type": "ordinal", "range": "width",
              "domain": {"data": "table", "field": "data.zone"}
            },
            {
              "name": "y", "range": "height", "nice": true,
              "domain": {"data": "table", "field": "data.area"}
            }
          ],
          "axes": [
            {"type": "x", "scale": "x"},
            {"type": "y", "scale": "y"}
          ],
          "marks": [
            {
              "type": "rect",
              "from": {"data": "table"},
              "properties": {
                "enter": {
                  "x": {"scale": "x", "field": "data.zone"},
                  "y": {"scale": "y", "field": "data.area"},
                  "y2": {"scale": "y", "value": 0},
                  "width": {"scale": "x", "band": true, "offset": -5}
                },
                "update": {
                  "fill": {"value": "green"}
                },
                "hover": {
                  "fill": {"value": "lightblue"}
                }
              }
            },
            {
              "type": "rect",
              "interactive": false,
              "from": {"data": "table"}
            }
          ]
        };

var data1 = {table: [
          {"zone": 'Assam',  "area": 266.512},
          {"zone": 'West Bengalen',  "area": 107.479},
          {"zone": 'Nordindien',  "area": 16.915},
          {"zone": 'Tamil Nadu',  "area": 74.398},
          {"zone": 'Kerala',  "area": 36.940},
          {"zone": 'Karnataka',  "area": 2.122}
        ]};

vg.parse.spec(spec, function(chart) {
          var growArea = chart({el:"#growArea", data:data1})
            .update();
        });
  </script>
  </body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/vega/1.4.0/vega.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://cdnjs.cloudflare.com/ajax/libs/vega/1.4.0/vega.min.js