xxxxxxxxxx
<meta charset="utf-8">
<title>Rate by demographic</title>
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
svg {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
fill:none;
stroke:#000;
shape-rendering: crispEdges;
}
.x.axis text {
font-size: 12px;
}
.line {
fill: none;
stroke-width: 1.5px;
}
</style>
<p id="hed"> <font size=6>Doctor visits for flu-like illness</font>
<p id="subhed"><font color="red" size=2>DRAFT not for publication or citation. Subject to revision</font>
<p id="questions" font size=2>Is this a proxy for flu severity each season? Why are the curves so different each season? What factors make one season more severe than another? Weather? Rain? Temperature? The particular mutation of the virus? </font><br><br>
_________________________________________________________________ Hover over a year to learn more <font size=6>↓</font>
<p id="chart">
<p id="footer">
Source: <a href="https://gis.cdc.gov/grasp/fluview/fluportaldashboard.html" target="_blank">https://gis.cdc.gov/grasp/fluview/fluportaldashboard.html Accessed 9/14/14</a>
<br><br>
Percentage of visits for influenza-like illness reported by the U.S. Outpatient Influenza-like Illness Surveillance Network (ILINet), weekly national summary, selected seasons
<br><br>
See more at CDC's <a href="https://www.cdc.gov/flu/weekly/" target=_blank>FluView</a>
<!-- ************* SOURCE & NOTES *************
https://gis.cdc.gov/grasp/fluview/fluportaldashboard.html Accessed 9/14/14
********* /SOURCE ******************** -->
<body>
<script>document.write('<script src="https://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
console.log("ok");
//YEAR, WEEK, ILITOTAL, TOTAL PATIENTS, NUM OF PROVIDERS, PERCENT_WEIGHTED_ILI, PERCENT_UNWEIGHTED_ILI
var margin = {top: 20, right: 10, bottom: 40, left: 50},
width = 768 - margin.left - margin.right,
height = (width*0.66) - margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0, width])
.domain([0, 52]);
var y = d3.scale.linear()
.range([height, 0])
.domain([0, 9]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var line = d3.svg.line()
.interpolate("basis")
.x(function (d) {return x(d.seasonal_week) ;})
.y(function (d) {return y(d.rate); })
var color = d3.scale.category10()
// ***** convert week enumeration into something we can use *******
// their data runs from week 35 of each year through about week 17 of the next.
// How to graph range = ([35, 17])?
// convert the first week in January to Week 53
// so range = ([35 - 83])
function seasonWeek(some_num) {
if (some_num < 30) {return some_num + 30;}
else {return some_num-30;}
;}
function seasonAssigner(num1, num2) {
// numb 1 is calendar week, num 2 is year
if (num1 < 30) {return (num2 -1) + " " + num2;}
else {return num2 + " " + (num2+1);}
;}
function classAssigner(some_str) { // alas you cant have numbers in a class name
if (some_str == "2007 2008") {return "zeroseven_zeroeight";}
if (some_str == "2008 2009") {return "zeroeight_zeronine";}
if (some_str == "2009 2010") {return "zeronine_ten";}
if (some_str == "2010 2011") {return "ten_eleven";}
if (some_str == "2011 2012") {return "eleven_twelve";}
if (some_str == "2012 2013") {return "twelve_thirteen";}
if (some_str == "2013 2014") {return "thirteen_fourteen";}
if (some_str == "2014 2015") {return "fourteen_fifteen";}
}
// ***** close week enumeration converter ********
// ********* LOAD DATA
//CATCHMENT, NETWORK, SEASON, MMWR-YEAR, MMWR-WEEK, AGE, CATEGORY, RATE
d3.csv("ILINet.csv", function (error, data){
console.log(data);
color.domain(d3.keys(data[0]).filter(function(key) {return key == 'YEAR'; }));
data.forEach(function (d) {
d.rate = +d.PERCENT_WEIGHTED_ILI,
d.calendar_week = +d.WEEK,
d.seasonal_week = seasonWeek(+d.WEEK),
d.year = +d.YEAR,
d.season = seasonAssigner(d.calendar_week, d.year);
});
console.log(data);
data = d3.nest().key(function (d) {return d.season; }).entries(data);
console.log(data);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("y", 30)
.text("Week 0 = first week in September");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0-margin.left)
.attr("x", 0-height/2)
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("percent of visits for influenza-like symptoms")
var seasons = svg.selectAll(".season")
.data(data, function (d) {return d.key; })
.enter().append("g")
.attr('class', function (d) {return classAssigner(d.key) + " line"; });
seasons.append("path")
.attr("class", "line")
.attr("d", function (d) {return line(d.values); })
.style("stroke", function (d) {return color(d.key); });
var legend = svg.selectAll('.legend')
.data(data, function (d) {return d.key;})
.enter()
.append('g')
.attr('class', function (d) {return classAssigner(d.key) + " legend"; });
legend.append('rect')
.attr('x', width - 60)
.attr('y', function(d, i){ return i * 20;})
.attr('width', 18)
.attr('height', 18)
.style('fill', function(d) {return color(d.key); });
legend.append('text')
.attr('x', width - 40)
.attr('y', function(d, i){ return (i * 20) + 9;})
.text(function(d){ return d.key; })
.on("mouseover", function (d){
d3.selectAll("." + classAssigner(d.key) + " .line").style("stroke", "black").style("stroke-width", "5px")
})
.on("mouseout", function (d) {
d3.selectAll("." + classAssigner(d.key) + " .line").style("stroke", function (k) {return color(k.key)}).style("stroke-width", "1.5px")
})
});
</script>
Modified http:// to a secure url
Modified http://d3js.org/d3.v3.min.js to a secure url
https://
https://d3js.org/d3.v3.min.js