gchan/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font-family: sans-serif;
  font-size: 12px;
}

svg text {
  font: 10px sans-serif;
}

.axis .tick line {
  stroke: black;
  shape-rendering: crispEdges;
}

</style>
<body>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.3.10/d3.min.js"></script>

<div>
  <label for="exponent">Exponent</label>
  <input type="number" min="0" max="100" step="0.1" value="2" id="exponent" name="exponent">
</div>

<script>

var margin = { top: 20, right: 20, bottom: 20, left: 40 },
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var y = d3.scale.pow()
    .domain([0, 100])
    .range([height, 0]);

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .outerTickSize(0)
    .innerTickSize(3);

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var axis = svg.append("g")
    .attr("class", "axis")
    .call(yAxis)

var ticks = axis.selectAll(".tick");

ticks.attr("transform", "translate(0," + height + ")");

axis.selectAll("line")
    .attr("x2", width);

axis.selectAll("text")
    .style("opacity", 0)

function setExponent(exponent, duration) {
  y = y.exponent(exponent);

  ticks.transition()
      .duration(duration)
      .attr("transform", function(d, i) {
        return "translate(0," + y(d) + ")";
      })
    .selectAll("text")
      .style("opacity", 1)
}

d3.select("input[name='exponent']")
  .on('change', function(){ setExponent(this.value, 0); })
  .on('keyup', function(){ setExponent(this.value, 0); });

setExponent(2, 600);

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font-family: sans-serif;
	font-size: 12px;
	}

	svg text {
	font: 10px sans-serif;
	}

	.axis .tick line {
	stroke: black;
	shape-rendering: crispEdges;
	}

	</style>
	<body>
	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.3.10/d3.min.js"></script>

	<div>
	<label for="exponent">Exponent</label>
	<input type="number" min="0" max="100" step="0.1" value="2" id="exponent" name="exponent">
	</div>

	<script>

	var margin = { top: 20, right: 20, bottom: 20, left: 40 },
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var y = d3.scale.pow()
	.domain([0, 100])
	.range([height, 0]);

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left")
	.outerTickSize(0)
	.innerTickSize(3);

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var axis = svg.append("g")
	.attr("class", "axis")
	.call(yAxis)

	var ticks = axis.selectAll(".tick");

	ticks.attr("transform", "translate(0," + height + ")");

	axis.selectAll("line")
	.attr("x2", width);

	axis.selectAll("text")
	.style("opacity", 0)

	function setExponent(exponent, duration) {
	y = y.exponent(exponent);

	ticks.transition()
	.duration(duration)
	.attr("transform", function(d, i) {
	return "translate(0," + y(d) + ")";
	})
	.selectAll("text")
	.style("opacity", 1)
	}

	d3.select("input[name='exponent']")
	.on('change', function(){ setExponent(this.value, 0); })
	.on('keyup', function(){ setExponent(this.value, 0); });

	setExponent(2, 600);

	</script>