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

<!DOCTYPE html>
<html >
  <meta charset="UTF-8">
      <link rel="stylesheet" href="css/style.css">


  <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>

/* 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])
  .attr("class", "apple")
  .attr("height", "30")
  .attr("width", "30")
  .attr("y", function(d,i){
    return i*40
  .attr("fill", "yellow")

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

var t = d3.transition()

  .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