D3 Examples

wk6

Name: Slobodan Milanko

Data: http://www.sports-reference.com/cfb/years/2015-rushing.html

The first bad chart, bottom left, is made in D3. This chart breaks the rule using pointcuts. If we had a transition to click between the womens and mens data, it would be easier to use the pointcut. However, this is not possible, as we only have womens data, which is deleted, and then we show mens data, without reminding the user how the womens data looked like. The strain on user memory is rather large. To fix this, I made a better chart, top left, that lets the user animate the tranisition from mens to womens data. In addition, they can revert back to the original to make it easier to see differences.

The next bad chart was made with Tableau. This chart is used to show side by side bar chart rules that are broken. It is reccomended to ensure that side by side charts only show a small amount of data, so that the user is not overwhlemed and relationships can be drawn easier. chart1

To solve this problem, I made a new Tableau side by side bar chart, that shows only two attributes and their relationships. chart2

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
    .containers {
      width: 950px;
      height: 600px;
      
    }
    .axis path,
            .axis line {
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }
            
            .axis text {
                font-family: sans-serif;
                font-size: 11px;
            }
    
    .actionButtons {
      margin-left: 400px;
      margin-top: 10px;
      margin-right: 10px;
      color: black;
      background-color: white;
      border: 1px solid red;
    }
    
  </style>
</head>
​
<body>
  
  <div id="goodTransVis" class="containers">
    <button id="transitionLine" class="actionButtons">Click Me Good</button>
    <button id="origVisLine" class="actionButtons">Reset</button>
  </div>
  <div id="badTransVis" class="containers">
    <button id="transitionLineBad" class="actionButtons">Click Me Bad</button>
  </div>
  
  <script>
    d3.select(self.frameElement).style("height", "1300px"); 
    
    // general variables 
    var width = 800;
    var height = 450;
    var womensPopData = [
            [1990, 100], [1991, 200], [1992, 300], [1993, 450], [1994, 500],
            [1995, 450], [1996, 430], [1997, 440], [1998, 430], [1999, 420]
            ];
    var mensPopData = [
            [1990, 300], [1991, 350], [1992, 550], [1993, 600], [1994, 350],
            [1995, 330], [1996, 300], [1997, 350], [1998, 450], [1999, 600]
            ];
    var xScale = d3.scale.linear().range([50, width]).domain(["1990","1999"])
    var yScale = d3.scale.linear().range([height, 20]).domain([50,600])
    var xAxis = d3.svg.axis().scale(xScale).orient("bottom").tickFormat(d3.format("d"));
    var yAxis = d3.svg.axis().scale(yScale).orient("left");
    var line = d3.svg.line().x(function (d) {return xScale(d[0])})
                        .y(function (d) {return yScale(d[1])})
  </script>
  
  <!-- this section is for the good vis, regarding transitions/animation -->
  <script>
    
    
    var goodVis = d3.select("#goodTransVis").append("svg")
    goodVis.append("g").attr("class", "axis")
      .attr("transform", "translate(0, " + height + ")").call(xAxis)
    goodVis.append("g").attr("class", "axis")
      .attr("transform", "translate(50, 0)").call(yAxis)
    var xAxisLabel = goodVis.append("text")
                        .attr("id", "xAxisLabel")
              .attr("text-anchor", "middle")
              .attr("transform", 
                    "translate("+ (width/2) +","+(height + 50)+")")  
              .text("Womens population per year");
    
    var womensPath = goodVis.append("path")
            womensPath.attr("id", "womensDataLine").attr("d", line(womensPopData))
            .attr("stroke", "green").attr("stroke-width", 1).attr("fill", "none") 
    
    d3.select("#transitionLine").on("click", function() {
      womensPath.transition().attr("d", line(mensPopData)).attr("stroke", "red").duration(1500)
      xAxisLabel.transition().text("Mens population per year")
    })
    d3.select("#origVisLine").on("click", function() {
      womensPath.transition().attr("d", line(womensPopData)).attr("stroke", "green").duration(1500)
      xAxisLabel.transition().text("Womens population per year")
    })
  </script>
  
  <!-- this section is for the bad vis, regarding transitions/animation -->
  <script>
    var newMensPopData = [ 
            [1990, 120], [1991, 210], [1992, 310], [1993, 440], [1994, 490],
            [1995, 460], [1996, 425], [1997, 428], [1998, 435], [1999, 425]
            ];
    
    var badVis = d3.select("#badTransVis").append("svg")
    badVis.append("g").attr("class", "axis")
      .attr("transform", "translate(0, " + height + ")").call(xAxis)
    badVis.append("g").attr("class", "axis")
      .attr("transform", "translate(50, 0)").call(yAxis)
    var newXAxisLabel = badVis.append("text")
                        .attr("id", "newXAxisLabel")
              .attr("text-anchor", "middle")
              .attr("transform", 
                    "translate("+ (width/2) +","+(height + 80)+")")  
              .text("Womens population per year");
    
    var newWomensPath = badVis.append("path")
            newWomensPath.attr("id", "newWomansDataLine").attr("d", line(womensPopData))
            .attr("stroke", "green").attr("stroke-width", 1).attr("fill", "none") 
    
    d3.select("#transitionLineBad").on("click", function() {
      d3.selectAll("#newWomansDataLine").remove()
      badVis.append("path").attr("d", line(newMensPopData)).attr("stroke", "red")
            .attr("stroke-width", 1).attr("fill", "none") 
      newXAxisLabel.transition().text("Mens population per year")
    })    
  </script>
  
</body>
​
    