CS 725 Information Visualization - VI5

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.

idea : http://www.storytellingwithdata.com/blog/2014/08/design-with-audience-in-mind

original data : http://www.usatoday.com/story/tech/2014/08/12/apple-diversity-white-asian-male/13951329/

Scatterplot

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

Live at /christost/a679815370ad5e8ce609

forked from ChristosT's block: CS 725 Information Visualization - VI4

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

var w = 400;
var h = 400;
var radius = Math.min(w,h) / 2;

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

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js