topical media & game development

talk show tell print

mobile-data-circle-02.htm / htm

  <script src=""></script>
  <link rel="stylesheet" type="text/css" href="mobile-data-circle-style-d3.css">
  <script type="text/javascript">


    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>Once we have a selection, we can apply various operators to the selected elements. For example, we might change the fill color using <a href="">style</a>, and the radius and the <em>y</em>-position using <a href="">attr</a>:</p> <div class="chart" id="chart-3"> <pre class="code">"fill", "steelblue"); circle.attr("cy", 90); circle.attr("r", 30); </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">


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


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

select"#chart-3 button").on("click", function() {"fill", "#aaa").attr("r", 12).attr("cy", y);
      circle.transition().duration(500).delay(0).style("fill", "steelblue");
      circle.transition().duration(500).delay(500).attr("cy", 90);
      circle.transition().duration(500).delay(1000).attr("r", 30);

(C) Æliens 04/09/2009

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.
<script src="" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "UA-2780434-1"; urchinTracker(); </script>