denisemauldin/index.html

## 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>
	<!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>