Skip to content

Instantly share code, notes, and snippets.

@evandrix evandrix/index.html
Created Oct 26, 2013

Embed
What would you like to do?
Twitter data visualization
<!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
You can’t perform that action at this time.