Created
October 26, 2013 16:57
-
-
Save evandrix/7171855 to your computer and use it in GitHub Desktop.
Twitter data visualization
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <title>Tweets</title> | |
| <style type="text/css"> | |
| body { | |
| margin: 0; | |
| padding: 0 | |
| } | |
| </style> | |
| <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> | |
| <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script> | |
| <!--[if IE]> | |
| <script type="text/javascript" src="excanvas.compiled.js"></script> | |
| <![endif]--> | |
| <script type="text/javascript"> | |
| var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', | |
| 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; | |
| var days = ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]; | |
| var orgData = [127, 181, 244, 315, 627, 1060, 688866, 2132339, 2480417, 1951959, 0, 0]; | |
| var rawData = orgData.map(Math.sqrt); | |
| var colors = [ | |
| '#2f7ed8', | |
| '#0d233a', | |
| '#8bbc21', | |
| '#910000', | |
| '#1aadce', | |
| '#492970', | |
| '#f28f43', | |
| '#77a1e5', | |
| '#c42525', | |
| '#a6c96a' | |
| ]; | |
| var chart, settings; | |
| $(function() { | |
| settings = { | |
| chart: { | |
| renderTo: 'container', | |
| defaultSeriesType: 'area' | |
| }, | |
| title: {text:null}, | |
| xAxis: { | |
| tickInterval: 1, | |
| labels: { | |
| formatter: function() { | |
| return months[this.value]; | |
| } | |
| } | |
| }, | |
| yAxis: { | |
| min: 0, | |
| title: { | |
| text: 'Frequency count' | |
| }, | |
| labels: { | |
| enabled: true, | |
| formatter: function() { | |
| return parseInt((this.value*this.value)); | |
| } | |
| } | |
| }, | |
| tooltip: { | |
| formatter: function() { | |
| return months[this.x]+": <b>"+Highcharts.numberFormat(orgData[this.x], 0, null, ' ')+'</b> tweets'; | |
| } | |
| }, | |
| plotOptions: { | |
| area: { | |
| color: colors[0], | |
| pointStart: 0, | |
| marker: { | |
| enabled: true, | |
| symbol: 'circle', | |
| radius: 4, | |
| states: { | |
| hover: { | |
| enabled: true | |
| } | |
| } | |
| } | |
| } | |
| }, | |
| series: [{ | |
| name: 'Months', | |
| data: rawData | |
| }] | |
| }; | |
| chart = new Highcharts.Chart(settings); | |
| settings = { | |
| chart: { | |
| renderTo: 'container1', | |
| defaultSeriesType: 'area' | |
| }, | |
| title: {text:null}, | |
| xAxis: { | |
| tickInterval: 1, | |
| labels: { | |
| formatter: function() { | |
| return days[this.value]; | |
| } | |
| } | |
| }, | |
| yAxis: { | |
| min: 0, | |
| title: { | |
| text: 'Frequency count' | |
| }, | |
| labels: { | |
| enabled: true, | |
| formatter: function() { | |
| return this.value; | |
| } | |
| } | |
| }, | |
| tooltip: { | |
| formatter: function() { | |
| return days[this.x]+": <b>"+Highcharts.numberFormat(this.y, 0, null, ' ')+'</b> tweets'; | |
| } | |
| }, | |
| plotOptions: { | |
| area: { | |
| color: colors[2], | |
| pointStart: 0, | |
| marker: { | |
| enabled: true, | |
| symbol: 'circle', | |
| radius: 4, | |
| states: { | |
| hover: { | |
| enabled: true | |
| } | |
| } | |
| } | |
| } | |
| }, | |
| series: [{ | |
| name: 'Days of Week', | |
| data: [970082, 1000245, 970334, 1080828, 1094761, 1047772, 1092113] | |
| }] | |
| }; | |
| chart = new Highcharts.Chart(settings); | |
| var n = function (n){ return n > 9 ? "" + n: "0" + n; }; | |
| settings = { | |
| chart: { | |
| renderTo: 'container2', | |
| defaultSeriesType: 'area' | |
| }, | |
| title: { | |
| text: 'Tweets (Singapore/Asia) summary' | |
| }, | |
| subtitle: { | |
| text: '7256135 tweets from 2013-01-01 00:01:36 to 2013-10-25 01:16:06' | |
| }, | |
| xAxis: { | |
| tickInterval: 1, | |
| labels: { | |
| formatter: function() { | |
| return n(this.value)+":00";//<br/>-"+n(this.value)+":59"; | |
| } | |
| } | |
| }, | |
| yAxis: { | |
| min: 0, | |
| title: { | |
| text: 'Frequency count' | |
| }, | |
| labels: { | |
| enabled: true, | |
| formatter: function() { | |
| return this.value; | |
| } | |
| } | |
| }, | |
| tooltip: { | |
| formatter: function() { | |
| return (n(this.x)+":00")+ | |
| " <b>"+Highcharts.numberFormat(this.y, 0, null, ' ')+'</b> tweets'; | |
| } | |
| }, | |
| plotOptions: { | |
| area: { | |
| color: colors[6], | |
| pointStart: 0, | |
| marker: { | |
| enabled: true, | |
| symbol: 'circle', | |
| radius: 4, | |
| states: { | |
| hover: { | |
| enabled: true | |
| } | |
| } | |
| } | |
| } | |
| }, | |
| series: [{ | |
| name: 'Hours of Day', | |
| data: [381239, 339455, 292401, 250473, 225050, 213841, 226801, 236846, | |
| 246601, 261536, 267535, 284046, 290193, 290950, 297795, 302934, | |
| 304616, 306306, 329529, 340822, 372687, 390561, 405097, 398821] | |
| }] | |
| }; | |
| chart = new Highcharts.Chart(settings); | |
| var cont = $('<div></div>'); | |
| for (var i = 0; i < colors.length; i++) { | |
| var str = '<div style="width:16px;height:16px;display:inline-block;text-align:center;background-color:'+colors[i]+';">'+i+'</div>'; | |
| cont.append($(str)); | |
| } | |
| //$('body').prepend(cont); | |
| }); | |
| </script> | |
| <script type="text/javascript" src="http://www.highcharts.com/highslide/highslide-full.min.js"></script> | |
| <script type="text/javascript" src="http://www.highcharts.com/highslide/highslide.config.js" charset="utf-8"></script> | |
| <link rel="stylesheet" type="text/css" href="http://www.highcharts.com/highslide/highslide.css" /> | |
| </head> | |
| <body> | |
| <div id="container2" style="width: 1200px; height: 390px; margin: 0 auto;"></div> | |
| <div style="margin: 0 auto; width: 1200px;"> | |
| <span id="container1" style="width: 600px; height: 390px; float:left;"></span> | |
| <span id="container" style="width: 600px; height: 390px; float:left;"></span> | |
| <br style="clear:both" /> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment