/
h9n2_min.html
109 lines (77 loc) · 4.06 KB
/
h9n2_min.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
<!DOCTYPE html>
<!-- basic drawing capability taken from url=(0040)http://bl.ocks.org/mbostock/raw/2429963/ -->
<!-- some tree stuff inspired by https://gist.github.com/kueda/1036776 -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8">
<title>pandemix</title>
<link rel="stylesheet" type="text/css" href="css/h9n2.css">
<link rel="stylesheet" type="text/css" href="css/pandemix.css">
<link rel="stylesheet" type="text/css" href="css/leaflet.css" />
<script src="javascript/allMin.js"></script>
</head>
<body>
<div id="map"></div>
<span class="date-calendar"></span>
<div id="search"></div>
<div id="color"></div>
<div id="zoom"></div>
<div id="playPause"></div>
<!-- <div id="traits"></div> -->
<div id="traitSelection"></div>
<div id="legend"></div>
<div id="globalTime"></div>
<div id="tree1" class="collapsible"></div>
<div id="tree2" class="collapsible"></div>
<div id="tree3" class="collapsible"></div>
<div id="tree4" class="collapsible"></div>
<div id="tree5" class="collapsible"></div>
<div id="tree6" class="collapsible"></div>
<script>
//script wrapped in a function to avoid polluting namespace
(function() {
var i,
contourFile = "data/reducedGeography.json",
centroidFile = "data/H9N2_locations.csv"
tileSource = "http://{s}.tile.cloudmade.com/1a1b06b230af4efdbb989ea99e9841af/998/256/{z}/{x}/{y}.png",
inputFiles = ["data/H9N2 Trees/H9N2.PA.json",
"data/H9N2 Trees/H9N2.MP.json",
"data/H9N2 Trees/H9N2.NS.json",
"data/H9N2 Trees/H9N2.PB2.json",
"data/H9N2 Trees/H9N2.NP.json",
"data/H9N2 Trees/H9N2.PB1.json"];
var mapPanel = new pandemix.MapPanel;
mapPanel.placePanel({target: "map", initCoords: [34, 104], initZoom: 4})
.addTileLayer(tileSource)
//.loadContours(contourFile)
.loadCentroids(centroidFile)
.addInfoDisplay(function(d) {return "<h4>" + d.location + "</h4>" + d.treeName + " - " + d.number})
//.addLayer({layerType: pandemix.map.regionOutlineLayer, name: "Regions"})
.addLayer({layerType: pandemix.map.locationLayer, name: "Locations", displayedProperty: "location", unitRadius: 0.5, minRadius: 1, maxRadius: 50});
pandemix.addSearchBox({target: "#search"});
pandemix.addColorPicker({target: "#color"});
pandemix.addGlobalZoomButton({target: "#zoom", zoomAmount: 1});
pandemix.addPlayPauseButton({target: "#playPause", updateInterval: 200, updateStep: 10});
// var traitPanel = new pandemix.TraitPanel;
// traitPanel.placePanel("#traits");
var traitSelectionPanel = new pandemix.TraitSelectionPanel;
traitSelectionPanel.placePanel({target: "#traitSelection"});
var legendPanel = new pandemix.LegendPanel;
legendPanel.placePanel({target: "#legend"});
var timePanel = new pandemix.TimePanel;
timePanel.placePanel({target: "#globalTime"});
pandemix.initializeCrossfilter();
//read each input file and draw the tree in its own div
for (i = 0; i < inputFiles.length; i += 1) {
var f = inputFiles[i];
var treePanel = new pandemix.TreePanel;
treePanel.placePanel("#tree" + (i + 1));
treePanel.initializePanelData({file: f, color: pandemix.getHSBColor(i, inputFiles.length)});
//mapPanel.addLayer({layerType: pandemix.map.virusParticleLayer, treePanel: treePanel, radius: 1});
//mapPanel.addLayer({layerType: pandemix.map.treeLayer, treePanel: treePanel, color: treePanel.getColor()});
}
mapPanel.addLayer({layerType: pandemix.map.bubbleTransLayer, name: "Bubble transitions", radius: 1})
.addLayer({layerType: pandemix.map.bubbleChartLayer, name: "Bubble chart", unitRadius: 1});
})();
</script>
</body></html>