D3 Scales

by Ryan

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>

CSS

.top {
    float: left;
    width: 300px;
}

.inner {
    float: none;
}

JavaScript

var scale1 = d3.scale.linear().domain([0, 10]).range([0, 100]);
var scale2 = d3.scale.linear().domain([0, 100]).range([0, 10]);

var body = d3.select("body");

var topDiv = d3.select("body").append("div")
    .attr("class", "top")
    .attr("id", "scale1")
    .text("scale1");
topDiv.selectAll("div").data([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]).enter().append("div")
    .attr("class", "inner")
    .text( function(d) { return "" + d + " : " + scale1(d); } );


var topDiv = d3.select("body").append("div")
    .attr("class", "top")
    .attr("id", "scale2")
    .text("scale2");
topDiv.selectAll("div").data([0, 15, 30, 45, 60, 75, 90, 100]).enter().append("div")
    .attr("class", "inner")
    .text( function(d) { return "" + d + " : " + scale2(d); } );