Line graph noodling

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

<body>

var itemBuckets = salesGenerator.itemBuckets;

// d3 margin conventions.start()
var margin = {
  left: 50,
  top: 10,
  bottom: 30,
  right: 10
};

var width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var svg = d3.select('body').append('svg')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom);

var container = svg.append('g').attr('transform', 'translate('+[margin.left,margin.top]+')')
// d3 margin conventions.end()

var xScale = d3.scale.linear()
  .domain([0,23])
  .range([0, width]);

var yScale = d3.scale.linear()
  .domain([0, d3.max(itemBuckets, function(d) { return d.maxSales; })])
  .range([height, 0]);

var line = d3.svg.line()
  .x(function(d, i) { return xScale(i); })
  .y(function(d) { return yScale(d); });

var xAxis = d3.svg.axis().scale(xScale);

var yAxis = d3.svg.axis().scale(yScale).orient('left');

container.append('g')
  .attr('class','x axis')
  .attr('transform','translate(0,'+height+')')
  .call(xAxis);

container.append('g')
  .attr('class','y axis')
  .call(yAxis);

var lineLayer = container.append('g');

function update(data) {
  var lines = lineLayer.selectAll('.line')
    .data(data);

lines.enter().append('path')
    .attr('d', function(d) { return line(d.buckets) })
    .attr('class', 'line')
    .style('stroke', function(d) { return d.color; })
}

update(itemBuckets);

</script>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js