<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="utf-8">
   <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
   <script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   <script src="https://d3js.org/topojson.v2.min.js"></script>
   <link rel="stylesheet" type="text/css" href="./style.css" media="screen"/>
</head>

<body>  
   <span style="display:block;margin-top: 10px;">Selected codes: <span class="values"></span></span><br>

   <div id="modality-selector-container">
      <form id="modality-selector">
         <input type="radio" name="modality-selector" id="rb-first" value="first" checked />
         <label for="rb-first">First</label>
         <input type="radio" name="modality-selector" id="rb-second" value="second" />
         <label for="rb-second">Second</label>
         <input type="radio" name="modality-selector" id="rb-third" value="third" />
         <label for="rb-third">Third</label>
      </form>
   </div>

   <div id="line-chart-container"></div>
   <script src="./script.js"></script>
</body>

</html>
var codes = ["AB", "AC", "AD", "AE"];
$('span.values').html(codes.join(', '));

modalitySelected = document.querySelector('input[name=modality-selector]:checked').value; 

var data = null;
var filtered_data = null;

var margin = {top: 30, right: 20, bottom: 50, left: 50}; 
var width = 560 - margin.left - margin.right;
var height = 300 - margin.top - margin.bottom;

// parse the date/time
var parseTime = d3.timeParse("%Y");

// set the ranges
var minYear = new Date(2000, 0, 1);
var maxYear = new Date(2004, 0, 1);
var numYears = 5;
var x = d3.scaleTime().range([0, width]).domain([minYear, maxYear]);
var y = d3.scaleLinear().range([height, 0]).domain([0, 100]); 

var color = d3.scaleOrdinal(d3.schemeCategory10);

var xAxis = d3.axisBottom(x)
   .tickFormat(d3.timeFormat("%Y"))
   .ticks(numYears);
var yAxis = d3.axisLeft(y);

var svg = d3.select("#line-chart-container")
   .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 g = null;

var line = d3.line()
   .x(function(d) { 
      return x(d.year); 
   })
   .y(function(d) {
      return y(d.value); 
   });

// get data   
d3.queue()
   .defer(d3.csv, './data.csv') 
   .await(makeLineChart);

function makeLineChart(error, data) {
   if(error) {
      console.log(error);
   }

   color.domain(d3.keys(data[0])
      .filter(function(key) { 
         return key == "CODE"; 
      })
   );

   createAxis();
   updateChart(data);
   
   // radio button change
   d3.selectAll("input[name='modality-selector']")
      .on("change", function() {
         modalitySelected = document.querySelector('input[name=modality-selector]:checked').value; 
         clearChart();
         createAxis();
         updateChart(data);
   });

} // end makeLineChart function

/**
 * Create (if is the firts time) or updates the line chart, 
 * based on radio button selection.
 */
function updateChart(data) {
   // filter data
   filtered_data = data.filter(function(d) {
      return d.MODALITY == modalitySelected && codes.includes(d.CODE);
   });
   
   // first we need to corerce the data into the right formats
   filtered_data = filtered_data.map(function(d) { 
      return { 
         code: d.CODE,
         year: parseTime(d.YEAR),
         modality: d.MODALITY,
         value: +d.VALUE 
      }; 
   });

filtered_data = d3.nest()
      .key(function(d) { 
         return d.code; 
      })
      .entries(filtered_data);

   var codesArray = svg.selectAll(".code")
      .data(filtered_data, function(d) { 
         return d.key; 
      })
      .enter()
      .append("g")
      .attr("class", "code");

   codesArray.append("path")
      .attr("class", "line")
      .attr("d", function(d) { 
         return line(d.values); 
      })
      .style("stroke", function(d) { 
         return color(d.key); 
      });
}

function createAxis() {
  g = svg.append("g")
      .attr("class", "chartGroup")

   g.append("g")
      .attr("class", "axis x")
      .attr("transform", "translate(0, " + height + ")")
      .call(xAxis);

   g.append("g")
      .attr("class", "axis y")
      .call(yAxis);
}

/**
 * Remove old chart (axis and lines).
 */
function clearChart() {
   d3.select(".chartGroup").remove();
   d3.selectAll(".code").remove();
}

.line {
	fill: none;
	stroke-width: 1.5px;
}

CODE,YEAR,MODALITY,VALUE
AB,2000,first,15
AB,2000,second,
AB,2000,third,33
AB,2001,first,20
AB,2001,second,25
AB,2001,third,87
AB,2002,first,6
AB,2002,second,
AB,2002,third,16
AB,2003,first,50
AB,2003,second,50
AB,2003,third,10
AB,2004,first,20
AB,2004,second,55
AB,2004,third,8
AC,2000,first,
AC,2000,second,97
AC,2000,third,77
AC,2001,first,42
AC,2001,second,5
AC,2001,third,81
AC,2002,first,
AC,2002,second,63
AC,2002,third,14
AC,2003,first,5
AC,2003,second,7
AC,2003,third,0
AC,2004,first,5
AC,2004,second,7
AC,2004,third,0
AD,2000,first,11
AD,2000,second,2
AD,2000,third,36
AD,2001,first,95
AD,2001,second,78
AD,2001,third,88
AD,2002,first,89
AD,2002,second,32
AD,2002,third,79
AD,2003,first,5
AD,2003,second,32
AD,2003,third,9
AD,2004,first,7
AD,2004,second,32
AD,2004,third,91
AE,2000,first,15
AE,2000,second,78
AE,2000,third,1
AE,2001,first,5
AE,2001,second,2
AE,2001,third,64
AE,2002,first,44
AE,2002,second,51
AE,2002,third,
AE,2003,first,40
AE,2003,second,52
AE,2003,third,85
AE,2004,first,45
AE,2004,second,50
AE,2004,third,80