nibblebot · February 6, 2013 22:53
diff --git a/gistfile1.html b/gistfile1.html
 <head>
  <style>
  svg {
    background-color: #ccc;
  }
  </style>
  <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.0.1/d3.v3.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/1.0.0-rc.3/lodash.min.js"></script>
 </head>
 <body>
  <script>
  var width = 400;
  var height = 200;
  var xValues = [10, 20, 30, 40, 50, 60];
  var yValues = [1, 2, 3, 4, 5, 6];

  var data = _.zip(xValues, yValues);
  var xScale = d3.scale.linear()
    .domain([0, d3.max(xValues)])
    .rangeRound([0, width]);

  var yScale = d3.scale.linear()
    .domain([-d3.max(yValues), 0])
    .rangeRound([-height, 0]);

  var x = function(d) { return xScale(d[0]); };
  var y = function(d) { return yScale(d[1]); };

  var line = d3.svg.line().x(x).y(y)
  var svg = d3.select('body')
  .append('svg')
    .attr('width', width)
    .attr('height', height)
  .append('g')
    // make origin bottom left
    .attr('transform', 'scale(1 -1) translate(0 -200)')

  svg.selectAll('circle')
    .data(data)
  .enter()
  .append('circle')
    .attr('cx', x)
    .attr('cy', y)
    .attr('r', 5);

  svg.append('svg:path')
    .attr('d', line(data))
    .attr('stroke', 'black');

  </script>
 </body>
	<head>
	<style>
	svg {
	background-color: #ccc;
	}
	</style>
	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.0.1/d3.v3.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/1.0.0-rc.3/lodash.min.js"></script>
	</head>
	<body>
	<script>
	var width = 400;
	var height = 200;
	var xValues = [10, 20, 30, 40, 50, 60];
	var yValues = [1, 2, 3, 4, 5, 6];

	var data = _.zip(xValues, yValues);
	var xScale = d3.scale.linear()
	.domain([0, d3.max(xValues)])
	.rangeRound([0, width]);

	var yScale = d3.scale.linear()
	.domain([-d3.max(yValues), 0])
	.rangeRound([-height, 0]);

	var x = function(d) { return xScale(d[0]); };
	var y = function(d) { return yScale(d[1]); };

	var line = d3.svg.line().x(x).y(y)
	var svg = d3.select('body')
	.append('svg')
	.attr('width', width)
	.attr('height', height)
	.append('g')
	// make origin bottom left
	.attr('transform', 'scale(1 -1) translate(0 -200)')

	svg.selectAll('circle')
	.data(data)
	.enter()
	.append('circle')
	.attr('cx', x)
	.attr('cy', y)
	.attr('r', 5);

	svg.append('svg:path')
	.attr('d', line(data))
	.attr('stroke', 'black');

	</script>
	</body>