Scatterplot for Passing Stat Data

Name: Erika Siregar

Assignment : Visualization Implementation (VI8)

Course: Information Visualization (CS725)

Semester : Spring 2016

Tutorial from:

/davelandry/9029781

<!DOCTYPE html>
<html>
  <head>
    <title>VI8</title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="https://www.d3plus.org/js/d3plus.js"></script>
    <style>
      body {
        background : #E7E7E7;
        font : 14px "Helvetica Neue",arial,freesans,clean,sans-serif
      }
      .section {
        border : 2px solid #2c7fb8;
        margin : 5px;
        margin-top : 20px;
      }
      .section:first-child {
        margin-top : unset;
      }
      .viz {
        height : 500px;
      }
      .exp-header {
        border-top : 2px solid #2c7fb8;
        border-bottom : 2px solid #2c7fb8;
        background : #4C9ED9;
        color: #FFF;
        padding : 10px;
      }
      .exp {
        padding : 10px;
        background : #FFF;
      }
    </style>
  </head>
  <body>
    <div class="information">
      <font color="red"> <b>Note: Hover on the dots to see the details and arrows that show the exact values of each dot.  </b> </font> 
    </div>
    <div class="section">
      <div class="viz" id="viz1"></div>
      <div class="exp-header">1. Scatterplot for QBs colored by the group their schools are in - No Color Restriction </div>
      <div class="exp">
        For scatterplot 1 - 6, I use two quantitative attributes from "passing-stats-2014.csv", which are the "passing yards" and "passing td". </br>
        Since there is no restriction about the colors that I can use, I decide to use blue, green, and orange which are taken from d3 color schema. </br>
        Each QB is represented by the dot marks that are colored by the group their schools are in. Blue represents Big Five, orange represents group of five, and green represents Independent. </br>
        I think these colors are appropriate for this scatterplot because they are strong colors that could be distinguished easily. 
      </div>
    </div>
    <div class="section">
      <div class="viz" id="viz2"></div>
      <div class="exp-header">2. Scatterplot for QBs colored by the group their schools are in - Colorblind-save colors </div>
      <div class="exp">I use the help from <a href="https://colorbrewer2.org/"> colorbrewer2</a> to decide which colors are save for people who are colorblind. </br>
        I found a good google chrome extension named "Spectrum", with which I can do a color simulation to test whether I choose the right colors for colorblind people or not. </br>
        Apparently, there are so many types of colorblindness. But, I decided to stick to the basic rule, which is avoid using the red and green colors at the same time. </br>
        I follow suggestions given by colorbrewer2 and I choose to use the color "#1b9e77" (mountain meadow) for the Big Five, "#d95f02" (bamboo) for the Group of Five, and "#7570b3" (deluge) for Independent. </br>
        I found the name of color hex from this website: <a href="https://chir.ag/projects/name-that-color"> chir.ag </a>. </br>
        The colors I use here have been tested with "Spectrum" and they all can still be distinguished in a colorblind mode. </br>
      </div>
    </div>
    <div class="section">
      <div class="viz" id="viz3"></div>
      <div class="exp-header"> 3. Scatterplot for QBs colored by the group their schools are in - Photocopy-save Colors </div>
      <div class="exp"> 
        Photocopy-save colors mean colors that can still be distinguished eventhough they are printed in black and white. </br>
        For qualitative data with 3 classes, <a href="https://colorbrewer2.org/"> colorbrewer2</a> only provide one color scheme. </br>
        I choose to use colors "Monte Carlo" (#8dd3c7) to depict Big Five, "Portafino" (#ffffb3) for Group of Five, and "Lavender Grey" (##bebada) for Independent. </br>
        I use google chrome extension "Grayscale" to test whether the colors can still be distinguished in grayscale mode or not. </br>
        It turns out that the colors passed the test. Although, the color for Big Five and Group of Five look slightly similar in grayscale mode, but we can still see the difference. </br>
      </div>
    </div>
    <div class="section">
      <div class="viz" id="viz4"></div>
      <div class="exp-header">4. Scatterplot for QBs from Big Five group colored by their conferences - No color restriction. </div>
      <div class="exp">
        Since there are no restriction, I can use any color that I want to depict each conference in Big Five Group, as long as the discriminability is still maintained. </br>
        I use the D3 color scheme to generate the colors. Red represents Big Ten, Purple represents ACC, Blue represents PAC-12, Green represents Big 12, and Orange represents SEC. </br>
        I use <a href="https://colorbrewer2.org/"> colorbrewer2</a>, spectrum, and grayscale to find 5 different colors that are distinguishable enough for colorblind-save and photocopy-save mode. </br>
        Apparently, there is no color scheme available that support these requirements. Therefore, I cannot make the colorblind-save and grayscale-save version of this scatterplot. </br>
      </div>
    </div>
    <div class="section">
      <div class="viz" id="viz5"></div>
      <div class="exp-header">5. Top Five QB's based on their ranks - using multi-hue colormap</div>
      <div class="exp">
        To color the top 5 QBs using multi-hue colormap, I choose one of the color scheme provided by <a href="https://colorbrewer2.org/"> colorbrewer2</a>. </br>
        The multi-hue colormap colors the dots using 5 different colors. </br>
        Thus, it is easier to distinguish one dot to another.  </br>
        For example the dark-blue dot represents the 1st-rank QB, while the cream dot represents the 5th-rank QB. </br>
      </div>
    </div>
    <div class="section">
      <div class="viz" id="viz6"></div>
      <div class="exp-header">6. Top Five QB's based on their ranks - using single-hue colormap </div>
      <div class="exp">
        I use one of the sinle-hue color scheme provided by <a href="https://colorbrewer2.org/"> colorbrewer2</a>. </br>
        With the multi-hue colormap, the discriminability of the colors is still maintained, since the color rank from the high-saturated color to the less-saturated color.  </br>
        In this scatterplot, we could distinguished the dots simply by their colors. </br>
        For example, the 1st-rank QB is colored with "Fire" color (##A63603), while the 5-th rank QB is colored by "Half Spanish White" color (#feedde).  </br>
      </div>
    </div>
    
    <script>
      // Define group
      var group = ["Big Five", "Group of Five", "Independent"]
      // Big Five: SEC, ACC, Big 12, Pac-12, Big Ten
      var bigFive	=	["SEC", "ACC", "Big 12", "Pac-12", "Big Ten"], 
      // Group of Five: American, Sun Belt, MWC, MAC, CUSA
          groupOfFive	=	["American", "Sun Belt", "MWC", "MAC", "CUSA"], 
      // Else : Independent
          independent	=	["Ind"];
      
      d3.csv("passing-stats-2014.csv", function(d, i) {
        d["id"] 						= "player_" + i
        
        // Convert each numeric column (Originally string of numeric)
        d["Rk"] 		= +d["Rk"];
        d["Passing TD"] 		= +d["Passing TD"];
        d["Passing Yards"]	= +d["Passing Yards"];
        
        // Assign group
        if(bigFive.indexOf(d["Conf"]) >= 0) {
          d["group"] = "Big Five"
        } 
        else if(groupOfFive.indexOf(d["Conf"]) >= 0) {
          d["group"] = "Group of Five"
        }
        else {
          d["group"] = "Independent"
        }
        
        return d
      }, function(error, data) {
        /**
        *	------------------------------------------------------------------
        *	No-restriction color
        *	------------------------------------------------------------------
        */
        // Create clone of data
        dataViz1 = JSON.parse(JSON.stringify(data));
        
        // Assign color (no restriction) -> taken from d3 color schema
        var color = d3.scale.category10();
        for(var d=0; d<dataViz1.length; d++) {
          dataViz1[d]["hex"] = color(dataViz1[d]["group"])
        }
        
        var visualization = d3plus.viz()
          .container("#viz1")	// container DIV to hold the visualization
          .data(dataViz1)					// data to use with the visualization
          .type("scatter")		// visualization type
          .id("id")						// key for which our data is unique on
          .x("Passing TD")		// key for x-axis
          .y("Passing Yards")	// key for y-axis
          .tooltip(["Player", "School", "Conf"])	// tooltip to be shown
          .color("hex")
        	.size(5)
        	.legend({"size": 75, "text": "group"})
          .draw()             // finally, draw the visualization!
        
        /**
        *	------------------------------------------------------------------
        *	Colorblind-safe color
        *	------------------------------------------------------------------
        */
        // Create clone of data
        dataViz2 = JSON.parse(JSON.stringify(data));
        
        // Assign color (Colorblind-safe) -> taken from https://colorbrewer2.org/
        color = ['#1b9e77','#d95f02','#7570b3']
        for(var d=0; d<dataViz2.length; d++) {
          dataViz2[d]["hex"] = color[group.indexOf(dataViz2[d]["group"])]
        }
        
        var visualization = d3plus.viz()
          .container("#viz2")	// container DIV to hold the visualization
          .data(dataViz2)					// data to use with the visualization
          .type("scatter")		// visualization type
          .id("id")						// key for which our data is unique on
          .x("Passing TD")		// key for x-axis
          .y("Passing Yards")	// key for y-axis
          .tooltip(["Player", "School", "Conf"])	// tooltip to be shown
          .color("hex")
        	.size(5)
        	.legend({"size": 75, "text": "group"})
          .draw()             // finally, draw the visualization!
        
        /**
        *	------------------------------------------------------------------
        *	Photocopy-safe color
        *	------------------------------------------------------------------
        */
        // Create clone of data
        dataViz3 = JSON.parse(JSON.stringify(data));
        
        // Assign color (Photocopy-safe) -> taken from https://colorbrewer2.org/
        color = ['#8dd3c7','#ffffb3','#bebada']
        for(var d=0; d<dataViz3.length; d++) {
          dataViz3[d]["hex"] = color[group.indexOf(dataViz3[d]["group"])]
        }
        
        var visualization = d3plus.viz()
          .container("#viz3")	// container DIV to hold the visualization
          .data(dataViz3)					// data to use with the visualization
          .type("scatter")		// visualization type
          .id("id")						// key for which our data is unique on
          .x("Passing TD")		// key for x-axis
          .y("Passing Yards")	// key for y-axis
          .tooltip(["Player", "School", "Conf"])	// tooltip to be shown
          .color("hex")
        	.size(5)
        	.legend({"size": 75, "text": "group"})
          .draw()             // finally, draw the visualization!
          
        /**
        *	------------------------------------------------------------------
        *	Big Five Only - No-restriction color
        *	------------------------------------------------------------------
        */
        // Create clone of data
        dataViz4 = JSON.parse(JSON.stringify(data));
        
        // Filter Big Five Only
        dataViz4 = dataViz4.filter(function(d) {
          return bigFive.indexOf(d["Conf"]) >= 0
        })
        
        // Assign color (no restriction) -> taken from d3 color schema
        var color = d3.scale.category10();
        for(var d=0; d<dataViz4.length; d++) {
          dataViz4[d]["hex"] = color(dataViz4[d]["Conf"])
        }
        
        var visualization = d3plus.viz()
          .container("#viz4")	// container DIV to hold the visualization
          .data(dataViz4)					// data to use with the visualization
          .type("scatter")		// visualization type
          .id("id")						// key for which our data is unique on
          .x("Passing TD")		// key for x-axis
          .y("Passing Yards")	// key for y-axis
          .tooltip(["Player", "School", "Conf"])	// tooltip to be shown
          .color("hex")
        	.size(5)
        	.legend({"size": 75, "text": "Conf"})
          .draw()             // finally, draw the visualization!
        
        /**
        *	------------------------------------------------------------------
        *	Top 5 Only - Multi-Hue Colormap
        *	------------------------------------------------------------------
        */
        // Create clone of data
        dataViz5 = JSON.parse(JSON.stringify(data));
        
        // Filter Top 5 Only
        dataViz5 = dataViz5.filter(function(d) {
          return d["Rk"] <= 5
        })
        
        // Assign color (no restriction) -> taken from https://colorbrewer2.org/
        var color = ['#ffffcc','#a1dab4','#41b6c4','#2c7fb8','#253494'];
        for(var d=0; d<dataViz5.length; d++) {
          dataViz5[d]["hex"] = color[4-(dataViz5[d]["Rk"]-1)]
        }
        
        var visualization = d3plus.viz()
          .container("#viz5")	// container DIV to hold the visualization
          .data(dataViz5)					// data to use with the visualization
          .type("scatter")		// visualization type
          .id("id")						// key for which our data is unique on
          .x("Passing TD")		// key for x-axis
          .y("Passing Yards")	// key for y-axis
          .tooltip(["Player", "School", "Conf"])	// tooltip to be shown
          .color("hex")
        	.size(5)
        	.legend({"size": 40, "text": function(d) {
        	  return "" + d["Rk"]
          }, "order": {
            "sort": "asc",
            "value": "id"
          }})
          .draw()             // finally, draw the visualization!
        
        /**
        *	------------------------------------------------------------------
        *	Top 5 Only - Single-Hue Colormap
        *	------------------------------------------------------------------
        */
        // Create clone of data
        dataViz6 = JSON.parse(JSON.stringify(data));
        
        // Filter Top 5 Only
        dataViz6 = dataViz6.filter(function(d) {
          return d["Rk"] <= 5
        })
        
        // Assign color (no restriction) -> taken from https://colorbrewer2.org/
        var color = ['#feedde','#fdbe85','#fd8d3c','#e6550d','#a63603'];
        for(var d=0; d<dataViz6.length; d++) {
          dataViz6[d]["hex"] = color[4-(dataViz6[d]["Rk"]-1)]
        }
        
        var visualization = d3plus.viz()
          .container("#viz6")	// container DIV to hold the visualization
          .data(dataViz6)					// data to use with the visualization
          .type("scatter")		// visualization type
          .id("id")						// key for which our data is unique on
          .x("Passing TD")		// key for x-axis
          .y("Passing Yards")	// key for y-axis
          .tooltip(["Player", "School", "Conf"])	// tooltip to be shown
          .color("hex")
        	.size(5)
        	.legend({"size": 40, "text": function(d) {
        	  return "" + d["Rk"]
          }, "order": {
            "sort": "asc",
            "value": "id"
          }})
          .draw()             // finally, draw the visualization!
      })
    </script>
  </body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://www.d3plus.org/js/d3plus.js to a secure url

https://d3js.org/d3.v3.min.js

https://www.d3plus.org/js/d3plus.js