title: How do I draw a zoomable d3 line chart over time?
body: <p>I'm trying to draw a relatively simple line chart in d3.js that is zoomable. I have been looking at these examples.</p>
  <p>Simple line examples</p>
  <p><a href="https://observablehq.com/@d3/learn-d3-shapes?collection=@d3/learn-d3" rel="nofollow noreferrer">https://observablehq.com/@d3/learn-d3-shapes?collection=@d3/learn-d3</a></p>
  <p><a href="https://www.d3-graph-gallery.com/graph/line_basic.html" rel="nofollow noreferrer">https://www.d3-graph-gallery.com/graph/line_basic.html</a></p>
  <p>Zooming example</p>
  <p><a href="https://observablehq.com/@d3/zoomable-area-chart" rel="nofollow noreferrer">https://observablehq.com/@d3/zoomable-area-chart</a></p>
  <p>Here is my jsfiddle. My line is not showing up.</p>
  <p><a href="https://jsfiddle.net/tw5u2po9/" rel="nofollow noreferrer">https://jsfiddle.net/tw5u2po9/</a></p>
  <p>Edit: my line is working now just working on the zooming</p>
  <p><a href="https://jsfiddle.net/dc3g2uqm/" rel="nofollow noreferrer">https://jsfiddle.net/dc3g2uqm/</a></p>
  <p>HTML</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;/&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;My Chart&lt;/h1&gt;
    &lt;div style=&quot;width:75%&quot;&gt;
      &lt;canvas id=&quot;my_canvas&quot;&gt;&lt;/canvas&gt;
    &lt;/div&gt;
    &lt;div id=&quot;my_chart&quot;&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>.line {
      fill: none;
      stroke: #ffab00;
      stroke-width: 3;
  }
    
  .overlay {
    fill: none;
    pointer-events: all;
  }
  
  /* Style the dots by assigning a fill and stroke */
  .dot {
      fill: #ffab00;
      stroke: #fff;
  }
    
  .focus circle {
    fill: none;
    stroke: steelblue;
  }
  </code></pre>
  <p>Javascript</p>
  <pre><code>var x = [new Date(2020, 10, 10), new Date(2020, 10, 11), new Date(2020, 10, 12), new Date(2020, 10, 13)]
  var y = [5,6,8,4]
  var data = {}
  data.x = x;
  data.y = y;
  
  
  // 2. Use the margin convention practice 
  var margin = {top: 50, right: 50, bottom: 50, left: 50}
  var width = window.innerWidth - margin.left - margin.right // Use the window's width 
  var height = window.innerHeight - margin.top - margin.bottom; // Use the window's height
  
  
  // 5. X scale will use the index of our data
  var xScale = d3.scaleUtc()
      .domain([0 , d3.max(x)]) // input
      .range([0, width]); // output
  
  // 6. Y scale will use the randomly generate number 
  var yScale = d3.scaleLinear()
      .domain([0, d3.max(y)]) // input 
      .range([height, 0]); // output 
  
  // 7. d3's line generator
  var line = d3.line()
      .x(function(d) { return xScale(d.x); }) // set the x values for the line generator
      .y(function(d) { return yScale(d.y); }) // set the y values for the line generator 
  
  // 1. Add the SVG to the page and employ #2
  var svg = d3.select(&quot;#my_chart&quot;).append(&quot;svg&quot;)
      .attr(&quot;width&quot;, width + margin.left + margin.right)
      .attr(&quot;height&quot;, height + margin.top + margin.bottom)
    .append(&quot;g&quot;)
      .attr(&quot;transform&quot;, &quot;translate(&quot; + margin.left + &quot;,&quot; + margin.top + &quot;)&quot;);
  
  // 3. Call the x axis in a group tag
  svg.append(&quot;g&quot;)
      .attr(&quot;class&quot;, &quot;x axis&quot;)
      .attr(&quot;transform&quot;, &quot;translate(0,&quot; + height + &quot;)&quot;)
      .call(d3.axisBottom(xScale)); // Create an axis component with d3.axisBottom
  
  // 4. Call the y axis in a group tag
  svg.append(&quot;g&quot;)
      .attr(&quot;class&quot;, &quot;y axis&quot;)
      .call(d3.axisLeft(yScale)); // Create an axis component with d3.axisLeft
  
  // 9. Append the path, bind the data, and call the line generator 
  svg.append(&quot;path&quot;)
      .datum(data) // 10. Binds data to the line 
      .attr(&quot;class&quot;, &quot;line&quot;) // Assign a class for styling 
      .attr(&quot;d&quot;, line); // 11. Calls the line generator 
  
  </code></pre>