Skip to content

Instantly share code, notes, and snippets.

@yohman

yohman/index.html

Created October 13, 2011 22:11
Show Gist options
  • Save yohman/1285695 to your computer and use it in GitHub Desktop.
Save yohman/1285695 to your computer and use it in GitHub Desktop.
Download ZIP
Tweemo
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Twitter Smash</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.29.1"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.29.1"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:500' rel='stylesheet' type='text/css'>
<link href="http://jqueryui.com/themes/base/jquery.ui.all.css" type="text/css" rel="stylesheet" />
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="https://www.google.com/jsapi?key=ABQIAAAAtHf2Vbojx_f9l2digk62nRR721nvlaDHrh7xkOtCxSM-c80RpRRMoUR4qEAqmJpECcqpdsdEs7YdIw" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">
//Load libraries
google.load("jquery", "1.6.2");
google.load("jqueryui", "1.8.16");
</script>
<style type="text/css">
body {
background:black;
overflow: hidden;
margin: 0;
font: 14px "Ubuntu", sans-serif;
}
svg {
background:#efefef;
position:absolute;
top:0px;
z-index:0;
}
.popup {
background:white;
border:1px solid gainsboro;
padding:5px;
min-width: 150px;
}
rect {
fill: none;
pointer-events: all;
}
line {
stroke: #000;
stroke-width: 1.5px;
}
.string, .regexp {
color: #f39;
}
.keyword {
color: #00c;
}
.comment {
color: #555;
}
.number {
color: #369;
}
.class, .special {
color: #1181B8;
}
path.link {
fill: none;
stroke:#999;
stroke-width: 2px;
}
marker#licensing {
fill: lightgreen;
}
path.link.licensing {
stroke: lightgreen;
}
path.link.resolved {
stroke-dasharray: 0,2 1;
}
circle {
fill: #ccc;
stroke: #333;
opacity: 0.8;
}
text {
font:10px Tahoma, Geneva, sans-serif;
pointer-events: none;
}
text.shadow {
stroke: #fff;
stroke-width: 3px;
}
.link {
stroke: #ccc;
}
.nodetext {
pointer-events: none;
font: 10px sans-serif;
color: white;
stroke: #ccc;
}
</style>
<script type="text/javascript">
/* =============================================================================== **
jQuery UI
** =============================================================================== */
var emotions = ['angry','fear','happy','like','nervous','relief','sad','shame','surprise','unpleasant'];
var days = ['3.11','3.12','3.13','3.14','3.15','3.16','3.17','3.18','3.19','3.20','3.21','3.22','3.23','3.24','3.25','3.26','3.27','3.28','3.29','3.30','3.31','4.01','4.02','4.03','4.04','4.05','4.06','4.07','4.08','4.09','4.10'];
var records = 50;
var day = days[0];
/**
*
* credits for this plugin go to brandonaaron.net
*
* unfortunately his site is down
*
* @param {Object} up
* @param {Object} down
* @param {Object} preventDefault
*/
jQuery.fn.extend({
mousewheel: function(up, down, preventDefault) {
return this.hover(
function() {
jQuery.event.mousewheel.giveFocus(this, up, down, preventDefault);
},
function() {
jQuery.event.mousewheel.removeFocus(this);
}
);
},
mousewheeldown: function(fn, preventDefault) {
return this.mousewheel(function(){}, fn, preventDefault);
},
mousewheelup: function(fn, preventDefault) {
return this.mousewheel(fn, function(){}, preventDefault);
},
unmousewheel: function() {
return this.each(function() {
jQuery(this).unmouseover().unmouseout();
jQuery.event.mousewheel.removeFocus(this);
});
},
unmousewheeldown: jQuery.fn.unmousewheel,
unmousewheelup: jQuery.fn.unmousewheel
});
jQuery.event.mousewheel = {
giveFocus: function(el, up, down, preventDefault) {
if (el._handleMousewheel) jQuery(el).unmousewheel();
if (preventDefault == window.undefined && down && down.constructor != Function) {
preventDefault = down;
down = null;
}
el._handleMousewheel = function(event) {
if (!event) event = window.event;
if (preventDefault)
if (event.preventDefault) event.preventDefault();
else event.returnValue = false;
var delta = 0;
if (event.wheelDelta) {
delta = event.wheelDelta/120;
if (window.opera) delta = -delta;
} else if (event.detail) {
delta = -event.detail/3;
}
if (up && (delta > 0 || !down))
up.apply(el, [event, delta]);
else if (down && delta < 0)
down.apply(el, [event, delta]);
};
if (window.addEventListener)
window.addEventListener('DOMMouseScroll', el._handleMousewheel, false);
window.onmousewheel = document.onmousewheel = el._handleMousewheel;
},
removeFocus: function(el) {
if (!el._handleMousewheel) return;
if (window.removeEventListener)
window.removeEventListener('DOMMouseScroll', el._handleMousewheel, false);
window.onmousewheel = document.onmousewheel = null;
el._handleMousewheel = null;
}
};
$(document).ready(function() {
$(document).mousemove(function(e){
$('#popup').css('left', e.pageX+10);
$('#popup').css('top', e.pageY-30);
//$('#popup').css('padding', '5px');
});
$(window).resize(function() {
resize();
});
//allow pressing "enter"
$('#search').keypress(function(e) {
if(e.which == 13) {
getTweemoData($('#search').val());
}
});
$("body").mousewheel(function(i,intDelta){
if (intDelta > 0 ) explode();
if (intDelta < 0 ) implode();
});
});
$(function() {
$("#dialog").dialog({modal:true, height:400, width: 600, autoOpen:false});
$( "#slider" ).slider({
value:0,
min: 0,
max: (days.length-1),
step: 1,
slide: function( event, ui ) {
$('#search-big-display').html(days[ui.value])
getSendaiData(records,days[ui.value])
}
});
$( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
});
$.extend({
getUrlVars: function(){
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
},
getUrlVar: function(name){
return $.getUrlVars()[name];
}
});
/* =============================================================================== **
Init
** =============================================================================== */
function init()
{
color = d3.scale.category10();
force = d3.layout.force()
.gravity(0)
.distance(100)
.charge(-20)
.friction(1.05)
.size([w, h]);
nodes = force.nodes(),
links = force.links();
$.each(emotions,function(i,val){
nodes.push({type: i, x: ((i+1) * 2 * w / (emotions.length*2))-(w / (emotions.length*2)), y: h, fixed: true, name:val, id: val, connections: 0});
// if(i < 5)
// {
// nodes.push({type: i, x: (i+1) * w / 6, y: 2 * h / 6, fixed: true, name:val, id: val, connections: 200});
// }
// else
// {
// nodes.push({type: i, x: (i-4) * w / 6, y: 4 * h / 6, fixed: true, name:val, id: val, connections: 200});
// }
})
vis = d3.select("body").append("svg:svg")
.attr("width", w)
.attr("height", h);
r = 6;
force.on("tick", function(e) {
vis.selectAll("circle.node")
//.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
//keep in bounds
.attr("cx", function(d) { return d.x = Math.max(r, Math.min(w - r, d.x)); })
.attr("cy", function(d) { return d.y = Math.max(r, Math.min(h - r, d.y)); });
vis.selectAll("text")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
vis.selectAll("line.link")
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
//Gravity pull towards each emotion bubble
// nodes.forEach(function(node) {
// var k = e.alpha * .1;
// var center = nodes[node.type];
// node.x += (center.x - node.x) * k;
// node.y += (center.y - node.y) * k;
// });
});
restart();
//if q is defined in url, go straight to getting data
var q = $.getUrlVar('q');
if(typeof q !== 'undefined')
{
//setInterval("getTweemoData('"+q+"')",5000);
getTweemoData(q);
}
}
/* =============================================================================== **
Restart
** =============================================================================== */
function hex2rgb(hexStr){
// note: hexStr should be #rrggbb
var hex = parseInt(hexStr.substring(1), 16);
var r = (hex & 0xff0000) >> 16;
var g = (hex & 0x00ff00) >> 8;
var b = hex & 0x0000ff;
return 'rgba('+r+','+g+','+b+',0.1)';
}
function restart() {
var link = vis.selectAll("line.link")
.data(links, function(d) { return d.source.id + "-" + d.target.id; });
link.enter().insert("svg:line", "circle.node")
.attr("class", "link");
link.exit().remove();
var node = vis.selectAll("circle.node")
.data(d3.values(nodes), function(d) { return d.id;});
var nodeEnter = node.enter().append("svg:circle")
.attr("class", "node")
.call(force.drag);
//animate circle sizing
node
.transition()
.duration(1000)
.delay(0)
.attr("r", function(d){
return (Math.sqrt(d.connections)*8);
})
// node
// .transition(function(d){console.log('transitioning')})
// .delay(3000)
// .attr("r", 1e-6)
// .each("end", function(d) {
// if(d.fixed)
// {
// }
// else
// {
// force.nodes().shift();
// }
// })
// .remove();
node
.style("fill", function(d) {
if(d.fixed)
{
// return hex2rgb(color(d.type))
return color(d.type);
}
else
{
return color(d.type);
}
})
.style("stroke", function(d){
if(d.fixed)
{
return hex2rgb(color(d.type));
}
else
{
return hex2rgb(color(d.type));
// return "#fff";
}
})
.style("stroke-width", function(d){
if(d.fixed)
{
return 0;
}
else
{
return 2;
}
})
.on("mouseover", function(d) {
if(d.fixed)
{
showThumb(d,d.tweet)
}
})
// .on("click", function(d){
// node
// .transition()
// .duration(500)
// .delay(0)
// .attr("r", function(d){
// return (Math.sqrt(d.connections));
// })
// })
// .on("click", function(d) {
// if(d.type !=='target')findTwitterUser(d.name,d,d.type);
// getLiveData(d.name);
// })
.on("mouseout", function() {
$('#popup').hide();
$('#popup').html('');
})
vis.selectAll("text")
.data(d3.values(nodes))
.enter()
.append("svg:text")
.attr("class", "nodetext")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name });
node.exit().remove();
force.start();
}
/* =============================================================================== **
Globals
** =============================================================================== */
var w,h,force,nodes,links,vis;
var w = $(window).width(),
h = $(window).height();
var livecounter = 0;
var next_page = '';
var refresh_url = '';
var q = '';
var blackholeindex;
var refresh = false;
var nodes = [];
var links = [];
var tweetids = [];
var newnodes = [];
var nodeids = [];
var newnodeids = [];
var tweemos = [];
/* =============================================================================== **
Get Tweemo's
** =============================================================================== */
var emotions = ['EMOTIONS:AFFECTION','EMOTIONS:GLORY','EMOTIONS:EXPRESSIVE BEHAVIOR','EMOTIONS:SADNESS','EMOTIONS:AGGRESSION','EMOTIONS:POSITIVE AFFECT','EMOTIONS:ANXIETY'];
var timer;
function getTweemoData(q)
{
console.log('getting tweemos...')
$('#search-big-display').html(q)
$('#map_canvas').fadeOut();
q = q;
var url = 'http://otterhound.ats.ucla.edu/~dave/hcnow/trunk/tweemo/tweemo.py/analyze?keyword='+q;
$.getJSON(url, function(data)
{
console.log(data)
//
$.each(data.summary,function(i,val){
// console.log(val)
$.each(emotions,function(h,emo){
console.log(val[emo])
if(typeof val[emo] !== 'undefined')
{
nodes[$.inArray(emo, emotions)].count = val[emo].length;
nodes[$.inArray(emo, emotions)].connections = val[emo].length*50;
}
})
})
$.each(data.tweets,function(i,val){
var emotioncounter = 0;
$.each(emotions,function(h,emo){
if(typeof val.category_count[emo] !== 'undefined')
{
emotioncounter++;
var words = val.category_words[emo]
if($.inArray(val.id,nodeids) == -1)
{
var node =
{
name: words[0],
id: val.id,
tweet: val.tweet,
type: $.inArray(emo, emotions),
connections:parseInt(val.category_count[emo])
}
nodes.push(node);
nodeids.push(val.id)
}
}
//last record
if(h == emotions.length-1)
{
if(emotioncounter == 0)
{
var node =
{
name: '',
id: val.id,
tweet: val.tweet,
type: 0,
connections:1
}
//nodes.push(node);
//nodeids.push(val.id)
}
}
})
if(i == data.tweets.length-1)
{
restart();
//run every 10 seconds!
}
});//end .each
});//end getjson
}
/* =============================================================================== **
Get Sendai Data
** =============================================================================== */
function getSendaiData(records,thisday)
{
day = thisday;
newnodeids.length=0;
$('#search-big-display').html(day)
$('#map_canvas').fadeOut();
q = q;
livecounter = 0;
if(typeof records == 'undefined') records = 20;
if(typeof day == 'undefined') day = 3.11;
var url = 'http://otterhound.ats.ucla.edu/~yohman/smash/json/json_sendai.php?records='+records+'&day='+day;
livecounter++;
$.getJSON(url, function(data)
{
$( "#slider" ).slider( "option", "value", $.inArray(day,days));
$.each(data.result,function(i,val){
//if node exists, append the tweet
var nodeexists = false;
$.each(nodes,function(i,val2){
//if node exists, just change the total
if(val2.id == val.target)
{
nodeexists = true;
nodes[i].connections = parseInt(val.total);
}
//last record
if(i == (nodes.length-1))
{
//create node if it does not exist
if(!nodeexists)
{
var node =
{
name: val.target,
id: val.target,
type: $.inArray(val.emotion, emotions),
tweets: [val],
connections:parseInt(val.total)
}
nodes.push(node);
nodeids.push(val.target);
}
}
});
newnodeids.push(val.target);
//last record
if(i == (data.result.length-1))
{
//Delete any nodes that do not exist in new search
var deleteus = [];
$.each(nodeids,function(i,val){
//if node is not found in the new batch of nodes
if($.inArray(nodeids[i],newnodeids) < 0){
deleteus.push(nodeids[i])
}//end if
//last record
if(i == (nodeids.length-1))
{
$.each(deleteus,function(i,delid){
nodeids.splice($.inArray(delid,nodeids),1);
for(i=0;i<nodes.length;i++){
if(nodes[i].id == delid) nodes.splice(i,1);
}
})
}
})//end each
restart();
}
});//end .each
});//end getjson
}
/* =============================================================================== **
Get tweets
** =============================================================================== */
function getLiveData(q,refresh)
{
$('#map_canvas').fadeOut();
q = q;
livecounter = 0;
if(livecounter == 0)
{
var url = 'http://search.twitter.com/search.json?callback=?&rpp=100&q='+q;
if(typeof lat !== 'undefined')
{
//geocode it, and then get the lat/lon
url += '&geocode='+lat+','+lng+','+$("#searchradius").val();
$('#search-big-display').append(' ' +loc);
}
}
else
{
var url = 'http://search.twitter.com/search.json'+url+'&callback=?';
}
livecounter++;
$.getJSON(url, function(data)
{
if(data.results.length == 0)
{
if(livecounter == 1)
{
livecounter = 0;
alert('no results found');
return false;
}
else
{
//drawD3();
}
}
next_page = data.next_page;
refresh_url = data.refresh_url;
$.each(data.results,function(i,val){
//Only do anything if this tweet has never been accessed
if($.inArray(val.id,tweetids) == -1)
{
tweetids.push(val.id);
//if node exists, append the tweet
var tonodeexists = false;
var fromnodeexists = false;
//if first ever node, create it:
if(nodes.length == 0)
{
//source
var sourcenode =
{
name: val.from_user,
id: val.from_user,
type: 0,
profile_image_url: val.profile_image_url,
tweets: [val],
connections: 1
}
if(typeof val.to_user !== "undefined")
{
sourcenode.type = 1;
}
nodes.push(sourcenode);
if(typeof val.to_user !== "undefined")
{
sourcenode.type = 1;
var targetnode =
{
name: val.from_user,
id: val.from_user,
type: 2,
tweets: [val],
connections: 1
}
nodes.push(targetnode);
}
}
else
{
$.each(nodes,function(i,val2){
if(val2.id == val.from_user)
{
fromnodeexists = true;
nodes[i].connections = nodes[i].connections+1;
nodes[i].tweets.push(val)
}
if(val2.id == val.to_user)
{
tonodeexists = true;
nodes[i].connections = nodes[i].connections+1;
nodes[i].tweets.push(val)
}
//last record
if(i == (nodes.length-1))
{
if(!fromnodeexists)
{
var sourcenode =
{
name: val.from_user,
id: val.from_user,
type: 0,
profile_image_url: val.profile_image_url,
tweets: [val],
connections: 1
}
if(typeof val.to_user !== "undefined")
{
sourcenode.type = 1;
}
nodes.push(sourcenode);
}
if(!tonodeexists)
{
if(typeof val.to_user !== "undefined")
{
var targetnode =
{
name: val.to_user,
id: val.to_user,
type: 2,
tweets: [val],
connections: 1
}
nodes.push(targetnode);
}
}
}
});
}
//Add Link
if(typeof val.to_user !== 'undefined')
{
//create the link record
var link = {};
link.tweetid = val.id;
link.source = findNodePos(val.from_user);
link.target = findNodePos(val.to_user);
link.type = 'suit';
link.tweets = [];
link.tweets.push(val);
links.push(link);
}
restart();
//last record
if(i == data.results.length-1)
{
if(refresh)
{
//restart();
}
else
{
//restart();
}
return false;
//drawPV();
if(nodes.length < 200)
{
if(typeof next_page == "undefined")
{
//drawD3();
}
else
{
//getLiveData(q,next_page);
}
}
else
{
//drawD3();
//drawPV();
}
}
}
});//end .each
});
}
function findNodePos(element)
{
var foundin = 0;
$.each(nodes,function(i,val){
if (val.id == element)
{
foundin = i;
}
});
return foundin;
}
/* =============================================================================== **
Display stuff
** =============================================================================== */
function showThumb(d,tweet)
{
console.log(d)
if(typeof tweet == 'undefined'){
var box = '<table cellpadding="2"><tr><td colspan=2><span class="connections">'+d.count+'</span><br><span class="fieldname">connections</span></td></tr>';
box += '<tr><td align="right"><span class="fieldname">Emotion </span></td><td>'+d.name+'</a></td></tr>';
// box += '<tr><td align="right"><span class="fieldname">type </span></td><td>'+dtype+'</td></tr>';
box += '</table>';
}
else
{
var box = '<table cellpadding="2"><tr><td><img src="'+tweet.profile_image_url+'"></td><td align="center"><span class="connections">'+tweet.connections+'</span><br><span class="fieldname">connections</span></td></tr>';
box += '<tr><td align="right"><span class="fieldname">twitter </span></td><td><a target="_blank" href="https://twitter.com/#!/'+tweet.from_user+'">'+tweet.from_user+'</a></td></tr>';
// box += '<tr><td align="right"><span class="fieldname">type </span></td><td>'+tweet.type+'</td></tr>';
box += '</table>';
box += '<div class="tweet"><span class="time">'+tweet.created_at+'</span><br>'+tweet.text+'</div>';
}
$('#popup').fadeIn();
$('#popup').html('<div class="popup">'+box+'</div>');
}
var type = '';
function findTwitterUser(id,d,type)
{
$('#sidepanel').fadeOut();
$('#sidepanel').fadeIn('slow');
resize();
var box = '<table cellpadding="2"><tr><td><img src="'+d.profile_image_url+'"></td><td align="center"><span class="connections">'+d.connections+'</span><br><span class="fieldname">connections</span></td></tr>';
box += '<tr><td align="right"><span class="fieldname">twitter </span></td><td><a target="_blank" href="https://twitter.com/#!/'+d.id+'">'+d.name+'</a></td></tr>';
box += '<tr><td align="right"><span class="fieldname">type </span></td><td>'+d.type+'</td></tr>';
box += '</table>';
$.each(d.tweets,function(i,val){
box += '<div class="tweet"><span class="time">'+val.created_at+'</span><br>'+val.text+'</div>';
});
$('#sidepanel').html(box);
/*
if(type == 'source')
{
var url = 'https://api.twitter.com/1/users/lookup.json?callback=?&screen_name='+id;
}
else
{
var url = 'https://api.twitter.com/1/users/lookup.json?callback=?&screen_name='+id;
//var url = 'https://api.twitter.com/1/users/lookup.json?callback=?&user_id='+id;
}
$.getJSON(url, function(data)
{
var box = '<table cellpadding="2"><tr><td><img src="'+data[0].profile_image_url+'"></td><td align="center"><span class="connections">'+(d.connections)+'</span><br><span class="fieldname">connections</span></td></tr>';
box += '<tr><td align="right"><span class="fieldname">name </span></td><td>'+data[0].name+'</td></tr>';
box += '<tr><td align="right"><span class="fieldname">location </span></td><td>'+data[0].location+'</td></tr>';
box += '<tr><td align="right"><span class="fieldname">twitter </span></td><td><a href="https://twitter.com/#!/'+data[0].screen_name+'">'+data[0].screen_name+'</td></tr>';
box += '<tr><td align="right"><span class="fieldname">twitter </span></td><td><a href="?q='+data[0].screen_name+'">view connections</a></td></tr>';
box += '</table>';
$.each(d.tweets,function(i,val){
box += '<div class="tweet"><span class="time">'+val.created_at+'</span><br>'+val.text+'</div>';
});
$('#sidepanel').html(box);
});
*/
}
function getTwitterName(id,d)
{
var url = 'https://api.twitter.com/1/users/lookup.json?callback=?&user_id='+id;
$.getJSON(url, function(data)
{
return data[0].name;
});
}
/* =============================================================================== **
Redraw
** =============================================================================== */
function resize()
{
var h = $(window).height();
var w = $(window).width();
//svg window
//svg.attr("width",w);
//svg.attr("height",h);
//side panel
h = h - 145;
$('#sidepanel').height(h);
}
/* =============================================================================== **
Controls
** =============================================================================== */
function explode()
{
force.charge(force.charge()-10);force.start();
}
function implode()
{
var value = force.charge()+10;
if(value > 50) value = 50;
force.charge(value);force.start();
}
function gravityUp()
{
var value = force.gravity()+0.01;
if(value > 1) value = 1;
force.gravity(value);force.start();
}
function gravityDown()
{
var value = force.gravity()-0.01;
if(value < 0) value = 0;
force.gravity(value);force.start();
}
function next()
{
if($.inArray(day,days) < days.length)
{
getSendaiData(records,days[($.inArray(day,days)+1)])
}
}
/* =============================================================================== **
Google Maps Autocomplete
** =============================================================================== */
var map,lat,lng, loc,searchradius;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(80,180),
zoom: 1,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map
});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
infowindow.close();
var place = autocomplete.getPlace();
lat = place.geometry.location.lat();
lng = place.geometry.location.lng();
loc = place.name;
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
}
var image = new google.maps.MarkerImage(
place.icon,
new google.maps.Size(71, 71),
new google.maps.Point(0, 0),
new google.maps.Point(17, 34),
new google.maps.Size(35, 35));
marker.setIcon(image);
marker.setPosition(place.geometry.location);
var address = '';
if (place.address_components) {
address = [(place.address_components[0] &&
place.address_components[0].short_name || ''),
(place.address_components[1] &&
place.address_components[1].short_name || ''),
(place.address_components[2] &&
place.address_components[2].short_name || '')
].join(' ');
}
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
//infowindow.open(map, marker);
});
// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
function setupClickListener(id, types) {
var radioButton = document.getElementById(id);
google.maps.event.addDomListener(radioButton, 'click', function() {
autocomplete.setTypes(types);
});
}
setupClickListener('changetype-all', []);
setupClickListener('changetype-establishment', ['establishment']);
setupClickListener('changetype-geocode', ['geocode']);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body style="" onLoad="init()">
<!--
<div id="help" style="position:absolute;top:100px;margin:auto;width:400px;padding:10px;background:white;border:1px solid silver; z-index:11">
<ol>
<li>Enter a search term or twitter username (ex. "<a href="javascript:void(0)" onClick="init('wayne rooney')">wayne rooney</a>", "barackobama")</li>
<li>Optionally... enter a location</li>
</ol>
<div style="margin:auto;width:50px;border:1px solid #555;padding:4px;">Let's get smashing</div>
</div>
<div id="fullscreen" style="z-index:10"></div>
-->
<div style="padding:5px;position:absolute;top:0px; text-align:center height:60px; background:#444; width:100%; z-index:1; opacity:0.9;">
<table align="" cellpadding="0" cellspacing="0" border="0" style="margin:auto;">
<tr>
<td width="250" valign="top" rowspan="2">
<span style="padding:5px; font-size:32px;color:gainsboro;">Tweemo</span>
</td>
<td valign="top">
<span style="padding:5px; font-size:12px;color:gainsboro;">What</span>
</td>
<td valign="top">
<span style="padding:5px; font-size:12px;color:gainsboro;">Where (optional)</span>
</td>
<td valign="top">
</td>
<td valign="top">
</td>
</tr>
<tr>
<td valign="top">
<input type="text" id="search" class="search" value="">
</td>
<td valign="top">
<input id="searchTextField" class="search" style="width:300px;" type="text" onFocus="$('#map_canvas').fadeIn();google.maps.event.trigger(map, 'resize') ">
<div id="map_canvas" style="width:300px;height:300px; display:none;"></div>
</td>
<td valign="top">
<select id="searchradius">
<option value="10mi" selected>10 mile radius</option>
<option value="50mi">50 mile radius</option>
<option value="100mi">100 mile radius</option>
</select>
</td>
<td valign="top">
<input value="smash it" class="" type="submit" onClick="getTweemoData($('#search').val())">
</td>
</tr>
</table>
</div>
<!--
Copyright
-->
<div style="position:absolute;bottom:10px;right:10px;color:#818181;display:block;z-index:2" id="copy"><a href="http://gis.yohman.com" target="_blank">yohman</a> &copy; 2011</div>
<!--
Time Slider
-->
<div id="search-big-display" style="position:absolute;bottom:10px;left:10px;color:#818181;display:block;z-index:2"></div>
<!-- <div id="next" style="position:absolute;bottom:10px;left:300px;color:#818181;display:block;z-index:100;font-size: 140px;cursor:pointer" onclick="next()">></div>
<div id="slider" style="z-index:100;width:250px;bottom:10px;left:10px;position: absolute;"></div>-->
<!--
Side panel for tweet display
-->
<div id="sidepanel" style="z-index:100;"></div>
<div id="displaydivs" style="display:none">
<!--
Gravity
-->
<div id="gravitycontrols" class="round" style="position:absolute; top:20px; left:15px; cursor:pointer; width:45px; height:110px; background:gainsboro;">
<div id="explode" style="position:relative; top:10px; left:9px; cursor:pointer;" onClick="gravityUp()"><img src="http://cdn1.iconfinder.com/data/icons/iphone_toolbar_icons/iphone_toolbar_icons/plus.png"></div>
<div id="explode" style="position:relative; top:32px; left:9px; cursor:pointer;" onClick="gravityDown()"><img src="http://cdn1.iconfinder.com/data/icons/iphone_toolbar_icons/iphone_toolbar_icons/minus.png"></div>
<div style="position:relative; top:40px; left:8px;"><span style="font-size:9px">gravity</span></div>
</div>
<!--
Charge in out
-->
<div id="chargecontrols" class="round" style="position:absolute; top:140px; left:15px; cursor:pointer; width:45px; height:110px; background:gainsboro;">
<div id="explode" style="position:relative; top:10px; left:9px; cursor:pointer;" onClick="explode()"><img src="http://cdn1.iconfinder.com/data/icons/iphone_toolbar_icons/iphone_toolbar_icons/plus.png"></div>
<div id="explode" style="position:relative; top:32px; left:9px; cursor:pointer;" onClick="implode()"><img src="http://cdn1.iconfinder.com/data/icons/iphone_toolbar_icons/iphone_toolbar_icons/minus.png"></div>
<div style="position:relative; top:40px; left:10px;"><span style="font-size:9px">charge</span></div>
</div>
</div>
<!--
Popup
-->
<div id="popup" style=""></div>
</body>
</html>
Raw
style.css
path.link {
fill: none;
stroke: #666;
stroke-width: 1.5px;
}
marker#licensing {
fill: green;
}
path.link.licensing {
stroke: green;
}
path.link.resolved {
stroke-dasharray: 0,2 1;
}
circle {
fill: #ccc;
stroke: #333;
stroke-width: 1.5px;
}
text {
font: 10px sans-serif;
pointer-events: none;
}
text.shadow {
stroke: #fff;
stroke-width: 3px;
stroke-opacity: .8;
}
body {
margin: 0;
}
#fullscreen {
position:absolute;
width:100%;
height:100%;
background:white;
opacity:0.3;
}
#sidepanel {
border:5px solid gray;
position:absolute;
top:80px;
right:10px;
padding:10px;
width:300px;
height:400px;
overflow:auto;
background:white;
display:none;
}
a {
color: #cf6557;
text-decoration:none;
}
.topic {
padding: 10px;
margin-bottom:10px;
background: gainsboro;
font-size: 10px;
cursor:pointer;
}
.fieldname {
font-family:Arial, Helvetica, sans-serif;
color: gray;
}
.connections {
font-size:42px;
color:#069;
}
.tweet {
font-size:21px;
font-family:Georgia, "Times New Roman", Times, serif;
margin-top:10px;
background:#EAEAEA;
padding:5px;
margin-bottom: 5px;
}
.time {
font-size:12px;
color:#F00;
}
.round {
-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;
}
#popup {
display:none;
position:absolute;
z-index:9999;
opacity:0.9;
filter:alpha(opacity=90);
text-align:left;
max-width:300px;
max-height:300px;
overflow:auto;
}
.search {
width: 200px;
font-size:24px;
}
#search-big-display {
position:absolute;
left:10px;
bottom:10px;
color:white;
font-size:140px;
opacity:.1;
}
/*
#search-box {
margin:auto;
width:800px;
position:relative;
top:50px;
height:300px;
background:white;
z-index:10;
}
#search-inside {
padding:20px;
margin-bottom:10px;
background:gainsboro;
}
.search-box-title {
font-size:100px;
color: #444;
opacity: 0.5;
margin-left: 50px;
font-family: 'Fanwood Text', sans-serif;
top: 40px;
position: relative;
}
*/
.search-box-title {
margin-left: 50px;
font-family: 'Fanwood Text', sans-serif;
top: 40px;
position: relative;
font-size: 70px;
color: #000;
opacity: 0.8;
margin-bottom: 20px;
font-family: Helvetica, Arial, sans-serif;
position: relative:
font-weight: bold;
marginleft: 20px;
}
#search-box {
margin:auto;
width:800px;
position:relative;
top:50px;
height:300px;
background:white;
z-index:10;
border: 3px solid #666;
}
#search-inside {
padding:20px;
margin-bottom:10px;
background:gainsboro;
margin-top: 40px;
font-family: Helvetica, Arial, sans-serif;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment