ctivanovich · March 23, 2018 10:13
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>

  <style>
  circle.dimple-series-1 {
    fill: red;
  }

  h3 {
    text-align: center;
  }
  </style>

    <script type="text/javascript">
      function draw(data) {

      /*
        D3.js setup code
      */

          "use strict";
          var margin = 100,
              width = 1000 - margin,
              height = 500 - margin;

          d3.select("body")
            .append("h3")
            .text("World Cup Attendance, 1930-2014");

          var svg = d3.select("body")
            .append("svg")
              .attr("width", width + margin)
              .attr("height", height + margin)
            .append("g") //g means group together elements like a div
                .attr("class","chart");

      /*
        Dimple.js Chart construction code
      */

          var myChart = new dimple.chart(svg, data);
          var x = myChart.addTimeAxis("x", "year");
          x.dataParseFormat = '%Y'
          x.tickFormat = "%Y"
          x.timeInterval = 4
          myChart.addMeasureAxis("y", "attendance");
          myChart.addSeries(null, dimple.plot.line); //null is in place of
          //optional column for grouping data series
          myChart.addSeries(null, dimple.plot.scatter);
          myChart.draw();
        };
      </script>
  </head>
 <body>
  <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("world_cup.tsv", draw);
  </script>
 </body>
 </html>
diff --git a/world_cup.tsv b/world_cup.tsv
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>

	<style>
	circle.dimple-series-1 {
	fill: red;
	}

	h3 {
	text-align: center;
	}
	</style>

	<script type="text/javascript">
	function draw(data) {

	/*
	D3.js setup code
	*/

	"use strict";
	var margin = 100,
	width = 1000 - margin,
	height = 500 - margin;

	d3.select("body")
	.append("h3")
	.text("World Cup Attendance, 1930-2014");

	var svg = d3.select("body")
	.append("svg")
	.attr("width", width + margin)
	.attr("height", height + margin)
	.append("g") //g means group together elements like a div
	.attr("class","chart");

	/*
	Dimple.js Chart construction code
	*/

	var myChart = new dimple.chart(svg, data);
	var x = myChart.addTimeAxis("x", "year");
	x.dataParseFormat = '%Y'
	x.tickFormat = "%Y"
	x.timeInterval = 4
	myChart.addMeasureAxis("y", "attendance");
	myChart.addSeries(null, dimple.plot.line); //null is in place of
	//optional column for grouping data series
	myChart.addSeries(null, dimple.plot.scatter);
	myChart.draw();
	};
	</script>
	</head>
	<body>
	<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("world_cup.tsv", draw);
	</script>
	</body>
	</html>