abierbaum/app.js

## app.js
//
// Chart example
//
// - Shows multiple lines in one chart
// - User can see scale showing the values and the timeframe
// - Each line has separate color
// - Show legend of groups with colors
// - Support transitions to:
//   - Change data shown
//   - Change the items shown (keep colors for old ones)
//

var data,
    w = 700,
    h = 300,
    padding = 80;

function nextVal() {
  nextVal.v = ~~Math.max(10, Math.min(90, nextVal.v + 10 * (Math.random() - .5)))
  return nextVal.v;
}
nextVal.v = 40;

function sampleBuilder(i) {
  var start = new Date(2009, 5, 10);
  return {
    timestamp: d3.time.week.offset(start, i),
    value : nextVal()
  };
}

// Build up list of data ranges
data = [
  {
    name: 'Name 1',
    data: d3.range(100).map(sampleBuilder)
  },
  {
    name: 'Name 2',
    data: d3.range(100).map(sampleBuilder)
  },
  {
    name: 'Name 3',
    data: d3.range(100).map(sampleBuilder)
  },
  {
    name: 'Name 4',
    data: d3.range(100).map(sampleBuilder)
  }
];

var max_val = d3.max(
  data.map(function(entry) {
    return d3.max(entry.data,
      function(v) { return v.value; }
    );
  })
);

// Scales
//x = d3.scale.linear()
//    .domain([0, data.length - 1])
//    .range([0, w]);
x = d3.time.scale()
    .domain([data[0].data[0].timestamp, data[0].data[data[0].data.length-1].timestamp])
    .range([0, w]);
y = d3.scale.linear()
    .domain([0, max_val])
    .range([h, 0])
    .nice();

//xAxis = d3.svg.axis().scale(x).tickSize(15,10,5).tickSubdivide(1);
xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true);
yAxis = d3.svg.axis().scale(y).ticks(4).orient('right');
colors = d3.scale.category10();

// Base vis layer
var chart_svg = d3.select('body').append('svg:svg')
                  .attr('width', w + (2*padding))
                  .attr('height', h + (2*padding))
                .append('svg:g')
                  .attr('transform', 'translate(' + padding + ',' + padding + ')');

var line = d3.svg.line()
            .x(function(d) { return x(d.timestamp); })
            .y(function(d) { return y(d.value); })
            .interpolate('monotone');

var area = d3.svg.area()
           .interpolate('monotone')
           .x(function(d) { return x(d.timestamp); })
           .y0(h)
           .y1(function(d) { return y(d.value); });

// Add x axis
chart_svg.append('svg:g')
  .attr('class', 'x axis')
  .attr('transform', 'translate(0,' + h + ')')
  .call(xAxis);

chart_svg.append('svg:g')
  .attr('class', 'y axis')
  .attr('transform', 'translate(' + w + ',0)')
  .call(yAxis);


// Add path layer
chart_svg.selectAll('path.line')
     .data(data)
  .enter().append('svg:path')
     .attr('class', 'line')
     .style('stroke', function(d, i) { return colors(i); } )
     .attr("d", function(entry) { return line(entry.data); });


## index.html
<!DOCTYPE html>
<html>
  <head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.2"></script>
    <style type="text/css">
      path {
        fill: none;
        stroke: #000;
        stroke-width: 2px;
      }

      circle {
        fill: #ccc;
        stroke: #777;
        stroke-width: 1px;
      }

      .chart rect {
        stroke: white;
        fill: steelblue;
      }

body {
  font: 10px sans-serif;
  margin: 0;
}

path.line {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;
}

path.area {
  fill: #e7e7e7;
}

.axis {
  shape-rendering: crispEdges;
}

.x.axis line {
  stroke: #fff;
}

.x.axis .minor {
  stroke-opacity: .5;
}

.x.axis path {
  display: none;
}

.y.axis line, .y.axis path {
  fill: none;
  stroke: #000;
}

    </style>
  </head>
  <body>
   <script type="text/javascript" src="app.js"></script>
  </body>
</html>

</html>
	//
	// Chart example
	//
	// - Shows multiple lines in one chart
	// - User can see scale showing the values and the timeframe
	// - Each line has separate color
	// - Show legend of groups with colors
	// - Support transitions to:
	// - Change data shown
	// - Change the items shown (keep colors for old ones)
	//

	var data,
	w = 700,
	h = 300,
	padding = 80;

	function nextVal() {
	nextVal.v = ~~Math.max(10, Math.min(90, nextVal.v + 10 * (Math.random() - .5)))
	return nextVal.v;
	}
	nextVal.v = 40;

	function sampleBuilder(i) {
	var start = new Date(2009, 5, 10);
	return {
	timestamp: d3.time.week.offset(start, i),
	value : nextVal()
	};
	}

	// Build up list of data ranges
	data = [
	{
	name: 'Name 1',
	data: d3.range(100).map(sampleBuilder)
	},
	{
	name: 'Name 2',
	data: d3.range(100).map(sampleBuilder)
	},
	{
	name: 'Name 3',
	data: d3.range(100).map(sampleBuilder)
	},
	{
	name: 'Name 4',
	data: d3.range(100).map(sampleBuilder)
	}
	];

	var max_val = d3.max(
	data.map(function(entry) {
	return d3.max(entry.data,
	function(v) { return v.value; }
	);
	})
	);

	// Scales
	//x = d3.scale.linear()
	// .domain([0, data.length - 1])
	// .range([0, w]);
	x = d3.time.scale()
	.domain([data[0].data[0].timestamp, data[0].data[data[0].data.length-1].timestamp])
	.range([0, w]);
	y = d3.scale.linear()
	.domain([0, max_val])
	.range([h, 0])
	.nice();

	//xAxis = d3.svg.axis().scale(x).tickSize(15,10,5).tickSubdivide(1);
	xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true);
	yAxis = d3.svg.axis().scale(y).ticks(4).orient('right');
	colors = d3.scale.category10();

	// Base vis layer
	var chart_svg = d3.select('body').append('svg:svg')
	.attr('width', w + (2*padding))
	.attr('height', h + (2*padding))
	.append('svg:g')
	.attr('transform', 'translate(' + padding + ',' + padding + ')');

	var line = d3.svg.line()
	.x(function(d) { return x(d.timestamp); })
	.y(function(d) { return y(d.value); })
	.interpolate('monotone');

	var area = d3.svg.area()
	.interpolate('monotone')
	.x(function(d) { return x(d.timestamp); })
	.y0(h)
	.y1(function(d) { return y(d.value); });

	// Add x axis
	chart_svg.append('svg:g')
	.attr('class', 'x axis')
	.attr('transform', 'translate(0,' + h + ')')
	.call(xAxis);

	chart_svg.append('svg:g')
	.attr('class', 'y axis')
	.attr('transform', 'translate(' + w + ',0)')
	.call(yAxis);


	// Add path layer
	chart_svg.selectAll('path.line')
	.data(data)
	.enter().append('svg:path')
	.attr('class', 'line')
	.style('stroke', function(d, i) { return colors(i); } )
	.attr("d", function(entry) { return line(entry.data); });
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.2"></script>
	<style type="text/css">
	path {
	fill: none;
	stroke: #000;
	stroke-width: 2px;
	}

	circle {
	fill: #ccc;
	stroke: #777;
	stroke-width: 1px;
	}

	.chart rect {
	stroke: white;
	fill: steelblue;
	}

	body {
	font: 10px sans-serif;
	margin: 0;
	}

	path.line {
	fill: none;
	stroke: #666;
	stroke-width: 1.5px;
	}

	path.area {
	fill: #e7e7e7;
	}

	.axis {
	shape-rendering: crispEdges;
	}

	.x.axis line {
	stroke: #fff;
	}

	.x.axis .minor {
	stroke-opacity: .5;
	}

	.x.axis path {
	display: none;
	}

	.y.axis line, .y.axis path {
	fill: none;
	stroke: #000;
	}

	</style>
	</head>
	<body>
	<script type="text/javascript" src="app.js"></script>
	</body>
	</html>

	</html>