09-transitions-exercise01-completed

Tutorials of (09-transitions-exercise01-completed) by Dan shultz

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>09-transitions-exercise01-completed</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <svg id="boxes"></svg>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
ul {
  list-style-type: none;
}
/* Downloaded from https://www.codeseek.co/ */
var svg = d3.select('#boxes')
    .attr('width', 500)
    .attr('height', 500)

//Write out "Codemash 1-5"
svg.selectAll("rect")  .data([2010,2011,2012,2013,2014,2015,2016])
  .enter()
  .append("rect")
  .attr("class", "apple")
  .attr("height", "30")
  .attr("width", "30")
  .attr("y", function(d,i){
    return i*40
  })
  .attr("fill", "yellow")
  .transition(t)


//Write out "Codemash 1-5"
svg.selectAll("text")  .data([2010,2011,2012,2013,2014,2015,2016])
  .enter()
  .append("text")
  .attr("y", function(d,i){
    return i*40 + 25
  })
  .attr("x", 210)
  .text(function(d){ return "Codemash" +  d})
  .attr("fill", "yellow")
  .transition(t)


var t = d3.transition()
        .duration(2750)
        .ease(d3.easeLinear);

d3.selectAll("rect.apple").transition(t)
  .attr("x", "200")
  .attr("width", "300")
  .attr("height", "59")
  .attr("fill", "red");

This awesome code ( 09-transitions-exercise01-completed ) is write by Dan Shultz, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Dan Shultz