animated-charts/plurality-approval-1.html at master · TroyOfHelen/animated-charts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!-- This is what I've learned so far from google chart's animation page https://is.gd/avOPIw  -->

<html>
  <head>
	<!-- First we load the javascript file from Google that allows everything. -->
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

// Next, we run some commands from the Google javascript file that load other packages.
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// probably should change this to 45 instead of 'current' so we don't break something in an update.

// And we tell the chart maker where we put all its instructions
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(init);


// This is where all our stuff goes
function init() {

	// These are options for making the chart look nice.
	var options = {
		width: 500,
		height: 500*.6,
		animation:{
			duration: 1000,
			easing: 'in',
		},
		vAxis: {minValue:0, maxValue:55},
		legend: {position: 'none'},
		title: 'Plurality',
		hAxis: {viewWindow: {max:4},
			textPosition: 'none' },
		fontName: 'Roboto',
		vAxis: {
			textPosition: 'none' ,
			gridlines: {color: 'none'},
			baselineColor: 'none',
		},
		titleTextStyle: { // https://is.gd/TSjLsm
			fontSize: 20,
		}
	};

	// This is the data table (and I edit the data later)
	var data = google.visualization.arrayToDataTable([
		['Candidate','Vote', {role:'style'}],
		['Clinton', 48.7,'black'],
		['Trump', 46.9,'black'],
		['Johnson', 3.3,'black'],
		['Stein', 1.1,'black'],
		['Sanders', 50,'black'],
		['Cruz',30,'black']
	])

	// Labeling Columns - Kinda weird way to add annotations to data.  I guess the annotations are a layer on top of the data, called a view
	// https://is.gd/l1ruyl
	var view = new google.visualization.DataView(data);
     view.setColumns([0, 1,
		{ calc: "stringify",
		 sourceColumn: 0,
		 type: "string",
		 role: "annotation" },
		2]);

	// Now the topmost layer on top of the view and the data, the chart!
	var chart = new google.visualization.ColumnChart(
		document.getElementById('chart_div'));

	// Add some buttons (for start and stop)
	var button = document.getElementById('b1');
	var button2 = document.getElementById('b2');

	// I added an idea of a state machine, and I have a variable called state.  Initially, we show plurality.
	var state = 'plurality';

	// I guess there isn't much to this, pretty simple now.  Just a wrapper.  Notice that variables come from the scope where the function is defined.  They aren't passed to the function.  They are inherited from the environment.  Kinda like R.
	function drawChart() {
		chart.draw(view, options);
	}

	// Set the next step timer
	//
	// This handle, b_switcher,  allows us to stop an interval timer... Actually if I were to do this again, I'd just use a timeout instead because ever time one interval is up, I clear it and make a new interval.  I could instead just make a new timeout in one step without clearing the old one and without needing this hande... wait, how does the timeout work? does it pause the code execution?  No, because then we would have different waiting times... but is the program stack getting bigger? Is it recursive?  I don't know.
	// Oh here's the answer: http://stackoverflow.com/a/24320973
	// We're good.
	var b_switcher = setInterval(function() { a_switch_plot(); }, 3000);

	// this is for later, when we transition between states.  We want the transition to be short when we are in a "starting" state, where we basically just change the title and color.
	function d_set_switch_speed(e_interval) {
		clearInterval(b_switcher);
		b_switcher = setInterval(function() { a_switch_plot(); }, e_interval);
		options.animation.duration = e_interval/6.0; // need  to animate faster.  otherwise the animation doesn't finish before the next transition starts.  This led to a bug where the color and title wouldn't change when I expected it to.
	}

	// this moves the state of the plot forward one step, and google handles the transition mechanics.  All I do is tell it the next endpoint.
	function a_switch_plot() {  // each state in order, with transition states
		switch(state)
		{
		case 'plurality':
			state = 'approval start';
			options['title'] = 'Approval';
			data.setValue(2, 2, 'red');
			data.setValue(3, 2, 'red');
			d_set_switch_speed(300);
			break;
		case 'approval start':
			state = 'approval';
			data.setValue(0, 1, 49.7);
			data.setValue(1, 1, 46.9);
			data.setValue(2, 1, 21.0);
			data.setValue(3, 1, 11.8);
			d_set_switch_speed(3000);
			break;
		case 'approval':
			state = 'approval with more start'
			options['title'] = 'Approval with Primary Contenders';
			data.setValue(2, 2, 'black');
			data.setValue(3, 2, 'black');
			data.setValue(4, 2, 'red');
			data.setValue(5, 2, 'red');
			d_set_switch_speed(300);
			break;
		case 'approval with more start':
			state = 'approval with more';
			options.hAxis.viewWindow.max = 6;
			d_set_switch_speed(3000);
			break;
		case 'approval with more':
			state = 'plurality start';
			options['title'] = 'Plurality';
			data.setValue(4, 2, 'black');
			data.setValue(5, 2, 'black');
			d_set_switch_speed(300);
			break;
		case 'plurality start':
			state = 'plurality';
			options.hAxis.viewWindow.max = 4;
			data.setValue(0, 1, 48.7);
			data.setValue(1, 1, 46.9);
			data.setValue(2, 1, 3.3);
			data.setValue(3, 1, 1.1);
			d_set_switch_speed(3000);
			break;
		}
		// now go draw
		drawChart();
	}

	// make the buttons work
	button.onclick = function() { b_switcher = setInterval(function() { a_switch_plot(); }, 3000); a_switch_plot(); }
	button2.onclick = function() {clearInterval(b_switcher);}

	// draw the chart once after loading the page
	drawChart();
}

    </script>
  </head>

  <body>
	<!-- This is where the actual placement of the chart in the page happens. -->
    <div id="chart_div"></div>
	<button id='b1'>play</button>
	<button id='b2'>stop</button>
	From <a href=https://docs.google.com/spreadsheets/d/1cmh5cm2W8lSOZ__BlS6Mzb_pto__EG5UU3BjNsXL5KY/edit#gid=1816975760>doc</a> but Sanders and Cruz were not there.
  </body>
</html>