-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
93 lines (93 loc) · 6.97 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Correlating state cancer center funding with state cancer mortality trends to analyse the impact of funding on state cancer.">
<meta name="keywords" content="nci,national,cancer,center,designated,funding,trends,death,mortality,analysis">
<meta name="author" content="Ganesh Jagadeesan<https://github.com/Elefhead>">
<title>FARCRY</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.3.2/css/bootstrap-slider.min.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container full-height">
<section id="viz-section" class="full-width">
<div class="row center-items full-width margin-top">
<div class="center-items text-center">
<h1 class="font_0">Correlating State Cancer Center Funding with State Cancer Mortality</h1>
</div>
<div class="center-items text-center">
<p class="font_5">The following map shows the <span id="map-tag">age-adjusted all cancer death rate for each state by year</span>. <span class="darkred">Darker the red</span>, the higher the <span class="darkred">cancer death rate</span> per 100,000 population. The <span class="blue">blue dots</span> on the
map show the location of <u><a href="https://www.cancer.gov/research/nci-role/cancer-centers" target="_blank">NCI designated cancer centers</a></u>. <span class="darkblue">Dark blue dots</span> show the <span class="darkblue">Comprehensive Cancer Centers</span>, <span class="blue">blue</span> show the <span class="blue">Clinical Cancer Centers</span> & <span class="lightblue">light blue</span> show the <span class="lightblue">Basic Cancer Centers</span>.<br/><span class="viz-buttons"> You are currently looking at year: <b><span class="main-year">2000</span></b></span></p>
</div>
<div class="margin-top-bottom text-center">
<p class="font_4 viz-buttons">Click on map to reveal individual state information. Hover on map for details.<br/><span class="">Use the slider below to set year. Click button below to resize states by funding.</span></p>
<p class=" font_4 hidden" id="scroll-text">Hover on map for details. Scroll down for trends.<br/>Click on map to zoom out.</p>
</div>
</div>
<div class="row center-items full-width">
<div class="col-12 center-container full-width">
<div id="tooltip-container"></div>
<div class="viz center-container full-width" id="viz"></div>
</div>
<div class="col-12 center-container center-items full-width margin-top viz-buttons">
<div class="full-width center-items">
<div class="form-group full-width center-items vertical-flow">
<p class="font_4">Use this slider to set year. You are currently looking at year: <b><span class="main-year">2000</span></b></p>
<input id="slider" data-slider-id='yearslider' type="text" data-slider-min="2000" data-slider-max="2015" data-slider-step="1" data-slider-value="2000" />
</div>
</div>
</div>
<div class="col-12 center-container center-items full-width text-center">
<button type="button" class="btn btn-danger viz-buttons" id="resize">Resize by Funding</button>
<button type="button" class="btn btn-outline-dark viz-buttons" id="reset">Reset</button>
</div>
</div>
<div class="row center-items full-width text-center">
<div class="col-12 center-container full-width">
<div class="chart-viz center-container full-width"></div>
</div>
</div>
<div class="row center-items full-width margin-top">
<div class="col-12 center-container full-width">
<div class="col-12 center-container">
<h1>Details</h1>
</div>
<div class="col-12 center-container">
<ul class="font_5">
<li>This visualization shows the age-adjusted <span class="darkred">cancer death rate</span> for each state over the years 2000-2015.</li>
<li>The slider can be used to change the year; it only affects the state data on the zoomed-out map that shows all of USA.</li>
<li>The county data is not year-wise. It is the 5 year average (2011-2015) age-adjusted death rate.</li>
<li>The funding data is expressed in dollars per 1,000.</li>
<li>The blue dots show the following:
<ul>
<!--<li> hyperlink what these mean.-->
<li>
The <span class="darkblue">dark blue</span> dots show <span class="darkblue">Comprehensive cancer center</span>.
</li>
<li>
The <span class="blue">blue</span> dots show <span class="blue">Clinical cancer center</span>.
</li>
<li>
The <span class="lightblue">light blue</span> dots show <span class="lightblue">Basic cancer center</span>.
</li>
</ul>
</li>
<li>The timeseries graphs that display trends for a specific state can be filtered using the labels.</li>
</ul>
</div>
</div>
</div>
</section>
</div>
<div class="footer"></div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.3.2/bootstrap-slider.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.2/topojson.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>