title: How to make a D3 Line Chart Responsive
body: <p>I am new to using D3 charts and am having an issue making my multi line chart responsive. I have reviewed some examples on how to make D3 responsive, but I can not make it work on my graph. If someone could assist me in making the code I currently have responsive I would really appreciate it. </p>
  
  <p>Here is the code: </p>
  
  <pre><code>    // Set the dimensions of the canvas / graph
      var margin = {top: 20, right: 20, bottom: 30, left: 50},
      width = 600 - margin.left - margin.right,
      height = 400 - margin.top - margin.bottom;
  
  
     // Parse the date / time
     var parseDate = d3.time.format("%Y-%m-%d").parse;
  
     // Set the ranges
     var x = d3.time.scale().range([0, width]);
     var y = d3.scale.linear().range([height, 0]);
  
     // Define the axes
     var xAxis = d3.svg.axis().scale(x)
     .orient("bottom").ticks(5);
  
     var yAxis = d3.svg.axis().scale(y)
     .orient("left").ticks(8);
  
     // Define the line
     var valueline = d3.svg.line()
     .x(function(d) { return x(d.date); })
     .y(function(d) { return y(d.average_ticnum); });
  
     var valueline2 = d3.svg.line()
     .x(function(d) { return x(d.date); })
     .y(function(d) { return y(d.average_fatiguenum); });
  
     var valueline3 = d3.svg.line()
     .x(function(d) { return x(d.date); })
     .y(function(d) { return y(d.average_stressnum); });
  
     var valueline4 = d3.svg.line()
     .x(function(d) { return x(d.date); })
     .y(function(d) { return y(d.sum_nf_sugars); });
  
     var valueline5 = d3.svg.line()
     .x(function(d) { return x(d.date); })
     .y(function(d) { return y(d.sum_nf_total_carbohydrate); });
  
     // Adds the svg canvas
     var svg = d3.select("body")
     .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 + ")");
  
  
  
     // Get the data
     d3.json("progress_output.php?useremail=&lt;?php echo $useremail; ?&gt;",                              function(error, data) {
     data.forEach(function(d) {
      d.date = parseDate(d.date);
      d.average_ticnum = +d.average_ticnum;
      d.fatiguenum = +d.average_fatiguenum;
      d.stressnum = +d.average_stressnum;
  });
  
  // Scale the range of the data
  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain([0,12]);
  
  // Add the valueline path.
  svg.append("path")
  .attr("class", "line")
  .style("stroke", "#891f83")
  .attr("id","ticLine")
  .attr("d", valueline(data));
  
  svg.append("path")
  .attr("class", "line")
  .style("stroke", "#7db6e3")
  .attr("id","fatigueLine")
  .attr("d", valueline2(data));
  
  svg.append("path")
  .attr("class", "line")
  .style("stroke", "#36376a")
  .attr("id","stressLine")
  .attr("d", valueline3(data));
  
  svg.append("path")
  .attr("class", "line")
  .style("stroke", "#9bcf81")
  .attr("id","sugarLine")
  .attr("d", valueline4(data));
  
  svg.append("path")
  .attr("class", "line")
  .style("stroke", "#efa465")
  .attr("id","carbLine")
  .attr("d", valueline5(data));
  
  // Add the Dots
  svg.selectAll("dot")
  .data(data)
  .enter().append("circle")
  .attr("id","ticDots")
  .attr("r", 3.5)
  .style("fill", "#891f83")
  .attr("cx", function(d) { return x(d.date); })
  .attr("cy", function(d) { return y(d.average_ticnum); });
  
  svg.selectAll("dot")
  .data(data)
  .enter().append("circle")
  .attr("r", 3.5)
  .style("fill", "#7db6e3")
  .attr("id","fatigueDots")
  .attr("cx", function(d) { return x(d.date); })
  .attr("cy", function(d) { return y(d.average_fatiguenum); });
  
  svg.selectAll("dot")
  .data(data)
  .enter().append("circle")
  .attr("r", 3.5)
  .style("fill", "#36376a")
  .attr("id", "stressDots")
  .attr("cx", function(d) { return x(d.date); })
  .attr("cy", function(d) { return y(d.average_stressnum); });
  
  svg.selectAll("dot")
  .data(data)
  .enter().append("circle")
  .attr("id","sugarDots")
  .attr("r", 3.5)
  .style("fill", "#9bcf81")
  .attr("cx", function(d) { return x(d.date); })
  .attr("cy", function(d) { return y(d.sum_nf_sugars); });
  
  svg.selectAll("dot")
  .data(data)
  .enter().append("circle")
  .attr("r", 3.5)
  .style("fill", "#efa465")
  .attr("id","carbDots")
  .attr("cx", function(d) { return x(d.date); })
  .attr("cy", function(d) { return y(d.sum_nf_total_carbohydrate); });
  
  
  // Add the X Axis
  svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);
  
  // Add the Y Axis
  svg.append("g")
  .attr("class", "y axis")
  .call(yAxis);
  
  //Add the Tic title
  svg.append("text")
  .attr("x", 15)             
  .attr("y", 0)    
  .attr("class", "legend")
  .attr("id", "ticText")
  .style("color", "#891f83")
  .style("fill", "#891f83") 
  .style("cursor", "pointer")
  .style("font-family", "cooperbook")        
  .on("click", function(){
          // Determine if current line is visible
          var active   = ticLine.active ? false : true,
          newOpacity = active ? 0 : 1;
          // Hide or show the elements
          width = 200;
          height = 200;
          d3.select("#ticLine").style("opacity", newOpacity);
          d3.selectAll("#ticDots").style("opacity", newOpacity);
  
          // Update whether or not the elements are active
          ticLine.active = active;
      })
  .text("Tic Severity");
  
  //Add the fatigue title
  svg.append("text")
  .attr("x", 115)             
  .attr("y", 0)    
  .attr("class", "legend")
  .style("color", "#7bd6e3")
  .style("fill", "#7bd6e3")
  .style("cursor", "pointer")
  .style("font-family", "cooperbook")
  .on("click", function(){
          // Determine if current line is visible
          var active   = fatigueLine.active ? false : true,
          newOpacity = active ? 0 : 1;
          // Hide or show the elements
          d3.select("#fatigueLine").style("opacity", newOpacity);
          d3.selectAll("#fatigueDots").style("opacity", newOpacity);
          // Update whether or not the elements are active
          fatigueLine.active = active;
      })
  .text("Fatigue");
  
  
  //Add the Stress title
  svg.append("text")
  .attr("x", 190)             
  .attr("y", 0)    
  .attr("class", "legend")
  .style("color", "#36376a")
  .style("fill", "#36376a")
  .style("cursor", "pointer")
  .style("font-family", "cooperbook")          
  .on("click", function(){
          // Determine if current line is visible
          var active   = stressLine.active ? false : true,
          newOpacity = active ? 0 : 1;
          // Hide or show the elements
          d3.select("#stressLine").style("opacity", newOpacity);
          d3.selectAll("#stressDots").style("opacity", newOpacity);
          // Update whether or not the elements are active
          stressLine.active = active;
      })
  .text("Stress");
  
  //Add the sugar title
  svg.append("text")
  .attr("x", 250)             
  .attr("y", 0)    
  .attr("class", "legend")
  .style("color", "#9bcf81")
  .style("fill", "#9bcf81")
  .style("cursor", "pointer")
  .style("font-family", "cooperbook")          
  .on("click", function(){
          // Determine if current line is visible
          var active   = sugarLine.active ? false : true,
          newOpacity = active ? 0 : 1;
          // Hide or show the elements
          d3.select("#sugarLine").style("opacity", newOpacity);
          d3.selectAll("#sugarDots").style("opacity", newOpacity);
          // Update whether or not the elements are active
          sugarLine.active = active;
      })
  .text("Sugars");
  
  //Add the carb title
  svg.append("text")
  .attr("x", 320)             
  .attr("y", 0)    
  .attr("class", "legend")
  .style("color", "#efa465")
  .style("fill", "#efa465")
  .style("cursor", "pointer")
  .style("font-family", "cooperbook")          
  .on("click", function(){
          // Determine if current line is visible
          var active   = carbLine.active ? false : true,
          newOpacity = active ? 0 : 1;
          // Hide or show the elements
          d3.select("#carbLine").style("opacity", newOpacity);
          d3.selectAll("#carbDots").style("opacity", newOpacity);
          // Update whether or not the elements are active
          carbLine.active = active;
      })
  .text("Carbohydrates");
   });
  </code></pre>
  
  <p>Thank you!</p>