Dimple.js simple time chart

Dimple.js - Simple data visualization chart

This is an example of a corrected chart from the 'Tokyo' Wikipedia article which contains a chart without proper x-axis labels and spacing.

Image here

Critique

The x-axis ticks from year 2005 represent just one year, which is misleading for the reader.
The messages overlapping the chart are not necessary now that the horizontal grid lines show when the specific population number is exceed.

_{NOTE: This example is a mini-project for the Udacity's Data Visualization and D3.js course.}

_{Camilo Cruz, 2017.}

forked from cccruzr's block: Dimple.js simple time chart

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
    	circle.dimple-series-1 {
    		fill: white;
    	}
    </style>
    <script type="text/javascript">
      function draw(data) {
      // D3.js setup code 
        "use strict";
        var margin = 75,
            width = 900 - margin,
            height = 400 - margin;

var svg = d3.select("body")
          .append("svg")
            .attr("width", width + margin)
            .attr("height", height + margin)
          .append('g')
              .attr('class','chart');

// Dimple.js Chart construction code
        var myChart = new dimple.chart(svg, data);
        var x = myChart.addTimeAxis("x", "Year"); 
        var y = myChart.addMeasureAxis("y", "Population");
        y.title = "Population (in millions)";
        y.tickFormat = "g";
        y.fontSize = "auto";
        x.dateParseFormat = "%Y";
        x.tickFormat = "%Y";
        x.timeInterval = 5;
        x.fontSize = "auto";
        x.showGridlines = true;
        myChart.addSeries(null, dimple.plot.line);
        myChart.addSeries(null, dimple.plot.scatter);
        myChart.draw();
      };
    </script>
  </head>
  <body>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
     <script type="text/javascript">
      /* Use D3 (not dimple.js) to load the TSV file
        and pass the contents of it to the draw function
      */
      d3.tsv("tokyo_pop.tsv", draw);
    </script>
  </body>
</html>

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

Modified http://dimplejs.org/dist/dimple.v2.0.0.min.js to a secure url

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

https://dimplejs.org/dist/dimple.v2.0.0.min.js