D3 v4 fake line plot by denisemauldin

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </head>
  <body>
  <svg width="300" height="300"></svg>
  <script>
// constants to help with the X axis
var limit = 60 * 1,
    duration = 360000,
    now = new Date(Date.now() - duration);

var width = 400,
    height = 200

var x = d3.scaleTime()
    .domain([now - duration, now - (limit-2)])
    .range([0, width])
var y = d3.scaleLinear()
    .domain([0, 100])
    .range([height, 0])
    
var svg = d3.select('svg')
    .attr('class', 'chart')
    .attr('width', width)
    .attr('height', height + 300)

ADJUSTME = 3600;
var line = d3.line()
    .x(function(d, i) { return x(now - (limit - 1 - i) * ADJUSTME) })
    .y(function(d) { return y(d) })

var xAxis = d3.axisBottom(x).ticks(d3.timeMinute.every(1))
svg.append('g')
    .attr('class', 'x axis')
    .attr('transform', 'translate(0,' + height + ')')
    .call(xAxis)
    
var yAxis = d3.axisLeft(y);
svg.append('g')
  .attr('class', 'y axis')
  .call(yAxis)
  .append("text")
    .attr("fill", "#000")
    .attr("transform", "rotate(-90)")
    .attr("y", 5)
    .attr("dy", "1.0em")
    .attr("text-anchor", "end")
    .attr('font-size', "1.5em")
    .text("Temp F");

// create dummy data
var temps = [];
for (var i=0; i<60; i++)
{
  temps.push(i);
}

svg.append('g')
  .append('path')
  .datum(temps)
  .attr('class', 'current' + ' group')
  .style('stroke', 'purple')
  .attr('d', line)
</script>
</body>
</html>