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-10.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> <p>Another technique you can use to make your code more concise is <a href="http://en.wikipedia.org/wiki/Method_chaining">method chaining</a>. Each operator in D3 returns the current selection, so you can apply multiple operators sequentially. For example, the above code can be rewritten:</p> <div class="chart" id="chart-10"> <pre class="code">svg.selectAll("circle") .data([32, 57, 112, 293]) .enter().append("circle") .attr("cy", 90) .attr("cx", String) .attr("r", Math.sqrt); </pre> <button>run</button>  </div> <script type="text/javascript">

script


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

select


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

append


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

button


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

transition


  
      var t = g.transition().duration(750);
      t.attr("transform", function(d, i) { return "translate(" + d + ",90)"; });
      t.select("circle").attr("r", Math.sqrt);
      t.select("rect").style("opacity", 1e-6);
    });
  })();

</script> <p>As you can see, the code is made even smaller using built-in JavaScript functions, rather than defining anonymous ones. The built-in <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String">String</a> method, for example, is a shorthand way of using JavaScript’s default string conversion to compute the attribute value from the associated data. Similarly, we can plug in <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Math/sqrt">Math.sqrt</a> to set the radius attribute as the square root of the associated data. This technique of plugging in reusable functions to compute attribute values is used extensively in D3, particularly in conjunction with <a href="https://github.com/mbostock/d3/wiki/Quantitative-Scales">scales</a> and <a href="https://github.com/mbostock/d3/wiki/SVG-Shapes">shapes</a>.</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.