Æliens

    var data = [32, 57, 112],
        dataEnter = data.concat(293),
        dataExit = data.slice(0, 2),
        w = 360,
        h = 180,
        x = d3.scale.ordinal().domain([57, 32, 112]).rangePoints([0, w], 1),
        y = d3.scale.ordinal().domain(data).rangePoints([0, h], 2);
  

    (function() {
      var svg = d3.select("#chart-8").append("svg")
          .attr("width", w)
          .attr("height", h);
    
      var g = svg.selectAll("g")
          .data(data)
        .enter().append("g")
          .attr("transform", function(d) { return "translate(" + x(d) + "," + y(d) + ")"; });
    
      g.append("circle")
          .attr("class", "little")
          .attr("r", 12);
    
      g.append("text")
          .attr("dy", ".35em")
          .attr("text-anchor", "middle")
          .text(String);
    
  

      var g = svg.selectAll(".data")
          .data(dataEnter)
        .enter().append("g")
          .attr("class", "data")
          .attr("transform", function(d, i) { return "translate(" + 20 * (i + 1) + ",20)"; })
          .filter(function(d, i) { return i == 3; });
    
  

      g.append("circle")
          .attr("class", "little")
          .attr("r", 1e-6);
    
      g.append("rect")
          .attr("x", -10)
          .attr("y", -10)
          .attr("width", 20)
          .attr("height", 20)
          .style("fill", "lightgreen")
          .style("stroke", "green");
    
      g.append("text")
          .attr("dy", ".35em")
          .attr("text-anchor", "middle")
          .text(String);
  
   

      d3.select("#chart-8 button").on("click", function() {
        g.attr("transform", "translate(80,20)");
        g.select("circle").attr("r", 1e-6);
        g.select("rect").style("opacity", 1);
        var t = g.transition().duration(750);
        t.attr("transform", "translate(160,100)");
        t.select("circle").attr("r", Math.sqrt);
        t.select("rect").style("opacity", 1e-6);
      });
    })();