nccenter/NCEmploymentChart2.html at master · NCSUUXClass/nccenter · 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
<html>
  <head>
    <title>NC Employment data 1992-2012 with Google Motion Charts</title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      var industries = [];
      industries[0]  = "All (takes a while)";
      industries[1]  = "Construction";
      industries[2]  = "Education and Health Services";
      industries[3]  = "Financial Activities";
      industries[4]  = "Goods-Producing";
      industries[5]  = "Information";
      industries[6]  = "Leisure and Hospitality";
      industries[7]  = "Manufacturing";
      industries[8]  = "Natural Resources and Mining";
      industries[9]  = "Other Services";
      industries[10] = "Professional and Business Services";
      industries[11] = "Public Administration";
      industries[12] = "Service-Providing";
      industries[13] = "Trade, Transportation and Utilities";
      industries[14] = "Unclassified";


      var datasets   = [];  // FEEL FREE TO PASTE THESE LINKS IN YOUR BROWSER AND EXPLORE THE DATA IN THE SPREADSHEETS
      datasets[0]  = "https://docs.google.com/spreadsheet/ccc?key=0Am6F8HNNN1PBdG9HTlRLdTNNbGJtOFFvQ2dqQkNnUVE&usp=sharing";
      datasets[1]  = "https://docs.google.com/spreadsheet/ccc?key=0Am6F8HNNN1PBdEhuWk8yX1hpU2tmY2FPbmVOMTdNYlE&usp=sharing";
      datasets[2]  = "https://docs.google.com/spreadsheet/ccc?key=0Am6F8HNNN1PBdGhMTG8zdmRab0xMbXVKTkVoTEZvZFE&usp=sharing";
      datasets[3]  = "https://docs.google.com/spreadsheet/ccc?key=0Am6F8HNNN1PBdGZ0X3FwcXpZTnd5TjAwTE9qU1Zkc0E&usp=sharing";
      datasets[4]  = "https://docs.google.com/spreadsheet/ccc?key=0Am6F8HNNN1PBdGtLOGZCUU92QTJHMFFmZkgxVmZZdnc&usp=sharing";
      datasets[5]  = "https://docs.google.com/spreadsheet/ccc?key=0Am6F8HNNN1PBdGhXemFyZW5PRWt3RXRqcmhFNWdlcVE&usp=sharing";
      datasets[6]  = "https://docs.google.com/spreadsheet/ccc?key=0Am6F8HNNN1PBdFFoT2hSOHc2dDN6QzRDZ1MwcVdJc2c&usp=sharing";
      datasets[7]  = "https://docs.google.com/spreadsheet/ccc?key=0Am6F8HNNN1PBdGgwOFZwNTVPVHdKUjlnTF85ckJMa0E&usp=sharing";
      datasets[8]  = "https://docs.google.com/spreadsheet/ccc?key=0Am6F8HNNN1PBdC1IbU83WnRZWTZ3aFVmU1prRkdCNVE&usp=sharing";
      datasets[9]  = "https://docs.google.com/spreadsheet/ccc?key=0Am6F8HNNN1PBdEJJWThwZV9Uc0JBNzlhLU9UYTZGZmc&usp=sharing";
      datasets[10] = "https://docs.google.com/spreadsheet/ccc?key=0Am6F8HNNN1PBdG0wMktNUmo1TjJYNnhjWTVWdkY4Znc&usp=sharing";
      datasets[11] = "https://docs.google.com/spreadsheet/ccc?key=0Am6F8HNNN1PBdGlobVkxbDI2U2tPMHZ4emJ3dW1tLUE&usp=sharing";
      datasets[12] = "https://docs.google.com/spreadsheet/ccc?key=0Am6F8HNNN1PBdDRvOGtya1dSc0kwUUtWcWI0VVlnRFE&usp=sharing";
      datasets[13] = "https://docs.google.com/spreadsheet/ccc?key=0Am6F8HNNN1PBdDdTd0FIMWRsLUQ2RGxKWG1xNGlKdWc&usp=sharing";
      datasets[14] = "https://docs.google.com/spreadsheet/ccc?key=0Am6F8HNNN1PBdEg2OURocWc2RF9KUGRDYnVmNnpPTkE&usp=sharing";

	  var chart = null;
	  var options = {};
	  options['state'] = '{"xAxisOption":"2","xZoomedIn":false,"sizeOption":"6","yZoomedIn":false,"xLambda":1,"colorOption":"8","playDuration":5000,"orderedByY":false,"yZoomedDataMax":-75.673954,"showTrails":false,"iconType":"BUBBLE","orderedByX":false,"iconKeySettings":[],"duration":{"multiplier":1,"timeUnit":"Y"},"yZoomedDataMin":-84.009698,"dimensions":{"iconDimensions":["dim0"]},"xZoomedDataMax":36.497391,"nonSelectedAlpha":0.4,"yAxisOption":"3","time":"1992","yLambda":1,"xZoomedDataMin":34.024762,"uniColorForNonSelected":false}';


	  options['showXMetricPicker'] = false;
	  options['showYMetricPicker'] = false;
	  options['showXScalePicker'] = false;
	  options['showYScalePicker'] = false;
	  options['showChartButtons'] = false;

	  options['width'] = 850;
	  options['height'] = 400;
	  options['vAxis.title'] = 'Latitude';

    //get_screen_size();

      google.load('visualization', '1', {'packages':['motionchart']});
      google.setOnLoadCallback(drawChart);

      function drawChart() {
        display_loading_indicator();
        display_selector(1);

        var query = new google.visualization.Query(datasets[1]);
        query.send(handleQueryResponse);
      }

      function handleQueryResponse(response) {
      	if (response.isError()) {
      	  alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
      	  return;
      	}

      	var data = response.getDataTable();
      	if (chart == null){
      	  var chart = new google.visualization.MotionChart(document.getElementById('chart_div'));
      	}

        chart.draw(data, options);
      }

      function select_sector(dataset_index){
        display_loading_indicator();
      	var query = new google.visualization.Query(datasets[dataset_index]);
        query.send(handleQueryResponse);
      }

      function display_loading_indicator(){
        // This gif comes from http://www.jimpunk.net/Loading/wp-content/uploads/loading1.gif
        document.getElementById("chart_div").innerHTML = "<img src='images/loading1.gif' alt='loading...'/>";
      }

      function display_selector(checked){
        var formHTML = "<form>";
        for (var i=0; i<industries.length; i++){
        	formHTML +="<input type=\"radio\" name=\"industry\" value=" + i
        	       + "\" onclick=\"select_sector(\'" + i + "\')\" "
        	       + ((checked==i)?"checked":"") + ">" + industries[i] + "<br>";
        }

        formHTML += "</form>";

        document.getElementById("selector_div").innerHTML = formHTML;
      }

      function get_screen_size(){
      // from http://stackoverflow.com/questions/3437786/how-to-get-web-page-size-browser-window-size-screen-size-in-a-cross-browser-wa
        var w = window,
        d = document,
        e = d.documentElement,
        g = d.getElementsByTagName('body')[0],
        x = w.innerWidth || e.clientWidth || g.clientWidth,
        y = w.innerHeight|| e.clientHeight|| g.clientHeight;
        alert("width:"+x+"; height:"+y);
      }
  	</script>
  </head>

  <body>
    <h2>NC Employment data 1992-2012 with Google Motion Charts</h2>
    <table>
      <tr>
        <td valign="top" style="vertical-align:text-top;white-space:nowrap">
          <h3>Choose an Industry Sector and press
          <br>"Play" to show changes over time</h3>
          <div id="selector_div"></div>
        </td>
        <td>
          <div id="chart_div" style="width: 1000px; height: 500px;"></div>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          This interactive visualization was created with
          <a href='https://developers.google.com/chart/interactive/docs/gallery/motionchart'>Google Motion Charts</a>, which uses Flash,
          which doesn't work on mobile.
          <br>The employment + wage data from
          <a href='http://esesc23.esc.state.nc.us/d4/QCEWSelection.aspx'>http://esesc23.esc.state.nc.us/d4/QCEWSelection.aspx</a> was
          specially prepared for this demo
          <br> (not a live data source, see html source for details).
          <br> The data bubbles represent NC counties at their approximate
          geo locations, and the x and y axes are labeled with longitude and latitude.
          <br> There doesn't seem to be a way to turn off axis labels.
          <br> Although Google Motion Charts look best when the the bubbles move around
          during animation, here they can only change size and color.
          <br>Unfortunately, I couldn't find a way to display a map of North Carolina in the background.
          <br>
          <br>Please ignore the query timeout errors. If the demo doesn't work in Internet Explorer, please try Chrome or Firefox.
	  <div id="debug_info"></div>
        </td>
      </tr>
    </table>
  </body>
</html>