mhkeller/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

path {
  fill: none;
  stroke: #000;
  stroke-width: 10px;
}

#container{
  width: 900px;
  height: 300px;
  background-color: #f0c;
}

</style>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>

var width = 900
var height = 300

var container = d3.select('body')
  .append("div")
  .attr('id', 'container')

var svg = container
  .append("svg")
    .attr('width', width)
    .attr('height', height)

var xScale = d3.scaleLinear()
  .range([0, width])

var yScale = d3.scaleLinear()
  .range([height, 0])

var g = svg.append("g")

var data = [{"key":0,"value":1},{"key":1,"value":5},{"key":2,"value":10},{"key":3,"value":15},{"key":4,"value":20},{"key":5,"value":25},{"key":6,"value":30},{"key":7,"value":35},{"key":8,"value":40},{"key":9,"value":45},{"key":10,"value":49},{"key":11,"value":91},{"key":12,"value":88},{"key":13,"value":70},{"key":14,"value":93}]

loadData('my/data.json', function (data) {
  svg.attr("width", width)
    .attr("height", height)

  var yExtent = d3.extent(data, function (d) {
    return d.value
  })
  var xExtent = d3.extent(data, function (d) {
    return d.key
  })

  yScale.domain(yExtent)
  xScale.domain(xExtent)

  var line = d3.line()
    .x(function (d) { return xScale(d.key) })
    .y(function (d) { return yScale(d.value) })

  g.append('path')
    .classed('line', true)
    .datum(data)
    .attr('d', line)
})

function loadData (str, cb) {
  cb(data)
}

</script>
</body>
</html>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	path {
	fill: none;
	stroke: #000;
	stroke-width: 10px;
	}

	#container{
	width: 900px;
	height: 300px;
	background-color: #f0c;
	}

	</style>
	<body>
	<script src="//d3js.org/d3.v4.min.js"></script>
	<script>

	var width = 900
	var height = 300

	var container = d3.select('body')
	.append("div")
	.attr('id', 'container')

	var svg = container
	.append("svg")
	.attr('width', width)
	.attr('height', height)

	var xScale = d3.scaleLinear()
	.range([0, width])

	var yScale = d3.scaleLinear()
	.range([height, 0])

	var g = svg.append("g")

	var data = [{"key":0,"value":1},{"key":1,"value":5},{"key":2,"value":10},{"key":3,"value":15},{"key":4,"value":20},{"key":5,"value":25},{"key":6,"value":30},{"key":7,"value":35},{"key":8,"value":40},{"key":9,"value":45},{"key":10,"value":49},{"key":11,"value":91},{"key":12,"value":88},{"key":13,"value":70},{"key":14,"value":93}]

	loadData('my/data.json', function (data) {
	svg.attr("width", width)
	.attr("height", height)

	var yExtent = d3.extent(data, function (d) {
	return d.value
	})
	var xExtent = d3.extent(data, function (d) {
	return d.key
	})

	yScale.domain(yExtent)
	xScale.domain(xExtent)

	var line = d3.line()
	.x(function (d) { return xScale(d.key) })
	.y(function (d) { return yScale(d.value) })

	g.append('path')
	.classed('line', true)
	.datum(data)
	.attr('d', line)
	})

	function loadData (str, cb) {
	cb(data)
	}

	</script>
	</body>
	</html>