Old school D3 from simpler times

All examples By author By category About

walkerjeffd

Full window Github gist

transition test

Built with blockbuilder.org

forked from bletcher's block: transition test

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see!
    //Width and height
		var w = 700;
		var h = 480;
    
    var svg = d3.select("body").append("svg")
    svg.append("rect")
      .attr({x: 0, y: 0, width: w, height: h})
      .style({ fill: "#a72d1a"})
      .transition().duration(3000).ease("bounce")
      .style({ fill: "#5db9e3"})

var dataset = [
                  [ 5,     20 ],
                  [ 480,   90 ],
                  [ 250,   50 ],
                  [ 100,   33 ],
                  [ 330,   95 ],
                  [ 410,   12 ],
                  [ 475,   44 ],
                  [ 25,    67 ],
                  [ 85,    21 ],
                  [ 220,   88 ]
              ];
       
    var xScale = d3.scale.linear()
                     .domain([0, d3.max(dataset, function(d) { return d[0]; })])
                     .range([0, w]);
    var yScale = d3.scale.linear()
                     .domain([0, d3.max(dataset, function(d) { return d[1]; })])
                     .range([0, h]);
    
    var circles = svg.selectAll("circle")
                 .data(dataset)
                 .enter()
                 .append("circle")
    
                 .attr("cx", function(d) {
                    return xScale(d[0]);
                      })
                 .attr("cy", function(d) {
                     return yScale(d[1])
											})
                 .attr("r", 5)
    
 svg.selectAll("circle")
  .transition()
  .delay(1000)
  .duration(2500)
  .attr("fill", "green")
  .attr("cx",  function(d, i) { return 10 * (i + 1); })
  .attr("cy",  function(d, i) { return 10 * (i + 10); })

var texts =		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.selectAll("text")
  .transition()
  .delay(1000)
  .duration(2500)
  .attr("cx",  function(d, i) { return 10 * (i + 1); })
  .attr("cy",  function(d, i) { return 10 * (i + 10); })

console.log("you are now rocking with d3", d3);
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js