D3 Scales

Playing with D3 scale options, using transition

<!doctype html>
<meta charset="utf-8">
<head>
  <script src="//d3js.org/d3.v3.min.js"></script>
  <style>
  
.axis .title {
  font: 20px helvetica;
}
.axis text {
  font: 10px sans-serif;
}

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

button {
  color: none;
  border: 2px black solid;
  margin: 10px;
  border-radius: 5px;
  text-decoration: none;
  padding: 10px;
  font-size: 12px;
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -o-transition: .3s;
  display: inline-block;
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -o-transition: .3s;
  background-color:white;
}

button:hover {
  background-color: black;
  color: white
}

</style>
</head>
<body>
  <button id="rescaleLinear"onclick="linear()">Linear</button>
  <button id="rescaleLog" onclick="log();">Logarithmic</button>
  <button id="rescaleLn" onclick="ln();">Natural Log</button>
  <button id="rescaleSqrt" onclick="sqrt();">SquareRoot</button>
  <button id="rescalePower" onclick="power();">Power^2</button>

var domain1Day = [+new Date(2016, 1, 1), +new Date(2016, 1, 2)];
var domain1Month = [+new Date(2000, 1, 1), +new Date(2000, 2, 1)];
var simpleDomain = [0,10];
var simpleRange = [0,width];

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

//--------linear-------------------
var scale = d3.scale.linear()
    .domain(simpleDomain)
    .range([0, width]);

var axis = d3.svg.axis()
    .scale(scale);

var g = svg.append("g")
    .attr("class","axis")
    .attr("transform", "translate(0,50)")
    .call(axis);

g.append("text")
    .attr("class","title")                     
    .attr("transform","translate(0,-20)")
    .text("Linear Scale");

//-------power scale ----------------
var powerScale = d3.scale.pow().exponent(2)
    .domain(simpleDomain)
    .range(simpleRange);

var powerAxis = d3.svg.axis()
    .scale(powerScale);

//-------sqrt scale ----------------
var sqrtScale = d3.scale.sqrt()
    .domain(simpleDomain)
    .range(simpleRange);

var sqrtAxis = d3.svg.axis()
    .scale(sqrtScale);

//-------log scale ----------------
var logScale = d3.scale.log()
    .domain([1, 10])
    .range(simpleRange);

var logAxis = d3.svg.axis()
    .ticks(20, ",.1s")
    .scale(logScale);

//-------log scale ----------------
var lnScale = d3.scale.log()
    .base(Math.E)
    .domain([1, 10])
    .range(simpleRange);

var lnAxis = d3.svg.axis()
    .ticks(20, ",.1s")
    .scale(lnScale);

https://d3js.org/d3.v3.min.js