forked from rukku/sheetsee-cache
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
116 lines (104 loc) · 5.1 KB
/
index.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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<html>
<head>
<title>Historical Disaster Data</title>
<script type="text/javascript" src="js/ICanHaz.js"></script>
<script src='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.js'></script>
<script src='js/jquery.js '></script>
<script type="text/javascript" src='js/d3.js'></script>
<script type="text/javascript" src='js/sheetsee.js'></script>
<link rel="shortcut icon" href="https://raw.github.com/jllord/sheetsee-cache/master/favicon-p.png"/>
<link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.css' rel='stylesheet' />
<link media="screen" rel="stylesheet" type="text/css" href="/css/style.css">
<link media="screen" rel="stylesheet" type="text/css" href="/css/site.css">
</head>
<body>
<div id="wrapper">
<h1>Historical Disaster Viewer</h1>
<!--
<small><a href="https://docs.google.com/spreadsheet/ccc?key=0Ao5u1U6KYND7dGN5QngweVJUWE16bTRob0d2a3dCbnc#gid=0" target="_blank">data source</a></small>
-->
<div id="map" class="container"></div>
<!-- <span id="sortChart" class="button"> Sort values</span> -->
<h3>Disasters in the Philippines</h3>
<div class="container">
<input id="tableFilter" type="text" placeholder="filter by.."></input>
<span class="clear button">Clear</span>
<span class="noMatches">no matches</span>
</div>
<div id="siteTable" class="container"></div>
<!--
<h3>Pennies from California</h3>
<div id="bar2" class="container"></div>
-->
<!-- <label><input type="checkbox"> Sort values</label> -->
</div><!-- end wrapper -->
<script id="siteTable" type="text/html">
<table>
<tr><th class="tHeader">Region</th><th class="tHeader">Province</th><th class="tHeader">Date</th><th class="tHeader">Year</th><th class="tHeader">Type</th><th class="tHeader">Dead</th><th class="tHeader">Inj</th><th class="tHeader">Mis</th></tr>
{{#rows}}
<tr class="{{id}}"><td>{{region}}</td><td>{{prov}}</td><td>{{date}}</td><td>{{year}}</td><td>{{type}}</td><td>{{dead}}</td><td>{{inj}}</td><td>{{mis}}</td></tr>
{{/rows}}
</table>
</script>
<script id="caliCoins" type="text/html">
<table>
<tr><th class="tHeader">City</th><th class="tHeader">Place Name</th><th class="tHeader">Year</th><th class="tHeader">Image</th></tr>
{{#rows}}
<tr class="{{id}}"><td>{{city}}</td><td>{{placename}}</td><td>{{year}}</td><td>{{image}}</td></tr>
{{/rows}}
</table>
</script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() { // IE6 doesn't do DOMContentLoaded
// reWriteTable(gData, null, tableClickListeners)
Sheetsee.makeTable(gData, "#siteTable")
Sheetsee.initiateTableFilter(gData, "#tableFilter", "#siteTable")
Sheetsee.makeTable(calCoins, "#caliCoins")
Sheetsee.initiateTableFilter(calCoins, "#caliFilter", "#caliCoins")
// initiateTableFilter(data, filterDiv, tableDiv)
var newData = Sheetsee.addUnitsLabels(gData, "placename", "year")
console.log('gData', gData[0])
// console.log('newData', newData[0])
})
</script>
<script type='text/javascript'>
var optionsJSON = ["city", "dead", "inj", "type"]
var geoJSON = Sheetsee.createGeoJSON(gData, optionsJSON)
var map = Sheetsee.loadMap("map")
Sheetsee.addTileLayer(map, 'examples.map-20v6611k')
var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 11)
addPopups(map, markerLayer)
function addPopups(map, markerLayer) {
markerLayer.on('click', function(e) {
var feature = e.layer.feature
var popupContent = '<h2>' + feature.opts.city + '</h2>' + '<h3>' + 'Disaster Type :' + feature.opts.type + '<h3>' + '<h3>' +'Dead: ' + feature.opts.dead + '</h3>'
e.layer.bindPopup(popupContent,{closeButton: false,})
})
}
</script>
<script type="text/javascript">
var colors = ["#BDBDBD", "#acacac", "#f0f0f0", "#D4C5C5", "#D4BBBB", "#EBC4C4", "#f0f0f0", "#D4C5C5", "#D4C5C5", "#BDBDBD", "#acacac"]
// var colors = ["#F78888", "#acacac"]
var calCoins = Sheetsee.getMatches(gData, "california", "state")
var calCityCoins = Sheetsee.getOccurance(calCoins, "city")
var calChart = Sheetsee.makeColorArrayOfObject(calCityCoins, colors)
var chartData = Sheetsee.makeColorArrayOfObject(Sheetsee.getOccurance(gData, "state"), colors)
// var lineOptions = {m: [80, 100, 120, 100], w: 600, h: 400, div: "#holder", yaxis: "no. of pennies", hiColor: "#14ECC8"}
// Sheetsee.d3LineChart(chartData, lineOptions)
var pieOptions = {m: [80, 80, 80, 80], w: 600, h: 400, div: "#holder", hiColor: "#F78888"}
Sheetsee.d3PieChart(chartData, pieOptions)
// var barOptions = {m: [60, 60, 30, 150], w: 600, h: 400, div: "#holder", xaxis: "no. of pennies", hiColor: "#FF317D"}
var barOptions2 = {m: [60, 60, 30, 150], w: 600, h: 320, div: "#bar2", xaxis: "no. of pennies", hiColor: "#FF317D"}
// Sheetsee.d3BarChart(chartData, barOptions)
Sheetsee.d3BarChart(calChart, barOptions2)
// $(window).resize(function() {
// var newWidth = $('#holder').width()
// console.log("new width", newWidth)
// var options = {m: [30, 60, 10, 200], w: newWidth, div: "#holder"}
// // clear old chart
// $('#holder').html("")
// Sheetsee.d3BarChat(chartData, options)
// })
</script>
</body>
</html>