topical media & game development

topical media & game development

[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

mobile-data-circle-04.htm / htm


  <script src="http://d3js.org/d3.v3.min.js"></script>
  <link rel="stylesheet" type="text/css" href="mobile-data-circle-style-d3.css">
  <script type="text/javascript">

data


    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);

</script> <h2 id="binding_data">binding data</h2> <p>This is beginning to look a lot like <a href="http://jquery.com/">jQuery</a>. More commonly, though, we want to use <em>data</em> to drive the appearance of our circles. To do that, we need some data. For the sake of example, let’s imagine that each of these circles represents a number: 32, 57 and 112. The <a href="https://github.com/mbostock/d3/wiki/Selections#data">data</a> operator binds these numbers to the circles:</p> <div class="chart" id="chart-5"> <pre class="code">circle.data([32, 57, 112]); </pre> <button>run</button>  </div> <script type="text/javascript">

script


  (function() {
    var svg = d3.select("#chart-5").append("svg")
        .attr("width", w)
        .attr("height", h);

circle


    svg.selectAll(".little")
        .data(data)
      .enter().append("circle")
        .attr("class", "little")
        .attr("cx", x)
        .attr("cy", y)
        .attr("r", 12);

select


    var g = svg.selectAll(".data")
        .data(data)
      .enter().append("g")
        .attr("class", "data")
        .attr("transform", function(d, i) { return "translate(" + 20 * (i + 1) + ",20)"; });
  
    g.append("rect")
        .attr("x", -10)
        .attr("y", -10)
        .attr("width", 20)
        .attr("height", 20);
  
    g.append("text")
        .attr("dy", ".35em")
        .attr("text-anchor", "middle")
        .text(String);

button


    d3.select("#chart-5 button").on("click", function() {
      g
          .attr("transform", function(d, i) { return "translate(" + 20 * (i + 1) + ",20)"; })
        .select("rect")
          .style("opacity", 1);

transition


      g.transition()
          .duration(750)
          .attr("transform", function(d) { return "translate(" + x(d) + "," + y(d) + ")"; })
        .select("rect")
          .style("opacity", 1e-6);
    });
  })();

</script> <p>All data in D3 is specified as an array of values. Conveniently, this mirrors the concept of a selection, which is just an array of elements. Notice then how the first number (the first <em>datum</em>, 32) is bound to the first circle (the first <em>element</em>, on top), the second number is bound to the second circle, and so on.</p>

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.