Responsive D3 chart by mhkeller

index.html

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

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

#container{
  width: 100%;
  max-width: 900px;
  height: 300px;
  background-color: #0fc;
}

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

var container
var svg
var g
var linePath

var xScale = d3.scaleLinear()
var yScale = d3.scaleLinear()

var xExtent
var yExtent

var width
var height

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

var chartData

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}]

function bakeChart () {
  container = d3.select('body')
    .append("div")
    .attr('id', 'container')

  svg = container
    .append("svg")

  g = svg
    .append('g')

  linePath = g
    .append('path')
    .classed('line', true)
    .datum(chartData)
}

function setValues () {
  var bbox = container.node().getBoundingClientRect()

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

  width = bbox.width
  height = bbox.height

  xScale.domain(xExtent)
    .range([0, width])

  yScale.domain(yExtent)
    .range([height, 0])
}

function renderChart () {
  svg.attr("width", width)
    .attr("height", height)

  linePath
    .attr('d', line)
}

function onResize () {
  setValues(chartData)
  renderChart(chartData)
}

loadData('my/data.json', function (d) {
  chartData = d
  bakeChart()
  setValues()
  renderChart()
})

window.addEventListener('resize', onResize)

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

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