Add files via upload

ctivanovich · Mar 23, 2018 · c7c6294 · c7c6294
1 parent 97d115e
commit c7c6294
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 0 deletions.
diff --git a/basic_charts.html b/basic_charts.html
@@ -0,0 +1,60 @@
+<!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;
+  }
+  </style>
+    <script type="text/javascript">
+      function draw(data) {
+
+      /*
+        D3.js setup code
+      */
+
+          "use strict";
+          var margin = 100,
+              width = 1000 - margin,
+              height = 500 - margin;
+
+          // debugger;
+
+          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