D3 Examples - Line graph noodling

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<style>
  html, body { margin: 0; }
  .line {
    fill: none;
    stroke-width: 2.0;
  }
  .axis .tick line, .axis path.domain {
    fill: none;
    stroke: black;
  }
  .axis .tick text {
    font-family: sans-serif;
  }
</style>
​
<body>
​
<script src="https://d3js.org/d3.v3.js"></script>
<script src="sales-generator.js"></script>
​
<script>
​
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>
​
    