D3 Examples - Line chart

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
​
    .line {
      fill: none;
      stroke: #000;
      stroke-width: 1.5px;
    }
​
    .dot {
      fill: white;
      stroke: steelblue;
      stroke-width: 1.5px;
    }
  </style>
</head>
​
<body>
  <div id="bar-chart">
    <svg width="800" height="600">
      <g class="chart" transform="translate(40,40)">
        <g class="x-axis"
           transform="translate(0,400)"/>
        <g class="y-axis"/>
      </g>
    </svg>
  </div>
<script>
    var data = [
      {x:0, y:336},
      {x:1, y:98},
      {x:2, y:79},
      {x:3, y:60},
      {x:4, y:30}
    ];
    
    var yScale = d3.scaleLinear()
      .domain([0,336])
      .range([400,0])
  
    var xScale = d3.scalePoint()
      .domain(d3.range(data.length))
      .range([0,200])
    
    var xAxis = d3.axisBottom(xScale);
    d3.select(".x-axis")   
      .call(xAxis)
    
    var yAxis = d3.axisLeft(yScale)
    d3.select(".y-axis")
      .call(yAxis)
    
    var lineData = d3.line()
      .x(function(d,i){
        return xScale(i)
      })
      .y(function(d){
        return yScale(d.y)
      })
      .curve(d3.curveMonotoneX)
​
    var chartHolder = d3.select("#bar-chart .chart")
  
    chartHolder
      .append("path")
      .datum(data)
      .classed('line', true)
        .attr('d', lineData)
    
    var dot = chartHolder
      .selectAll('.dot')
      .data(data)
      .enter()
      .append('circle')
      .classed('dot', true)
      .attr("cx", lineData.x())
      .attr("cy", lineData.y())
      .attr("r", 4)
  
    dot.exit()
      .remove();
  </script>
  
</body>
    