Line Chart

<!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; }
    svg { width: 100%; height: 100%; }
  </style>
</head>

<body>
  <svg></svg>
  <script>
    let width = 800,
        height = 400,
        margin = 20,
        dotRadius = 6,

hoverTransition = d3.transition()
    			.ease(d3.easeLinear),

data = [
          { date: new Date(2017, 1, 1), value: 9 },
          { date: new Date(2017, 1, 2), value: 3 },
          { date: new Date(2017, 1, 3), value: 6 },
          { date: new Date(2017, 1, 4), value: 2 },
          { date: new Date(2017, 1, 5), value: 8 },
          { date: new Date(2017, 1, 6), value: 4 },
          { date: new Date(2017, 1, 7), value: 1 },
          { date: new Date(2017, 1, 8), value: 5 }
        ],

count = data.length,

// Scales
        xDomain = d3.extent(data, d => d.date),
        xScale = d3.scaleTime()
          .domain(xDomain)
          .range([margin, width]),

yScale = d3.scaleLinear()
          .domain([0, 10])
          .range([height - margin, 0]),

// Line
        line = d3.line()
          .x(d => xScale(d.date))
          .y(d => yScale(d.value)),

// Axes
        xAxis = d3.axisBottom()
    			.scale(xScale)
    			.ticks(count)
    			.tickFormat(d3.timeFormat("%b %d")),
        yAxis = d3.axisLeft()
    			.scale(yScale),

// Elements
        svg = d3.select('svg')
    			.attr('width', width),
        
        dateAxis = svg.append('g')
    			.attr('transform', `translate(0 ${height - margin})`)
    			.call(xAxis),
        
        numberAxis = svg.append('g')
    			.attr('transform', `translate(${margin} 0)`)
    			.call(yAxis),

linePath = svg.append('path')
    			.attr('d', line(data))
    			.attr('fill', 'none')
    			.attr('stroke', 'salmon')
    			.attr('stroke-width', 3),
        
        dots = svg.append('g')
          .selectAll('circle')
          .data(data)
          .enter().append('circle')
          .attr('cx', d => xScale(d.date))
          .attr('cy', d => yScale(d.value))
          .attr('r', dotRadius)
    			.attr('fill', 'salmon')
    			.attr('stroke', 'white')
    			.attr('stroke-width', 2)
          .style('cursor', 'pointer')
          .on('mouseenter', function() {
            d3.select(this)
            	.interrupt()
              .transition(hoverTransition)
            	.duration(300)
              .attr('r', dotRadius * 2);
          })
          .on('mouseleave', function() {
            d3.select(this)
            	.interrupt()
              .transition(hoverTransition)
            	.duration(300)
              .attr('r', dotRadius);
          });

</script>
</body>

https://d3js.org/d3.v4.min.js