jcreedcmu/index.html

## 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>