GitHub CoderDojo - Intro to D3.js

CoderDojo.md

Animations in JavaScript

D3.js

Library that uses HTML, CSS and SVG to bring data to life.

Setting Up

Open http://jsfiddle.net/

Click on External Resources on the left and add this url:

http://d3js.org/d3.v2.js

Getting Started

Add this in the HTML box

<div id="frame"></div>

Add this in the CSS box

#frame {
  background-color : #eee;
}

Setting Up

Add this in JavaScript box

var box = d3.select("#frame")
            .append("svg")
            .attr("width", 900)
            .attr("height", 600);

We created a variable box where we get d3 to select the #frame and change its width and height

Creating a Circle

Add this new code in the javascript box

var box = d3.select("#frame")
            .append("svg")
            .attr("width", 900)
            .attr("height", 600);

box.append("circle")         // make a circle
   .style("stroke", "white") // make the circle border white
   .attr("r", 40)            // radius 40. You can make it bigger
   .attr("cx", 150)          // position at x
   .attr("cy", 150);         // position at y

Click Run!

Preview

Live Preview here

Our First Animation!

Modify the lines you just wrote:

box.append("circle")
   .style("stroke", "white")
   .attr("r", 40)
   .attr("cx", 150)
   .attr("cy", 150)   // no semicolon here
   .on("mouseover", bounce); // new line

We are telling it to bounce when we move our mouse over it.

But What is Bounce?

box.append("circle")
   .style("stroke", "white")
   .attr("r", 40)
   .attr("cx", 150)
   .attr("cy", 150)   // no semicolon here
   .on("mouseover", bounce); // new line

function bounce()
{
  d3.select(this)     // we select our circle
    .transition()     // start changing the circle
    .attr("r", 100)   // change radius to 100
    .duration(1000)   // for 1 second
    .ease("elastic"); // like an elastic band
}

Click Run!

Preview

Live Preview here

Lets Make it Dance!

We add a new function dance right after the function bounce

function dance()
{
  d3.select(this)          // select the circle
    .transition()          // start animating
    .attr("r", 50)         // change radius to 50
    .duration(1000)        // for 1 second
    .ease("elastic")       // like an elastic band
    .each("end", bounce);  // and then call bounce function
}

And change this line to call dance function

.on("mouseover", dance); // dance instaed of bounce

Preview

Live Preview here

The Fun Part

Lets create a new function marker

function marker()
{
  var arrow = d3.mouse(this);
  
  box.append("circle")                // add new circle
     .attr("cx", arrow[0])            // new x coordinate
     .attr("cy", arrow[1])            // new y coordinate
     .style("stroke", "gray")         // make circle border gray
     .transition()                    // start animating
     .duration(1000)                  // for 1 second
     .attr("r", 80)                   // change radius to 80
     .style("stroke-opacity", 0.001)  // start fading previous circles
     .remove();                       // then remove older circles
}

Modify these lines

Change this

box.append("circle")
   .style("stroke", "white")
   .attr("r", 100)
   .attr("cx", 150)
   .attr("cy", 150)
   .on("mouseover", dance);

To this

/*
box.append("circle")
   .style("stroke", "white")
   .attr("r", 100)
   .attr("cx", 150)
   .attr("cy", 150)
   .on("mouseover", dance);
*/

Modify these lines

var box = d3.select("#frame")
            .append("svg")
            .attr("width", 900)
            .attr("height", 600)      // no semicolon
            .on("mousemove", marker); // add this new line

Click Run!

Preview

Live Preview here

Bonus Points

Change the background-color of the frame to black and hit run!

#frame {
  background-color : black;
}

Preview

Live Preview here

Double Bonus - Add Colors

var i = 0;                          // new variable
var color = d3.scale.category20c(); // new variable

function marker() {
  var arrow = d3.mouse(this);

  box.append("circle")
     .attr("cx", arrow[0])
     .attr("cy", arrow[1])
     .attr("r", 1e-6)             // new line
     .style("stroke", color(++i)) // changed
     .transition()
     .duration(1000)
     .attr("r", 80)
     .style("stroke-opacity", 0.001)
     .remove();
}

Preview

Live Preview here

Extra Credit

Convert the JSFiddle page to HTML, CSS and Javascript document