D3 Examples - D3 Scales

xxxxxxxxxx
 
<!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>
​
<script>
var width = 960,
  height = 800;
​
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);
​
function linear() {
  d3.select(".axis")
    .transition()
    .duration(1500)
    .ease("sin-in-out")  
    .call(axis);  
  d3.select(".title")
    .transition()
    .duration(1500)
    .text("Linear Scale");
}
function log() {
  d3.select(".axis")
    .transition()
    .duration(1500)
    .ease("sin-in-out")  
    .call(logAxis);  
  d3.select(".title")
    .transition()
    .duration(1500)
    .text("Log Scale");    
}
function ln() {
  d3.select(".axis")
    .transition()
    .duration(1500)
    .ease("sin-in-out")  
    .call(lnAxis);  
  d3.select(".title")
    .transition()
    .duration(1500)
    .text("Natural Log Scale");    
}
function sqrt() {
  d3.select(".axis")
    .transition()
    .duration(1500)
    .ease("sin-in-out")  
    .call(sqrtAxis);  
  d3.select(".title")
    .transition()
    .duration(1500)
    .text("Square Root Scale");
}
function power() {
  d3.select(".axis")
    .transition()
    .duration(1500)
    .ease("sin-in-out")  
    .call(powerAxis); 
  d3.select(".title")
    .transition()
    .duration(1500)
    .text("Squared Power Scale");
}
</script>
</body>
</html>
    