D3 Examples - CS 725 Information Visualization

Christos Tsolakis

eyes beat memory: animation vs. side-by-side view

The animation pushes the user to use his/her memory in order to compare the data for each company. On the other hand, on the stacked barcharts we have lower cognitive load and the comparison can be done directly. Moreover the use of the length as a channel (not area, since width is constant for all of bars) helps the user to perceive the actual data more accuratelly than the angle channel in the piecharts.

R Code

dat <- read.table(text = " Apple Yahoo Google Facebook LinkedIn Twitter Ebay 1 70 62 70 69 61 70 58 2 30 37 30 31 39 30 42 3 0 1 0 0 0 0 0",header = T) #make room for the legend par(xpd=T, mar=par()$mar+c(0,0,0,8)) #make barchart with no y axis barplot(as.matrix(dat),col=rainbow(3),main="Workforce by Gender",yaxt="n") #add a y-axis with percentages axis(2, at=pretty(a), lab=paste0(pretty(a),"%"), las=TRUE) #legend labels <- c("Male","Female","Not Disclosed") legend(8.5, 80,labels,fill=rainbow(3),cex=0.8);

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
​
</head>
<div id="option">
   <input name="updateButton" 
         type="button" 
          value="Next" 
            align="middle"
          onclick="Next()" />
  <div id="option">
<body>
Click the button to start
   <!-- How to use buttons
https://www.d3noob.org/2013/02/update-d3js-data-dynamically-button.html       -->
​
  <script>
// pie chart example :
// https://bl.ocks.org/mbostock/3887235
​
var w = 400;
var h = 400;
var radius = Math.min(w,h) / 2;
​
​
​
var data = [[{"label":"Male", "value":70}, {"label":"Female", "value":30}],
            [{"label":"Male", "value":62}, {"label":"Female", "value":37},{"label":"Not Disclosed","value":1}],
            [{"label":"Male", "value":70}, {"label":"Female", "value":30}],
            [{"label":"Male", "value":69}, {"label":"Female", "value":31}],
            [{"label":"Male", "value":61}, {"label":"Female", "value":39}],
            [{"label":"Male", "value":70}, {"label":"Female", "value":30}],
            [{"label":"Male", "value":58}, {"label":"Female", "value":42}]
                     
           ];
var Companies = ["Apple","Yahoo","Google","Facebook","LinkedIn","Twitter","Ebay"];
    
var CompanyCounter=-1;   //loop through the companies
    
var arc = d3.svg.arc()
                 .outerRadius(radius - 50)
                    .innerRadius(0);
    
var labelArc = d3.svg.arc()
    .outerRadius(radius - 40)
    .innerRadius(radius - 40);
​
    //Basic svg
var  svg = d3.select("body").append("svg")
    .attr("width", w)
    .attr("height",h)
    .append("g")
    .attr("transform", "translate(" + w/ 2 + "," + h/ 2 + ")");     
​
var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d.value; });
​
​
 // Draws the piechart
function Outside() {
​
​
    svg.selectAll("*").remove(); //Clear previous state 
  //https://stackoverflow.com/questions/10784018/how-can-i-remove-or-replace-svg-content#10911546
​
        var color = d3.scale.category10();
     g = svg.selectAll(".arc")
    
     .data(pie(data[CompanyCounter]))
      .enter().append("g")
      .attr("class", "arc");  
    
     g.append("path")
      .attr("d", arc)
      .style("fill", function(d) { return color(d.value); });
​
    //adding text 
    //https://jsfiddle.net/ragingsquirrel3/qkHK6/
        g.append("svg:text").attr("transform", 
      function(d){return "translate(" + arc.centroid(d) + ")";})
                                        .attr("text-anchor", "middle")
                                        .text( function(d, i) {return data[CompanyCounter][i].label;});
    
  //add title
  svg.append("text")
        .attr("x", 0  )           
        .attr("y", -170)
        .attr("text-anchor", "middle")  
        .style("font-size", "20px") 
        .style("text-decoration", "bold")  
        .text("Workforce by Gender : " + Companies[CompanyCounter]);
  
  
  
}
    //is being called after each button signal
 
    function Next(){
      if (CompanyCounter==6){
        CompanyCounter =0; 
      }
      else{
      CompanyCounter++;
      }
     
      Outside();
​
        }   
​
  </script>
​
​
</body>
​
    