D3 Examples - VI3 - James Eanes

VI3 - James Eanes
Three things learned from these tutorials:
Understanding the animation tutorial was very difficult - it doesn't give you the source as you go (like the other D3 tutorial), it just embeds the examples in the larger source of the main page.
Combining two sections of code using
tags is completely beyond me. I will have to look more into this, but I have no idea how to do it at this point.
The use of a small set of commands to animate objects on the screen is very powerful and extemely useful...but I imagine could be very overdone and annoying to the user.
xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 SVG Tutorial + D3 Animations Tutorial</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <style type="text/css">
        .axis path,
        .axis line {
            fill: none;
            stroke: black;
            shape-rendering: crispEdges;
        }
        .axis text {
            font-family: sans-serif;
            font-size: 11px;
        }
        svg { overflow:hidden };
        path { fill:yellow; stroke:#000; stroke-width:.5px;}
        aniCircle { fill:#ccc; stroke:#000; pointer-events:none;}
​
#button {position:absolute;top:10px;left:450px;}
​
#title {position:absolute;top:12px;left:0px;width:500px;text-align:center;}
​
.btn { display:inline-block;*display:inline;/* IE7 inline-block hack */ *zoom:1;padding:4px 10px 4px;margin-bottom:0;font-
​
size:13px;line-height:18px;color:#333333;text-align:center;text-shadow:0 1px 1px rgba(255,255,255,0.75);vertical-
​
align:middle;background-color:#f5f5f5;background-image:-moz-linear-gradient(top,#ffffff,#e6e6e6);background-image:-ms-
​
linear-gradient(top,#ffffff,#e6e6e6);background-image:-webkit-gradient(linear,0 0,0 100%,from(#ffffff),to
​
(#e6e6e6));background-image:-webkit-linear-gradient(top,#ffffff,#e6e6e6);background-image:-o-linear-gradient
​
(top,#ffffff,#e6e6e6);background-image:linear-gradient(top,#ffffff,#e6e6e6);background-repeat:repeat-
​
x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#e6e6e6',GradientType=0);border-
​
color:#e6e6e6 #e6e6e6 #bfbfbf;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba
​
(0,0,0,0.25);filter:progid:dximagetransform.microsoft.gradient(enabled=false);border:1px solid #cccccc;border-bottom-
​
color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba
​
(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba
​
(0,0,0,0.05);box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);cursor:pointer;*margin-left:.3em;} 
​
.btn:hover,.btn:active,.btn.active,.btn.disabled,.btn[disabled] { background-color:#e6e6e6;} .btn:active,.btn.active { 
​
background-color:#cccccc \9;} .btn:first-child { *margin-left:0;} .btn:hover { color:#333333;text-
​
decoration:none;background-color:#e6e6e6;background-position:0 -15px;-webkit-transition:background-position 0.1s linear;-
​
moz-transition:background-position 0.1s linear;-ms-transition:background-position 0.1s linear;-o-transition:background-
​
position 0.1s linear;transition:background-position 0.1s linear;} .btn:focus { outline:thin dotted #333;outline:5px auto -
​
webkit-focus-ring-color;outline-offset:-2px;} .btn.active,.btn:active { background-image:none;-webkit-box-shadow:inset 0 
​
2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba
​
(0,0,0,0.05);box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);background-color:#e6e6e6;background-
​
color:#d9d9d9 \9;outline:0;} .btn.disabled,.btn[disabled] { cursor:default;background-image:none;background-
​
color:#e6e6e6;opacity:0.65;filter:alpha(opacity=65);-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} .btn-
​
mini { padding:2px 6px;font-size:11px;line-height:14px;}}
​
        svg {border:1px solid black;}
    }
​
    </style>
    </head>
    <body>
        <script type="text/javascript">
            var w = 500;
            var h = 300;
            var barPadding = 1;
        var padding = 30;
            var dataset = [];
        var numDataPoints = 50;
        var xRange = Math.random() * 1000;
        var yRange = Math.random() * 1000;
        for (var i = 0; i < numDataPoints; i++) {
            var newNumber1 = Math.round(Math.random() * xRange);
        var newNumber2 = Math.round(Math.random() * yRange);
            dataset.push([newNumber1, newNumber2]);
        }
        var xScale = d3.scale.linear()
                     .domain([0, d3.max(dataset, function(d) {
            return d[0]; })])
                     .range([padding, w - padding * 2]);
        var yScale = d3.scale.linear()
                     .domain([0, d3.max(dataset, function(d) { 
            return d[1]; })])
                     .range([h - padding, padding]);
        var rScale = d3.scale.linear()
                     .domain([0, d3.max(dataset, function(d) { 
            return d[1]; })])
                     .range([2, 5]);
        var xAxis = d3.svg.axis()
        .scale(xScale)
        .orient("bottom")
        .ticks(5);
        var yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left")
        .ticks(5);
            var svg = d3.select("body")
                .append("svg")
                .attr("width", w)
                .attr("height", h);
            svg.selectAll("circle")
                .data(dataset)
                .enter()
                .append("circle")
                .attr("cx", function(d, i) {
                        return xScale(d[0]);
                })
                .attr("cy", function(d)  {
                    return yScale(d[1]);
                })
                .attr("r", function(d)  {
                    return rScale(d[1]);
                });
        svg.selectAll("text")
        .data(dataset)
        .enter()
        .append("text")
        .text(function(d)  {
            return d[0] + "," + d[1];
        })
        .attr("x", function(d) {
                return xScale(d[0]);
        })
        .attr("y", function(d) {
                return yScale(d[1]);
        })
        .attr("font-family", "sans-serif")
        .attr("font-size", "11px")
        .attr("fill", "red");
        svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(0," + (h - padding) + ")")
        .call(xAxis);
        svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(" + padding + ",0)")
        .call(yAxis);
​
<!-- NEW SECTION -->
​
data={
0:{title:"All combined!",
  shapes:[
    {
      type:"path",
      init:{
        attr:{
          "d":"m 0,-60 l 20,40 l 40,20 l -40,20 l -20,40 l -20,-40 l -40,-20 l 40,-20 z",
          "transform":"translate(60,120)"
        },
          style:{stroke:"blue",fill:"white"}
        },
        transition:{
          attr:{
            "d":"m 0,-60 l 40,20 l 20,40 l -20,40 l -40,20 l -40,-20 l -20,-40 l 20,-40 z",
            "transform":"translate(440,120) rotate(180)"
          },
          style:{stroke:"white",fill:"blue"},
          next:{
            type:"circle",
            attr:{cx:440,cy:120,r:250},
            style:{fill:"green",opacity:0},
            next:{
              attr:{r:0},
              style:{fill:"yellow",opacity:1},
              next:{remove:true}
            }
          }
        }
      }
    ]
  }
};
​
data=data[0];
var svg=d3.select("svg");
svg.selectAll(".vline").data(d3.range(26)).enter()
  .append("line")
  .attr("x1",function(d){return d*20;})
  .attr("x2",function(d){return d*20;})
  .attr("y1",function(d){return 40;})
  .attr("y2",function(d){return 250;})
  .style("stroke","#eee");
svg.selectAll(".vline").data(d3.range(2,13)).enter()
  .append("line")
  .attr("y1",function(d){return d*20;})
  .attr("y2",function(d){return d*20;})
  .attr("x1",function(d){return 0;})
  .attr("x2",function(d){return 500;})
  .style("stroke","#eee");
​
var button=d3.select("#button");
if (data.button==="none") {button.remove();}
var mode=0;
var modes=[{state:"init",title:"Transition"},{state:"transition",title:"Reset"}];
​
d3.select("#title").html(data.title);
data.shapes.forEach(function(d,i) {
​
  // here we create shapes according to the parameters of the data file.
​
  var myshape=svg.append(d.type).attr("id","s"+i); // taking into account the type of the shape, 
  var state=d.init;                                 // noting that these are the initial state.
  set(myshape,state);
})
​
button.on("click",function() {
  mode=1-mode;
  button.html(modes[mode].title);
  data.shapes.forEach(change)
});
​
function change(d,i){
  var state=d[modes[mode].state];
  var myshape=svg.select("#s"+i).transition().duration(state.duration||1000).delay(state.delay||0).ease
​
(state.ease||"cubic-in-out");
  // so transition if going through a transition, reset if going through a reset
  set(myshape,state);
​
}
​
function set(selection,state,createTransition) {
  if(state.remove)  {
    selection.remove();return;
  }
​
  d3.keys(state.attr).forEach(function(a) {
    selection.attr(a, state.attr[a]);                     // all of its attributes
  });
  if (state.text) {
    selection.text(state.text);
  };
  d3.keys(state.style).forEach(function(s) {
    selection.style(s, state.style[s]);                   // and all of its style properties
  });
​
  if(state.next)  {
    var next=state.next;
    if (next.type) {
        selection.each("end",function() {
          set(svg.append(next.type),next,true);                  // we are creating a new shape  
        })
    }
    else {
      if(createTransition)  {
        selection=selection.transition().duration(0);
      }
      selection.each("end",function() {
        set(d3.select(this).transition().duration(next.duration||1000).delay(next.delay||0).ease(state.ease||"cubic-in-
​
out"),next);
      });
    }
  }
}
​
​
        </script>
    <div id="chart" style="x:0;y:1000;width:500px;height:250px">
      <svg xmlns="https://www.w3.org/2000/svg" version="1.1" width="500" height="200">
      </svg>
      <div id="title">Movement</div>
        <button class="btn btn-mini" id="button">Transition</button>
      </div>
    </div>
    </body>
</html> 
    