title: Line graph scaling
body: <p>I want to draw a d3 line graph, but the line ends up being a very small dot.  </p>
  
  <p>I have tried lots of different appriches to scaling, but none of the seem to work for me!!</p>
  
  <p>If you run the snippet you see the blob, I have scaled it up (x60) so that is is visible, but it is clearly wrong.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function addLineGraph(data) {
  
  var size = { width: 1100, height: 700, padding: 80 }
          var g = d3.select(document.getElementById('chart'))
                       .append('svg')
                       .attr('width',size.width+size.padding)
                       .attr('height',size.height+size.padding)
                       .append('g').attr('transform','translate('+[size.padding,size.padding]+')')
          
          var x = d3.scaleLinear([0,size.width]).domain(d3.extent(data,d =&gt; d.booked))
          var y = d3.scaleLinear([size.height,0]).domain([23,156])
  
          var line = d3.line()
                          .x(d =&gt; x(d.booked))
                          .y(d =&gt; y(d.c_seat));
                          
              g.append('path').datum(data).attr('stroke-width','1').attr('stroke','red').style('transform','scale(60)').attr('d',line);
  } 
  
  addLineGraph([
    {
      "booked": 0,
      "c_seat": 23
    },
    {
      "booked": 143000,
      "c_seat": 34.5
    },
    {
      "booked": 17747436,
      "c_seat": 34.5
    },
    {
      "booked": 25724206,
      "c_seat": 60
    },
    {
      "booked": 346513093,
      "c_seat": 75
    },
    {
      "booked": 347831593,
      "c_seat": 91.75
    },
    {
      "booked": 432490753,
      "c_seat": 98.75
    },
    {
      "booked": 508046733,
      "c_seat": 98.75
    },
    {
      "booked": 524946916,
      "c_seat": 112.75
    },
    {
      "booked": 968110526,
      "c_seat": 156.25
    }
  ])</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://d3js.org/d3.v4.js"&gt;&lt;/script&gt;
  &lt;div id="chart"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>