Skip to content

Instantly share code, notes, and snippets.

@splarty

splarty/index.html

Last active July 29, 2016 01:23
Show Gist options
  • Save splarty/5aa21a6c6c75b00c4b9d207b34a8f9a2 to your computer and use it in GitHub Desktop.
Save splarty/5aa21a6c6c75b00c4b9d207b34a8f9a2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
h2 {
text-align: center;
}
</style>
<script type="text/javascript">
function draw(data) {
d3.select('body').append('h2').text("Powerball analysis");
"use strict";
var margin = 75,
width = 1200 - margin,
height = 600 - margin;
var svg = d3.select("body").append("svg").attr("width", width + margin).attr("height", height + margin).append('g').attr('class', 'chart');
var format = d3.time.format("%m/%d/%Y");
data.forEach(function(d) {
d['n1'] = +d['n1'];
d['n2'] = +d['n2'];
d['n3'] = +d['n3'];
d['n4'] = +d['n4'];
d['n5'] = +d['n5'];
d['date'] = format.parse(d['date']);
d["average_white_ball"] = (d['n1'] + d['n2'] + d['n3'] + d['n4'] + d['n5']) / 5;
});
console.log(data[0]);
var myChart = new dimple.chart(svg, data);
var x = myChart.addCategoryAxis("x", "date");
x.addOrderRule("Date");
var y1 = myChart.addMeasureAxis("y", "n1");
var y2 = myChart.addMeasureAxis(y1, "n2");
var y3 = myChart.addMeasureAxis(y1, "n3");
var y4 = myChart.addMeasureAxis(y1, "n4");
var y5 = myChart.addMeasureAxis(y1, "n5");
myChart.addSeries("n 1", dimple.plot.bubble, [x, y1]);
myChart.addSeries("n 2", dimple.plot.bubble, [x, y2]);
myChart.addSeries("n 3", dimple.plot.bubble, [x, y3]);
myChart.addSeries("n 4", dimple.plot.bubble, [x, y4]);
myChart.addSeries("n 5", dimple.plot.bubble, [x, y5]);
myChart.assignColor("n 1", "white", "red", 0.5);
myChart.assignColor("n 2", "white", "blue", 0.75);
myChart.assignColor("n 3", "red");
myChart.assignColor("n 4", "#FF00FF");
myChart.assignColor("n 5", "yellow");
/*
myChart.addSeries(null, dimple.plot.scatter);
myChart.addSeries("n2", dimple.plot.scatter);
myChart.addSeries("n3", dimple.plot.scatter);
myChart.addSeries("n4", dimple.plot.scatter);
myChart.addSeries("n5", dimple.plot.scatter);
myChart.assignColor("n1", "#FF0000");
myChart.assignColor("n2", "#FF0000");
myChart.assignColor("n3", "#FF0000");
*/
myChart.addLegend(600, 10, 900, 20, "right");
myChart.draw();
};
</script>
</head>
<body>
<script type="text/javascript">
d3.csv("powerball1.csv", draw);
</script>
</body>
</html>
Raw
powerball1.csv
date n1 n2 n3 n4 n5 redball PP
11/27/02 1 25 40 53 20 19 5
11/23/02 49 21 15 19 16 5 4
11/20/02 14 22 44 21 29 3 3
11/16/02 40 51 32 33 35 1 2
11/13/02 50 18 23 38 31 20 5
11/9/02 53 38 30 40 36 8 5
11/6/02 9 19 17 12 11 23 5
11/2/02 34 35 15 32 8 34 4
10/30/02 9 23 41 19 16 12 5
10/26/02 33 14 12 39 27 41 3
10/23/02 18 30 2 14 31 36 5
10/19/02 4 42 18 25 20 29 4
10/16/02 8 31 24 37 11 41 5
10/12/02 23 49 46 52 26 28 5
10/9/02 9 38 43 10 42 5 4
10/5/02 22 14 39 43 19 12 2
10/2/02 4 5 43 2 38 34 2
9/28/02 24 22 12 35 31 8 3
9/25/02 49 36 23 12 1 9 2
9/21/02 45 11 28 40 3 33 5
9/18/02 44 42 6 27 32 10 5
9/14/02 14 5 40 26 31 29 4
9/11/02 6 3 39 26 48 28 3
9/7/02 24 12 19 34 6 18 5
9/4/02 26 15 18 36 31 20 5
8/31/02 14 22 12 29 41 41 5
8/28/02 38 36 30 24 37 42 2
8/24/02 24 18 45 5 10 20 5
8/21/02 48 1 47 6 43 36 1
8/17/02 46 33 3 42 26 41 3
8/14/02 19 4 33 16 41 29 2
8/10/02 11 16 21 35 27 31 5
8/7/02 13 40 35 47 46 35 4
8/3/02 34 24 33 13 19 41 5
7/31/02 2 4 34 22 6 26 4
7/27/02 17 5 44 22 2 30 1
7/24/02 16 19 34 37 22 20 4
7/20/02 13 3 2 26 6 10 1
7/17/02 25 10 40 11 45 25 5
7/13/02 22 49 42 3 37 8 3
7/10/02 31 43 37 45 26 32 5
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment