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-03.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>We can also compute the attribute values dynamically, using functions rather than constants. For example, maybe we want to set the <em>x</em>-coordinate to a random value:</p> <div class="chart" id="chart-4"> <pre class="code">circle.attr("cx", function() { return Math.random() * w; }); </pre> <button>run</button> <svg width="360" height="180"><circle class="little" cx="180" cy="45" r="12"></circle><circle class="little" cx="60" cy="90" r="12"></circle><circle class="little" cx="300" cy="135" r="12"></circle></svg></div> <script type="text/javascript">

script


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

circle


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

select


    d3.select("#chart-4 button").on("click", function() {
      circle.transition()
          .duration(750)
          .attr("cx", function() { return Math.random() * w; });
    });
  })();

</script> <p>If you run this example multiple times, you’ll see that the attribute is recomputed as a number random number each time. Unlike Protovis, D3 doesn’t stash these functions internally; they are run once, immediately, and then your code continues. So you can run them again or redefine them however you like.</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.