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-08.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>Using the enter selection, we can create new circles for any missing data. Each new circle is already bound to the data, so we can use data to compute attributes and styles:</p> <div class="chart" id="chart-8"> <pre class="code">var enter = circle.enter().append("circle"); enter.attr("cy", 90); enter.attr("cx", 160); enter.attr("r", function(d) { return Math.sqrt(d); }); </pre> <button>run</button>  </div> <script type="text/javascript">

script


  (function() {
    var svg = d3.select("#chart-8").append("svg")
        .attr("width", w)
        .attr("height", h);
  
    var g = svg.selectAll("g")
        .data(data)
      .enter().append("g")
        .attr("transform", function(d) { return "translate(" + x(d) + "," + y(d) + ")"; });
  
    g.append("circle")
        .attr("class", "little")
        .attr("r", 12);
  
    g.append("text")
        .attr("dy", ".35em")
        .attr("text-anchor", "middle")
        .text(String);

enter


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

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-8 button").on("click", function() {
      g.attr("transform", "translate(80,20)");
      g.select("circle").attr("r", 1e-6);
      g.select("rect").style("opacity", 1);
      var t = g.transition().duration(750);
      t.attr("transform", "translate(160,100)");
      t.select("circle").attr("r", Math.sqrt);
      t.select("rect").style("opacity", 1e-6);
    });
  })();

</script>

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.