D3 Examples

VI4

The following Tableau chart demonstrates: (channel type, channel, mark)

magnitude, position on a common scale, circles

magnitude, area, circle

identity, color hue, colored circle

The position of the circles allows for clear disparity between number of touchdowns. Similarly, the color provides clear disparity between the conferences. The area of the circles, however, does not provide the best disparity in deciding the number of touchdowns. Many appear the same, but are not as is evident by their position.

The following Tableau chart demonstrates: (channel type, channel, mark)

identity, spatial region, circles

The disparity between conferences is very clear. just look down a column to find all of the players in that conference.

xxxxxxxxxx
 
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>D3 Test</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <style>div.bar {
      display: inline-block;
      width: 20px;
      height: 75px;   /* We'll override this later */
      background-color: teal;
      margin-right: 2px;
      }
      .axis path,
      .axis line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
      }
      .axis text {
        font-family: sans-serif;
        font-size: 11px;
      }
    </style>
  </head>
  <body>
    <p>Magnitude as position on a common scale</p>
    <p>Magnitude as area</p>
    <p>Identity as color hue</p>
    <p>This uses the rushing stats from last assignment</p>
    <p>x-axis: ranking     y-axis: number of touchdowns</p>
    <script>
      var w = 500;
      var h = 300;
      var padding = 30;
      var dataset = [ [1, 7, 1],
                      [2, 17, 2],
                      [3, 4, 3],
                      [4, 19, 3],
                      [5, 8, 4],
                      [6, 5, 2],
                      [7, 6, 5],
                      [8, 9, 6],
                      [9, 9, 7],
                      [10, 6, 1]
                    ];
      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, 15]);
      var xAxis = d3.svg.axis()
        .scale(xScale)
        .orient("bottom")
        .ticks(5);
      var yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left")
        .ticks(5);
      var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);
      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]);
        })
        .attr("fill", function(d) {
          if (d[2] <= 1) {return "brown"}
          else if (d[2] <= 2) {return "pink"}
          else if (d[2] <= 3) {return "blue"}
          else if (d[2] <= 4) {return "green"}
          else if (d[2] <= 5) {return "purple"}
          else if (d[2] <= 6) {return "orange"}
          else if (d[2] <= 7) {return "red"}
        });
      svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(0," + (h - padding) + ")")
        .call(xAxis);
      svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(" + padding + ",0)")
        .call(yAxis);
    </script>
  </body>
</html>
    