Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
GitHub CoderDojo - Intro to D3.js

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment