vega stock 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>Teeproduktion</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>
    <style type="text/css">
    #growArea {
      padding: 40px;
      text-align: center;
    }
    h1  {
      font-family: Helvetica;
      text-align: center;
      font-size: 23px;
      font-weight: bold;
    }

</style>
  </head>
  <body>

<h1>Teeproduktion in den Hauptanbauländern</h1>
    <div id="growArea"</div> 
    
     <script type="text/javascript">
     
        var spec = {
            "width": 500,
            "height": 300,
            "data": [
              {
                "name": "teaProduction",
                "url": "teaProduction.csv",
                "format": {"type": "csv", "parse": {"production":"number", "date":"date"}}
              }
            ],
            "scales": [
              {
                "name": "x",
                "type": "time",
                "range": "width",
                "domain": {"data": "teaProduction", "field": "data.date"}
              },
              {
                "name": "y",
                "type": "linear",
                "range": "height",
                "nice": true,
                "domain": {"data": "teaProduction", "field": "data.production"}
              },
              {
                "name": "color", "type": "ordinal", "range": "category10"
              }
            ],
            "axes": [
              {"type": "x", "scale": "x", "tickSizeEnd": 0},
              {"type": "y", "scale": "y"}
            ],
            "marks": [
              {
                "type": "group",
                "from": {
                  "data": "teaProduction",
                  "transform": [{"type": "facet", "keys": ["data.country"]}]
                },
                "marks": [
                  {
                    "type": "line",
                    "properties": {
                      "enter": {
                        "x": {"scale": "x", "field": "data.date"},
                        "y": {"scale": "y", "field": "data.production"},
                        "stroke": {"scale": "color", "field": "data.country"},
                        "strokeWidth": {"value": 2}
                      }
                    }
                  },
                  {
                    "type": "text",
                    "from": {
                      "transform": [{"type": "filter", "test": "index==data.length-1"}]
                    },
                    "properties": {
                      "enter": {
                        "x": {"scale": "x", "field": "data.date", "offset": 2},
                        "y": {"scale": "y", "field": "data.production"},
                        "fill": {"scale": "color", "field": "data.country"},
                        "text": {"field": "data.country"},
                        "baseline": {"value": "middle"}
                      }
                    }
                  }
                ]
              }
            ]
          };
          vg.parse.spec(spec, function(chart) {
          var growArea = chart({el:"#growArea"})
            .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