Scale comparison (work in progress)

_.md

[ Launch: Scale comparison ] 2b4acb5db2d4e38cabe3 by GitNoise

config.json

{"description":"Scale comparison (work in progress)","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/YyELIEC.png"}

inlet.js

var svg = d3.select("svg")
svg.attr({ width: "100%", height: "100%"});

// scale


// render 


var data = d3.range(0,15,3);
render(data, "original", 100, data)


var quantileScale = d3.scale.quantile().domain(d3.extent(data)).range([0, 10, 20, 30, 40, 50]);
var dataQuantile = data.map(function(d) { return quantileScale(d); });
render(dataQuantile, "quantile", 275, quantileScale.quantiles().map(Math.round));

var linearScale = d3.scale.linear().domain(d3.extent(data)).range([0, 50]);
var linearData = data.map(linearScale);
render(linearData, "linear", 450, linearData);


var quantScale = d3.scale.quantize().domain(d3.extent(data)).range([0, 25, 50]);
var quantData = data.map(quantScale);
render(quantData, "quantize", 650, quantData);


function render (data, name, yoffset, scale) {
  
  svg.append("text").attr({x: 10, y: yoffset}).text(name)
  svg.selectAll("."+name).data(data).enter().append("circle").classed(name, true)
  .attr({
    cx: function(d,i) { return 100 + 100 * i; },
    cy: function(d) { return yoffset - (d/4); },
    r: function(d) { return d; }
  })

  var max = d3.max(data);
  svg.selectAll("."+name+"txt").data(scale).enter()
  .append("text").classed(name + "txt", true)
  .attr({
    x: function(d,i) { return 100 + 100 * i; },
    y: yoffset + max + 14
  })
  .text(function(d) { return d})
  .style({"font-size": "20px", "text-anchor": "middle"});
}