Don't lie by aaizemberg

index.html

<!DOCTYPE html>
<html>
<head>
<script src="//d3js.org/d3.v3.min.js"></script>
  <meta charset="utf-8">
  <title>don't lie</title>
</head>
<body>
  <div id="uno"></div>
  <div id="dos"></div>
<script>
  var datos = [25,50,100];

  var r = d3.scale.sqrt()
            .domain([0, 100])
            .range([0, 50]);  

  var svg1 = d3.select("#uno")
             .append("svg")
             .attr("width", 400)
             .attr("height", 100);

  var svg2 = d3.select("#dos")
             .append("svg")
             .attr("width", 400)
             .attr("height", 100);

svg1.selectAll("circle")
    .data(datos)
    .enter()
    .append("circle")
    .attr("r", function(d,i) { return d/2; } )
    .attr("cx", function(d,i) { return (i+1) * 100; } )
    .attr("cy", 50);

  svg2.selectAll("circle")
    .data(datos)
    .enter()
    .append("circle")
// sin usar scale/domain/range 
//  .attr("r", function(d,i) { return 5*Math.sqrt(d); } )

// usando scale/domain/range con escala "sqrt"
    .attr("r", r )
// otra forma de escribir lo mismo
//  .attr("r", function(d,i) { return r(d) } )
    .attr("cx", function(d,i) { return (i+1) * 100; } )
    .attr("cy", 50);

</script>
</body>
</html>