-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathmapTemplate.html
72 lines (70 loc) · 2.37 KB
/
mapTemplate.html
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>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.min.js">
</script>
<script src="http://d3js.org/topojson.v1.min.js">
</script>
<script src="datamaps.usa.js">
</script>
<h2>
Twitter Sentiment for Keyword
### insert keyword here ###
</h2>
<div id="container1" style="position: relative; width: 80%; max-height: 800px;">
</div>
<script>
var series = [
### insert state data here ###
];
// Datamaps expect data in format:
// { "USA": { "fillColor": "#42a844", numberOfWhatever: 75},
// "FRA": { "fillColor": "#8dc386", numberOfWhatever: 43 } }
var dataset = {};
// 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)
var onlyValues = series.map(function(obj){ return obj[1]; });
var minValue = Math.min.apply(null, onlyValues),
maxValue = Math.max.apply(null, onlyValues);
// create color palette function
// color can be whatever you wish
var paletteScale = 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]
var iso = item[0],
value = item[1];
dataset[iso] = { numberOfThings: value, fillColor: paletteScale(value) };
});
var map = new Datamap({
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) {
return geo['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>