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-all.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="all_together_now">all together now</h2> <p>Putting everything together, consider the three possible outcomes that result from joining data to elements:</p> <!--

overview


-->
  
  <ol>
  <li>enter - incoming actors, entering the stage.</li>
  
  <li>update - persistent actors, staying on stage.</li>
  
  <li>exit - outgoing actors, exiting the stage.</li>
  </ol>
<!--

--> <p>When we use the default join-by-index, either the enter or exit selection will be empty (or both): if there are more data than elements, the extra data are in the enter selection; if there are fewer data than elements, the extra elements are in the exit selection. However, by specifying a key function to the data operator, we can control exactly how data is bound to elements. And in this case, we have both enter and exit.</p> <div class="chart" id="chart-13"> <pre class="code">var circle = svg.selectAll("circle") .data([32, 57, 293], String); circle.enter().append("circle") .attr("cy", 90) .attr("cx", String) .attr("r", Math.sqrt); circle.exit().remove(); </pre> <button>run</button>  </div> <script type="text/javascript">

script


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

select


      var gd = svg.selectAll(".data")
          .data([32, 57, 293])
        .enter().append("g")
          .attr("class", "data")
          .attr("transform", function(d, i) { return "translate(" + 20 * (i + 1) + ",20)"; });

filter(s)


      var ed = gd.filter(function(d, i) { return i == 2; }),
          ud = gd.filter(function(d, i) { return i != 2; });
    
      ed.append("circle")
          .attr("class", "little")
          .attr("r", 1e-6);
    
      gd.append("rect")
          .attr("x", -10)
          .attr("y", -10)
          .attr("width", 20)
          .attr("height", 20);
    
      gd.append("text")
          .attr("dy", ".35em")
          .attr("text-anchor", "middle")
          .text(String);

select


      var ge = svg.selectAll(".element")
          .data(data)
        .enter().append("g")
          .attr("class", "element")
          .attr("transform", function(d) { return "translate(" + d + ",90)"; });

append


      ge.append("circle")
          .attr("class", "little")
          .attr("r", Math.sqrt);
    
      ge.append("text")
          .attr("dy", ".35em")
          .attr("text-anchor", "middle")
          .text(String);
    
      ed.select("rect")
          .style("fill", "lightgreen")
          .style("stroke", "green");

circle


      var xe = ge.filter(function(d, i) { return i == 2; });
    
      xe.select("circle")
          .style("fill", "lightcoral")
          .style("stroke", "red");

button


      d3.select("#chart-13 button").on("click", function() {
        gd
            .attr("transform", function(d, i) { return "translate(" + 20 * (i + 1) + ",20)"; })
          .transition()
            .duration(750)
            .attr("transform", function(d) { return "translate(" + d + ",90)"; });

transition


    
        gd.select("rect")
            .style("opacity", 1)
          .transition()
            .duration(750)
            .style("opacity", 1e-6);
    
        ed.select("circle")
            .attr("r", 1e-6)
          .transition()
            .duration(750)
            .attr("r", Math.sqrt);
    
        xe.select("circle")
            .attr("r", Math.sqrt)
          .transition()
            .duration(750)
            .attr("r", 1e-6);
    
        xe.select("text")
            .style("opacity", 1)
          .transition()
            .duration(750)
            .style("opacity", 1e-6);
      });
    })();

</script> <p>Want to learn more about selections and transitions? Read <a href="http://mbostock.github.io/d3/tutorial/bar-2.html">A Bar Chart, Part 2</a> for a practical example of using enter and exit to display realtime data.</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.