madebyafox/D3 Scales.markdown

## README.md

      
    Raw
  

              README.md
            
          
    D3 Scales

Playing with D3 scale options, using transition
A Pen by Made By A Fox on CodePen.
License.

  
## D3 Scales.markdown

      
    Raw
  

              D3 Scales.markdown
            
          
    D3 Scales

Playing with D3 scale options, using transition
A Pen by Made By A Fox on CodePen.
License.

  
## index.html
<!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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>
No results found