twitterMappingLab/mapTemplate.html at master · NNHSComputerScience/twitterMappingLab · 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
<!DOCTYPE html>
<metacharset="utf-8">
<body>
<scriptsrc="http://d3js.org/d3.v3.min.js">
</script>
<scriptsrc="http://d3js.org/topojson.v1.min.js">
</script>
<scriptsrc="datamaps.usa.js">
</script>
<h2>
	Twitter Sentiment for Keyword
	### insert keyword here ###
</h2>
<divid="container1" style="position: relative; width: 80%; max-height: 800px;">
</div>
<script>

varseries=[
 ### insertstatedatahere ###
];
// Datamaps expect data in format:
// { "USA": { "fillColor": "#42a844", numberOfWhatever: 75},
// "FRA": { "fillColor": "#8dc386", numberOfWhatever: 43 } }
vardataset={};
// We need to colorize every state based on "numberOfWhatever"
// colors should be uniq for every value.
// For this purpose we create palette(using min/max series-value)
varonlyValues=series.map(function(obj){returnobj[1];});
varminValue=Math.min.apply(null,onlyValues),
maxValue=Math.max.apply(null,onlyValues);
// create color palette function
// color can be whatever you wish
varpaletteScale=d3.scale.linear()
.domain([minValue,maxValue])
.range(["#EFEFFF","#02386F"]);// blue color
// fill dataset in appropriate format
series.forEach(function(item){//
// item example value ["USA", 70]
variso=item[0],
value=item[1];
dataset[iso]={numberOfThings: value,fillColor: paletteScale(value)};
});

varmap=newDatamap({
scope: 'usa',
element: document.getElementById('container1'),
height: 500,
fills: {defaultFill: '#F5F5F5'},
data: dataset,
geographyConfig: {
borderColor: '#DEDEDE',
highlightBorderWidth: 2,
// don't change color on mouse hover
highlightFillColor: function(geo){
returngeo['fillColor']||'#F5F5F5';
},
// only change border
highlightBorderColor: '#B7B7B7',
// show desired information in tooltip
popupTemplate: function(geo,data){
// don't show tooltip if STATE don't present in dataset
if(!data){return;}
// tooltip content
return['<div class="hoverinfo">',
'<strong>',geo.properties.name,'</strong>',
'<br>Sentiment: <strong>',data.numberOfThings,'</strong>',
'</div>'].join('');
}
}
});
</script>
</body>