Visualization Implementation (VI2)

Evan Savaria

Chart #1

The horizontal barchart above shows the viewer which players in a given conference pass the ball more than others. The color representation of each player could be used to determine the more competitive teams.

Chart #2

The scatterplot above compares the number of interceptions to passing attempts. This data could be used to determine the conferences that did not follow through with their passes and could use more practice.

Chart #3

The scatterplot above uses a derived variable on the x axis to compare the average passing attempts to the rushing average. The data could be used to show which conference has the most active players. This information can also be used to estimate which conference might be challenging to defeat.

Comments about using Tableau

1. I was surprised how simple the interface was to create a horizontal barchart. Most of the operations were click and drag with the added benefit of being able to hardcode in functions. The learning curve for the interface is minimal, and there are lots of tutorials online.

2. Tableau makes working with large datasets relatively simple. I was able to manipulate variables or create new derived variables with the aid of a visual interface. I can see Tableau being useful in the fast paced cybersecurity industry due to its ease of use and fast results.

What I learned in D3 Tutorial

1. I learned how to replace div's with SVG to have more flexibility and control when changing the width and height of the barchart.

2. I learned about the benefits of using dynamic coordinates so that the data scales with the graph.

3. Lastly, I learned how to encode a gradient like color onto the chart.

Built with blockbuilder.org

<!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% }
  </style>
</head>

<body>
    <script>
      //Width and height
			var w = 500;
			var h = 100;
			var barPadding = 1;

var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
                11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];

//Create SVG element
			var svg = d3.select("body")
						.append("svg")
						.attr("width", w)
						.attr("height", h);
						
			svg.selectAll("rect")
			   .data(dataset)
			   .enter()
			   .append("rect")
			   .attr("x", function(d, i) {
			   		return i * (w / dataset.length);
			   })
			   .attr("y", function(d) {
			   		return h - (d * 4);
			   })
			   .attr("width", w / dataset.length - barPadding)
			   .attr("height", function(d) {
			   		return d * 4;
			   })
			   .attr("fill", function(d) {
					return "rgb(0, 0, " + (d * 10) + ")";
			   });

svg.selectAll("text")
			   .data(dataset)
			   .enter()
			   .append("text")
			   .text(function(d) {
			   		return d;
			   })
			   .attr("text-anchor", "middle")
			   .attr("x", function(d, i) {
			   		return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
			   })
			   .attr("y", function(d) {
			   		return h - (d * 4) + 14;
			   })
			   .attr("font-family", "sans-serif")
			   .attr("font-size", "11px")
			   .attr("fill", "white");
  </script>

</body>

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