Taller Jacathon d3.js

_.md

[ Launch: Taller Jacathon d3.js ] 8e7f1af2e96ac0788240 by bluezio

config.json

{"description":"Taller Jacathon d3.js","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/0TfS57U.png"}

inlet.js

var data = [40, 30, 50]

var maxRadius = 30;
var padding = 10;
var separation = 5;
var colorScale = d3.scale.category10()
var radiusScale = d3.scale.sqrt()
  .domain([0, d3.max(data)])
  .range([0, maxRadius]);

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

svg.selectAll("circle")
   .data(data)
   .enter()
   .append("circle")
   .attr({
     cx: maxRadius + padding,
     cy: function (d, i) {
       return (1 + 2 * i) * (maxRadius + separation);
     },
     r: function (d) {
       return radiusScale(d);
     },
     fill: function (d, i) {
       return colorScale(i);
     }
   })
  .on("click", function(d) {
    d3.select(this)
       .transition().duration(1000)
       .attr({fill: "red", cy: 300});
  })