jcreedcmu · July 12, 2013 15:22
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <style type="text/css">

 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">
 var m = [80, 80, 80, 80],
    w = 960 - m[1] - m[3],
    h = 500 - m[0] - m[2];

 // Scales and axes. Note the inverted domain for the y-scale: bigger is up!
 var x = d3.scale.linear().range([0, w]),
    logy = d3.scale.log().range([h, 0]),
    liny = d3.scale.linear().range([h, 0]),
    yAxis = d3.svg.axis().scale(liny).ticks(4).orient("right");

 var measure = liny;

 // An area generator, for the light fill.
 var area = d3.svg.area()
      .x(function(d, n) { return x(n); })
      .y0(h);

 function makeLin() {
  measure = liny;
  yAxis.scale(liny);
  area.y1(measure);
 }

 function makeLog() {
  measure = logy;
  yAxis.scale(logy);
  area.y1(measure);
 }

 makeLin();

 var data = [1.39446, 5.36642, 1.49858, 50.45243];

 // Compute the minimum and maximum date, and the maximum val.
 x.domain([0, data.length - 1]);
 liny.domain([0, d3.max(data)]).nice();
 logy.domain([1, d3.max(data)]).nice();

 // Add an SVG element with the desired dimensions and margin.
 var svg = d3.select("body").append("svg:svg")
      .attr("width", w + m[1] + m[3])
      .attr("height", h + m[0] + m[2])
      .append("svg:g")
      .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

 // Add the area path.
 svg.append("svg:path")
  .attr("class", "area")
  .attr("d", area(data));

 // Add the y-axis.
 svg.append("svg:g")
  .attr("class", "y axis")
  .attr("transform", "translate(" + w + ",0)")
  .call(yAxis);

 showLog = function() {
  var t = svg.transition().duration(750);
  t.select(".y.axis").call(yAxis);
  t.select(".area").attr("d", area(data));
 };

 var islog = false;

 // on click, toggle log y-axis

 svg.on("click", function() {
  islog = !islog;
  if (islog) makeLog(); else makeLin();
  var t = svg.transition().duration(750);
  t.select(".y.axis").call(yAxis);
  t.select(".area").attr("d", area(data));
 });
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<style type="text/css">

	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">
	var m = [80, 80, 80, 80],
	w = 960 - m[1] - m[3],
	h = 500 - m[0] - m[2];

	// Scales and axes. Note the inverted domain for the y-scale: bigger is up!
	var x = d3.scale.linear().range([0, w]),
	logy = d3.scale.log().range([h, 0]),
	liny = d3.scale.linear().range([h, 0]),
	yAxis = d3.svg.axis().scale(liny).ticks(4).orient("right");

	var measure = liny;

	// An area generator, for the light fill.
	var area = d3.svg.area()
	.x(function(d, n) { return x(n); })
	.y0(h);

	function makeLin() {
	measure = liny;
	yAxis.scale(liny);
	area.y1(measure);
	}

	function makeLog() {
	measure = logy;
	yAxis.scale(logy);
	area.y1(measure);
	}

	makeLin();

	var data = [1.39446, 5.36642, 1.49858, 50.45243];

	// Compute the minimum and maximum date, and the maximum val.
	x.domain([0, data.length - 1]);
	liny.domain([0, d3.max(data)]).nice();
	logy.domain([1, d3.max(data)]).nice();

	// Add an SVG element with the desired dimensions and margin.
	var svg = d3.select("body").append("svg:svg")
	.attr("width", w + m[1] + m[3])
	.attr("height", h + m[0] + m[2])
	.append("svg:g")
	.attr("transform", "translate(" + m[3] + "," + m[0] + ")");

	// Add the area path.
	svg.append("svg:path")
	.attr("class", "area")
	.attr("d", area(data));

	// Add the y-axis.
	svg.append("svg:g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + w + ",0)")
	.call(yAxis);

	showLog = function() {
	var t = svg.transition().duration(750);
	t.select(".y.axis").call(yAxis);
	t.select(".area").attr("d", area(data));
	};

	var islog = false;

	// on click, toggle log y-axis

	svg.on("click", function() {
	islog = !islog;
	if (islog) makeLog(); else makeLin();
	var t = svg.transition().duration(750);
	t.select(".y.axis").call(yAxis);
	t.select(".area").attr("d", area(data));
	});
	</script>
	</body>
	</html>