TwitterVisualization/map.html at master · BadJukeBox/TwitterVisualization · 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
73
74
75
76
77
78
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Average Tweet Density In San Diego</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.2/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.2/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<style>
.map-overlay {
    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    position: absolute;
    width: 25%;
    top: 0;
    left: 0;
    padding: 10px;
}

.map-overlay .map-overlay-inner {
    background-color: #fff;
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.20);
    border-radius: 3px;
    padding: 10px;
    margin-bottom: 10px;
}

.map-overlay h2 {
    line-height: 24px;
    display: block;
    margin: 0 0 10px;
}

.map-overlay .legend .bar {
    height: 10px;
    width: 100%;
    background: linear-gradient(to right, #2166AC, #B2182B);
}

.map-overlay input {
    background-color: transparent;
    display: inline-block;
    width: 100%;
    position: relative;
    margin: 0;
    cursor: ew-resize;
}
</style>


<div id='map'></div>


<div class='map-overlay top'>
    <div class='map-overlay-inner'>
        <h2>San Diego Tweets over 24 Hours</h2>
        <label id='Hour'></label>
        <input id='slider' type='range' min='0' max='23' step='1' value='0' />
    </div>
    <div class='map-overlay-inner'>
        <div id='legend' class='legend'>
            <div class='bar'></div>
            <div>Density (Tweets)</div>
        </div>
    </div>
</div>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="./Scripts/maptweets.js"></script>

</body>
</html>