Percent of outpatient doctor visits for influenza-like symptoms

<!DOCTYPE html>
<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>

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);}
;}

// ***** 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