D3 Examples - Visualization Implementation (VI3)

Visualization Implementation (VI3)

Name: Erika Siregar

Assignment : Visualization Implementation (VI3)
Course: Information Visualization (CS725)
Semester : Spring 2015

Working through the examples from Scott Murray's tutorial at http://alignedleft.com/tutorials/d3/ and tutorial from Jerome Cukier at http://www.jeromecukier.net/blog/2015/05/19/you-may-not-need-d3/

Built with blockbuilder.org

3 things that I learned while working through these tutorials:

SVG has some basic shapes, such as: circle, rectangular, etc. But we can create our own shape by using path.

to make a transition we have to provide 2 conditions: the initial condition and the transitional condition.

We can use function "each()" to make sure that every event will start exactly at the end of a transaction.

xxxxxxxxxx
 
<html>
  <head>
    <title> Scatter Plot and Transitional Chart </title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    <style>
      .container {
        width: 944px;
        height: 480px;
        overflow-y: scroll;
        overflow-x: hidden;
      }
      .div1 {
        width: 944px;
        border-bottom: 3px dashed black;
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- div for scatter plot -->
      <div class="div1"></div>
​
      <!-- div for button -->
      <div class="button">
         <button class="btn btn-mini" id="btnTransition">Transition</button>
      </div>
​
      <!-- div for transitional chart -->
      <div class="div2"></div>
    </div>
    
    <script>
    /**
    * ============================================================================
    * Scatterplot
    * ----------------------------------------------------------------------------
    */
    //Width and height
    var w = 940;
    var h = 300;
    var padding = 30;
​
    /*
    //Static dataset
    var dataset = [
            [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
            [410, 12], [475, 44], [25, 67], [85, 21], [220, 88],
            [600, 150]
            ];
    */
​
    //Dynamic, random dataset
    var dataset = [];                   //Initialize empty array
    var numDataPoints = 50;             //Number of dummy data points to create
    var xRange = Math.random() * 1000;  //Max range of new x values
    var yRange = Math.random() * 1000;  //Max range of new y values
    for (var i = 0; i < numDataPoints; i++) {                   //Loop numDataPoints times
      var xPos = Math.round(Math.random() * xRange);    //New random integer
      var yPos = Math.round(Math.random() * yRange);    //New random integer
      dataset.push([xPos, yPos]);                   //Add new number to array
    }
    //Create scale functions
    var xScale = d3.scale.linear()
               .domain([0, d3.max(dataset, function(d) { return d[0]; })])
               .range([padding, w - padding * 2]);
    var yScale = d3.scale.linear()
               .domain([0, d3.max(dataset, function(d) { return d[1]; })])
               .range([h - padding, padding]);
    var rScale = d3.scale.linear()
               .domain([0, d3.max(dataset, function(d) { return d[1]; })])
               .range([2, 5]);
    //Define X axis
    var xAxis = d3.svg.axis()
              .scale(xScale)
              .orient("bottom")
              .ticks(5);
    //Define Y axis
    var yAxis = d3.svg.axis()
              .scale(yScale)
              .orient("left")
              .ticks(5);
    //Create SVG element
    var svg = d3.select(".div1")
          .append("svg")
          .attr("width", w)
          .attr("height", h);
    //Create 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", function(d) {
          return rScale(d[1]);
       });
    //Create labels
    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");
​
    //Create X axis
    svg.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(0," + (h - padding) + ")")
      .call(xAxis);
​
    //Create Y axis
    svg.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(" + padding + ",0)")
      .call(yAxis);
    
    
    /**
    * ============================================================================
    * Transitional graph
    * ----------------------------------------------------------------------------
    */
    //Width and height
        var w = 944;
        var h = 400;
        
    var svg = d3.select(".div2")
      .append("svg")
      .attr("width", w)
      .attr("height",h)
    
    var shape = svg.append("path")
            .attr("transform", "translate(100, 120)rotate(0)")  //initial condition, rotate is 0
            .style("stroke", "blue")
            .style("fill", "white")
            .attr("d", "m 0,-60 l 20,40 l 40,20 l -40,20 l -20,40 l -20,-40 l -40,-20 l 40,-20 z");
​
    var btnTransition = d3.select("button#btnTransition");
    btnTransition.on('click', function() {
      if(btnTransition.text() == "Transition") {
        shape
          .style("fill", "white")
          .transition()
          .duration(1000)   //set the time of the transition
          .style("fill","blue")
          .attr("transform", "translate(800,120)rotate(180)")
          .attr("transform", "translate(800,120)rotate(180)")
          .attr("d", "m 0,-60 l 40,20 l 20,40 l -20,40 l -40,20 l -40,-20 l -20,-40 l 20,-40 z")
          .attr("transform", "translate(800,120)rotate(180)")
          .each("end",function() {  //this is to make an event will start exactly at the end of a transition
            svg.append("circle")
                .attr("cx", 800)
              .attr("cy", 120)
              .attr("r",250)
              .style("fill", "green")
              .style("opacity", "0")
              .transition(10)
              .duration(700)
              .attr("r",0)
              .style("fill", "yellow")
              .style("opacity",1)
              .remove()
          });
        d3.select("button#btnTransition").text("Reset");
      } 
​
      else {
        shape
          .transition()
          .duration(1000)
          .attr("transform", "translate(100,120)rotate(0)")
          .style("stroke", "blue")
          .style("fill", "none")
          .attr("d", "m 0,-60 l 20,40 l 40,20 l -40,20 l -20,40 l -20,-40 l -40,-20 l 40,-20 z");
        
        d3.select("button#btnTransition").text("Transition");
      }
    })
    
    </script>
  </body>
</html>
​
    