Skip to content

v6 version of fluscore #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

v6 version of fluscore #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
d35edd5
Add options for States/Hospitalization;
jingjtang Oct 15, 2019
bebdf96
2018-2019 version
jingjtang Oct 15, 2019
0724c0a
Fixed legend problem
jingjtang Oct 15, 2019
6bfcbb6
Add files via upload
jingjtang Oct 15, 2019
2f4f9cf
Changed to gmail
jingjtang Oct 15, 2019
162ac3c
Update README.md
jingjtang Oct 15, 2019
119d977
Changed the option names and the logo size
jingjtang Oct 15, 2019
ee3ec66
Options changed to 'csv' or 'zip'
jingjtang Oct 15, 2019
f9a9200
Options changed to 'csv or zip'
jingjtang Oct 15, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,16 @@ The site is live at http://delphi.midas.cs.cmu.edu/misc/fluscores/

# Legacy Changelog
````
=== v6: 2019-10-14 ===
+ Support 2017-2018, 2018-2019 national/regional scores
+ Support states & hospitalization scores
+ Delphi logo and revision information
by Jingjing Tang

=== v5: 2017-07-22 ===
+ Sidebar added for legend and scaling
by Tanay Vakharia

=== v4: 2016-11-04 ===
* backport of v3 changes from javascript to coffeescript

Expand Down
317 changes: 317 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,317 @@

<!doctype html>
<!-- hi :) -->
<html>
<head>
<title>Flu Scores</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Alegreya+SC:700" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.7/pixi.min.js"></script>
<script type="text/javascript" src="delphi_epidata.js"></script>
<script type="text/javascript" src="fs_data.js"></script>
<script type="text/javascript" src="fs_plot.js"></script>
<style>
* { margin: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
body { background: radial-gradient(#fff,#ccc); }
body { font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; text-align: center; }
.full { width: 100%; height: 100%; }
.centered { display: flex; justify-content: center; align-items: center; }
.title { font-family: "Alegreya SC", "Rockwell Extra Bold", "Rockwell Bold", monospace; text-spacing: 1px; text-shadow: 0px 0px 10px #888; }
#row { padding-top:5px; padding-bottom:5px;}
#button_plotmenu {width:30px; height:30px; font-size:25px; background-color:transparent; border:none; outline:none; float:left;}
#legend {height: 300px; width : 140px; list-style: none; overflow-x: scroll; overflow-y: scroll; padding-left: 0px;float: left;}
#legend > li { padding-top: 3px; padding-bottom: 3px; max-width: 150px; white-space: nowrap; text-align: left;}
#colorbox { font-size: 13px; padding: 15px;}
#colorbox > div { padding : 3px; }
#colbar { width:90px;float:right }
#colpick { height: 20px; width : 20px; padding: 0px; border: none;}
#colset {list-style: none; padding: 0px;}
#colset > li { display : inline; }
</style>
</head>
<body>
<div style="position:absolute;top:0;right:0;font-color:#444;font-size:0.8em;text-shadow: 0px 0px 10px #888;">
<img style="width:108px;height:16px;" src="http://www.cmu.edu/common/standard-v4/images/wordmark.gif"></img>
<br>
<img style="width:108px;height:42px;" src="https://github.com/raw/cmu-delphi/www-main/master/site/images/delphi_static.png"></img>
</div>
<div id="part0" class="full centered">
<div>
<p class="title" style="padding:24px;font-size:3em;">
FluScores
</p>
<p style="border-bottom:1px solid #ccc;margin-bottom:12px;padding-bottom:12px;">
Select zip files below. You can compare different teams by selecting multiple files.
<br />
All processing is done locally in your web browser; no data is sent to the server.
</p>
<p>
Season: <select id="season_select">
<option value="2014">2014-2015 (select csv or zip files)</option>
<option value="20150"> 2015-2016 (select csv or zip files)</option>
<option value="20160"> 2016-2017 (select csv or zip files)</option>
<option value="20170">2017-2018 (select csv or zip files)</option>
<option value="20180" selected>2018-2019 (select csv or zip files)</option>
</select> |
Competition: <select id="comp_select">
<option value="Hospitalization"> Hospitalization</option>
<option value="State">ILI (US States)</option>
<option value="National" selected>ILI (National & HHS Regions)</option>
</select> |
<label>Files: <input id="files" type="file" multiple /></label> |
<input id="button_load" type="submit" value="Analyze Files" />
<br />
<div id="message" style="color:#c44;margin-top:12px;"></div>
</p>
<p style="border-bottom:1px solid #ccc;margin-bottom:12px;padding-bottom:12px;">
Fluscores has been developed and tested under Chrome. Other browsers may or may not work for now.
</p>
<p style="position:absolute;bottom:0;left:0;right:0;solid #ccc;margin-bottom:12px;padding-bottom:12px;font-size:0.5em">
2019 Revised by Jingjing Tang, [email protected]
<br>
2017 Revised by Tanay Vakharia
<br>
2016 Developed by David Farrow
</p>
</div>
</div>
<div id="part1" class="full">
<p class="title" style="padding:16px;font-size:1.5em;position:absolute;top:0;left:0;">
FluScores
</p>
<div class="centered" style="flex-direction:column;height:64px;">
<div style="padding-bottom:4px;border-bottom:1px solid #888;">
<label>Error Type: <select id="select_error"></select></label>&nbsp;|&nbsp;
<label>Target: <select id="select_target"></select></label>&nbsp;|&nbsp;
<label>Location: <select id="select_region"></select></label>&nbsp;|&nbsp;
<label>Group: <select id="select_group">
<option value="plot" selected>[by epiweek]</option>
<option value="combine">[by team]</option>
</select></label>&nbsp;
</div>
<div style="padding-top:4px;padding-bottom:4px;border-bottom:1px solid #888;">
<input id="button_shake" type="button" value="Shake It Up"></input>&nbsp;|&nbsp;
<label>Show Points: <input id="checkbox_points" type="checkbox"></input></label>&nbsp;|&nbsp;
<label>Overlay wILI: <input id="checkbox_wili" type="checkbox"></input></label>&nbsp;|&nbsp;
<label> Show Legend : <input id="checkbox_legend" type="checkbox" checked="checked"></input></label>
</div>
</div>

<div id="container" style="height:calc(100% - 64px)">
<input id="button_plotmenu" type="button"/>
<div id="plot_menu" style="height:100%;width:150px;float:left;padding-top:30px;">
<div id="row">
<label>Zoom: <input id="button_zoomin" type="button" value="&plus;"></input></label>&nbsp;|&nbsp;
<input id="button_zoomout" type="button" value="&minus;"></input>
</div>
<div id="row">
<label>Move: <input id="button_moveup" type="button" value="&uarr;"></input></label>&nbsp;|&nbsp;
<input id="button_movedown" type="button" value="&darr;"></input>
</div>
<div id="row">
<input id="button_rescale" type="button" value="rescale"/>
</div>
<div id="row">
<label> LEGEND </label>
</div>
<div style="height:300px">
<ul id="legend">
</ul>
</div>
<div id="row">
<input id="select_all_button" type="button" value="Select All" style="width:80px;"></input>
</div>
<div id="row">
<input id="unselect_all_button" type="button" value="Unselect All" style="width:80px;"></input>
</div>
<div id="row">
<input id="recolor_button" type="button" value="Recolor" style="width:80px;"></input>
</div>
</div>
<div style="height:100%;width:auto;overflow:hidden">
<canvas id="canvas" style="width:100%;height:100%;"></canvas>
</div>
</div>
</div>
<script>
var loadButton = $('#button_load');
var error = $('#select_error');
var target = $('#select_target');
var region = $('#select_region');
var group = $('#select_group');
var shakeButton = $('#button_shake');
var pointsCheckbox = $('#checkbox_points');
var wiliCheckbox = $('#checkbox_wili');
var legendCheckbox = $('#checkbox_legend')
var color_list = [0x4080c0, 0xc04080, 0xc08040, 0x40c080, 0x8040c0, 0x80c040];
var colors = [];
var exclude_teams = [];
var teams = null;
var data = null;
var plot = null;
var plot_menu = $('#plot_menu');
var plotmenu_button = $('#button_plotmenu');
var showPlotMenu = false;
var zoominButton = $('#button_zoomin');
var zoomoutButton = $('#button_zoomout');
var moveupButton = $('#button_moveup');
var movedownButton = $('#button_movedown');
var rescaleButton = $('#button_rescale');
var legend = $('#legend');
var teamCheckboxIds = [];
var selectAllButton = $('#select_all_button');
var unselectAllButton = $('#unselect_all_button');
var recolorButton = $('#recolor_button');
function update(input) {
if(data === null) {
return;
}
var values = FS_Data.update(data, parseInt($('#season_select').val()), error.val(), target.val(), region.val(), group.val());
var plotData = {};
var currTeams = [];
var currColors = [];
for(var t = 0; t < teams.length; t++) {
if(exclude_teams.indexOf(teams[t]) < 0) {
currTeams.push(teams[t]);
currColors.push(colors[t]);
plotData[teams[t]] = [];
for(var i = 0; i < FS_Data.epiweeks.length; i++) {
plotData[teams[t]].push(values[t][i]);
}
}
}


if(group.val() == 'combine') {
plot.barMode();
} else {
plot.lineMode();
}
wiliCheckbox.prop('disabled', region.val() == 'combine');
var wILI = null;
if(wiliCheckbox.prop('checked')) {
wILI = FS_Data.wILI[region.val()];
}
plot.setWili(wILI);
plot.update(plotData, input, currTeams, currColors);
}
function onLoadSuccess(t, d) {
teams = t;
data = d;
for (var t = 0; t < teams.length; t++) {
colors.push(color_list[t % color_list.length]);
}
$('#part0').hide(0);
$('#part1').show(0, function() {
plot = new FS_Plot($('#canvas'), teams);
update();
plot_menu.hide();
plotmenu_button.val('\u00BB');
legendItems = [];
for (var t = 0; t < teams.length; t++) {
legend.append('<li style="color:#'+ colors[t].toString(16) + ';"><input type="checkbox" checked="checked" value="' + teams[t] + '">\u00A0' + teams[t] + '</input></li>');
}
$('#legend input[type=checkbox]').change(function() {
if($(this).prop('checked')) {
var index = exclude_teams.indexOf($(this).val());
if(index >= 0) {
exclude_teams.splice(index, 1);
}
else {
console.log('error element not in array');
}
update('teamToggle');
}
else {
exclude_teams.push($(this).val());
update('teamToggle');
}
});
});
}
function onLoadError(message) {
$('#message').text(message);
loadButton.prop('disabled', false);
}
$(document).ready(function() {
$('#part1').hide(0);
error.change(function () { update('normal');});
target.change(function () { update('normal');});
region.change(function () { update('normal');});
group.change(function () { update('normal');});
wiliCheckbox.click(function () { update('normal');});
zoominButton.click(function () { update('zoomIn');});
zoomoutButton.click(function () { update('zoomOut');});
moveupButton.click(function () { update('moveUp');});
movedownButton.click(function () { update('moveDown');});
rescaleButton.click(function () { update('normal');});
legendCheckbox.click(function () { update('legendToggle');});
loadButton.click(function() {
loadButton.prop('disabled', true);
FS_Data.init(parseInt($('#season_select').val()), $("#comp_select").val());
FS_Data.addAllOptions(error, target, region);
FS_Data.loadFiles($('#files')[0].files, parseInt($('#season_select').val()), onLoadSuccess, onLoadError);
});
selectAllButton.click(function () {
exclude_teams = [];
var checkboxes = document.querySelectorAll('#legend input[type=checkbox]');
for(var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = true;
}
update('teamToggle');
});
unselectAllButton.click(function () {
for(var t = 0; t < teams.length; t++) {
if(exclude_teams.indexOf(teams[t]) < 0) {
exclude_teams.push(teams[t]);
}
}
var checkboxes = document.querySelectorAll('#legend input[type=checkbox]');
for(var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = false;
}
update('teamToggle');
});
recolorButton.click(function () {
var max = 0xFFFFFF + 1;
for (var t = 0; t < teams.length; t++) {
colors[t] = Math.round(Math.random()*max) + 1;
}
listElements = document.querySelectorAll('#legend > li');
for(var i = 0; i < listElements.length; i++) {
listElements[i].style.color = "#" + colors[i].toString(16);
}
update('normal');
});
shakeButton.click(function() {
plot.shakeItUp();
});
pointsCheckbox.click(function() {
plot.setPointsVisible(pointsCheckbox.prop('checked'));
});
plotmenu_button.click(function() {
showPlotMenu = !showPlotMenu;
if(showPlotMenu) {
plot_menu.show(400);
plotmenu_button.val('\u00AB');
}
else {
plot_menu.hide(400);
plotmenu_button.val('\u00BB');
}
});
$(window).on('resize', function() {
if(plot !== null) {
var canvas = $('#canvas');
plot.resize(canvas.width(), canvas.height());
}
});
});
</script>
</body>
</html>
Loading