Homework 2 - 590V

.block

license: mit

readme.md

Scatter Plots

A scatter plot is a graph that uses cartesian points to display the value of variables. Usually, the values of two variables are represented, the distance from the y-axis to the point shows the value of the variable along the x-axis and vice versa. You can represent other variables using a 3D scatter plot and/or color, shape, radius of points.

To create a simple scatter plot, once the axes are set, for each record in the dataset a point is plotted as x, y where x is the value of the variable on the x-axis and y the value of the variable on the y-axis. The size, shape, color of the point can represent other variables.

Scatter plots are really useful to study correlation between two variables. A trendline can be drawn to visualize this. Further, it can be useful to visualize outliers or clusters if present in the data.

Some of the ways the features of a scatter plot can be controlled are:

• Using color to represent a variable
  1. Colors can be used to represent different groups - (Red circles are NBA players, Blue for NFL)
  2. Colors can be used for intensity - (Darker the color more the player earns)
• Using shape to represent a variable 3) Different shapes can be used to represent different groups - (Triangles for NBA player, Circles for NFL) 4) Using an image as a shape - (Face of the player, rather than a circle or a triangle)
• Representing time 5) Points could appear on the graph based on a clock that is shown. 6) Points could move based on their position at a given time. 7) If there is motion of points, clicking on a point could allow to trace its path 8) Control over the clock to visualize data at any given time 9) Represent two variable with x and y. Each point represents a certain time. Directed lines can then be used to show the effect of time. Example
• Opacity of the points 10) Opacity of the points can be used to visualize their scale (More opaque implies more money) 11) Opacity can be used to differentiate groups. (NFL players have their opacity turned down, NBA turned up) 12) If there is motion, past states of a point can be shown with increasing transparency.
• Trendline 13) A trendline can be drawn to show the general trend of the graph 14) If there is data with time as a variable, a changing trendline would be useful to see correlation across time.
• Sound 15) Hovering over a point can have a sound play (If the graph is about songs, hovering over a point could start playing it) 16) Sound can be used to represent intensity (Louder the clapping sounds, more like-able a leader is)
• 3D Scatter Plots 17) By having a third dimension you can visualize more variables. 18) To see correlation between 3 variables, 2 at-a-time, a 3D scatter plot can be drawn, and the shadows can be then matched on to three seperate scatter plots.

Unique Scatter Plot

A unique type of scatter plot that I found was the rotated scatter plot. I was able to find only two examples - 1 and 2. A rotated scatter plot aligns the trendline along the horizontal as in the first example, or an expectation line as in the second example. This now rotates the x and y axes by 45^o.

A rotated scatter plot makes it easy to see which points are over-performing, which ones are under-performing and which ones are performing as expected. A graph of this type can be really useful to make comparisons.

Data

The Bechdel Test is used to call attention to gender inequality in movies, books and tv. A work passes the Bechdel test if it has at least two women who talk to each other about something besides a man.

Data taken from the Bechdel Test datasets on data.world. I did a join on two datasets within this - FiveThirtyEight's Bechdel Test study and IMDB dataset from Brian Keegan's replication of the study. Only movies in the year 2011, 2012 and 2013 were picked. I renamed some columns to make it more readable. Data related to budget and gross were modified to be displayed in Millions of dollars.

Color Legend

Clicking on any color in the legend will filter out points of that color. This can be done for multiple colors. Click again to bring it back.

User control

User can change variables on the X and Y axes. They can also modify the variable that sets the color and/or size of the points. (The sizes are scaled to allow different ranges of variables)

Hover

Hovering over a point will display the movie's title, country and the name of the director.

Trends in the data

It is interesting to note that movies that pass the Bechdel test tend to have smaller budgets. Most movies with big budgets seem to be ones that fail the test. This might tell us that producers tend to support movies that play to non-inclusive trends in the past.

Similarly, most movies that perform well at the international box office tend to fail the test. The one's that perform better and pass the test are usually animated movies. While a similar trend can be observed for the domestic box office, as a proportion it is not as intense. This could show that the US market is more open to inclusive movies but it is more likely that due to language and culture gaps, franchise and action movies tend to perform better at the international market and these usually fail the test.

More of the movies with a higher IMDB score seem to fail the test as well. This might show that viewer tastes are still traditional.

Like the two other studies showed bar charts could also be used to capture this sort of a trend.

Extra Credit

Smooth transitions for points and axes when changing size, color or x, y variables.

Examples referenced

• Previous homework - https://bl.ocks.org/hadinishad/c5c602d45eef9aae1b34c22f33205730

• For animated transitions - http://bl.ocks.org/jfreels/6871643

• For smooth axis updates - https://bl.ocks.org/shimizu/914c769f05f1b2e1d09428c7eedd7f8a

bechdel.csv

index.css

body{
    margin: 0;
    font-family: arial, sans;
}
.label{
    font-size: 15px;
    fill: #333;
}

.heading{
    margin-left: 20px;
}

.subheading{
    margin-left: 20px;
}

.legend text,
.axis text,
.text{
    font-size: 10px;
    fill: #333;
}

.axis path,
.axis line{
    fill: none;
    stroke-width: 1px;
    stroke: #777;
}

.circle{
    fill-opacity: 0.65;
}

.circle{
    opacity: 1;
    transition: opacity 0.3s;
}

.circle:hover text{
    opacity: 1;
}

.circle:hover circle{
    fill-opacity: 1;
}

.legend rect{
    fill-opacity: 0.75;
}

.legend:hover rect{
    fill-opacity:1;
}

.tooltip {
    position: absolute;
    text-align: center;
    padding: 2px;
    font-family: arial, sans;
    font-size: 10px;
    background: lightgray;
    border: 0px;
    border-radius: 8px;
    pointer-events: none;
 }

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <title>HW2 - CS590V - Hadi</title>
    <link rel="stylesheet" type="text/css" href="index.css">
  </head>
  <body>
    <h3 class="heading">Homework 2 - CS 590V</h3>
    <h5 class="subheading">Hadi Nishad</h5>
    <svg width="960" height="500"></svg>
    <script type="text/javascript" src="index.js"></script>
  </body>
</html>

index.js

// set x and y values
var xValue = d => d["Budget (M)"];
var yValue = d => d["MetaScore"];

// set up margin
var margin = { left: 50, right: 20, top: 20, bottom: 20 };

// set up width and height of svg and graph
var svg = d3.select('svg');
var body = d3.select('body');
var width = svg.attr('width');
var height = svg.attr('height');
var innerWidth = width - margin.left - margin.right - 150;
var innerHeight = height - margin.top - margin.bottom;


// convert needed features to numeric
var row = d => {
d.year = +d.year;
d["Budget (M)"] = +d["Budget (M)"];
d.MetaScore = +d.MetaScore;
d["IMDB Rating"] = +d["IMDB Rating"];
d["International Gross (M)"] = +d.intgross_2013 / 1000000
d["Domestic Gross (M)"] = +d.domgross_2013 / 1000000
return d;
};

// read csv
d3.csv('bechdel.csv', row, data => {

// set up allowed changes to variables
// this will be displayed in drop down menus
var axisData = [{"text": "Budget (M)"},
                {"text": "Domestic Gross (M)"},
                {"text": "International Gross (M)"},
                {"text": "MetaScore"},
                {"text": "IMDB Rating"}];

var radiusData = [{"text": "IMDB Rating"},
                  {"text": "MetaScore"},
                  {"text": "Budget (M)"},
                  {"text": "Domestic Gross (M)"},
                  {"text": "International Gross (M)"}];

var colorData = [{"text": "Bechdel Test"},
                 {"text": "Year"},
                 {"text": "Rated"}]

// set up graph and axes
var g = svg.append('g')
  .attr('transform', `translate(${margin.left}, ${margin.top})`);
var xAxisG = g.append('g')
  .attr('transform', `translate(0, ${innerHeight})`)
  .attr('class', "x axis");
var yAxisG = g.append('g')
    .attr('class', "y axis");

var xScale = d3.scaleLinear();
var yScale = d3.scaleLinear();

var xAxis = d3.axisBottom().scale(xScale);
var yAxis = d3.axisLeft().scale(yScale);

// set up colors to use for points
var color = d3.scaleOrdinal(d3.schemeCategory10);

// set up tooltip on hover
var tooltip = d3.select("body").append("div")
  .attr("class", "tooltip")
  .style("opacity", 0);

// set up range and domain for x and y scales
xScale
  .domain(d3.extent(data, xValue))
  .range([0, innerWidth]);

yScale
  .domain([d3.min(data, yValue), d3.max(data, yValue)])
  .range([innerHeight, 30]);

// set up normalized scale
var rValue = d => d["IMDB Rating"];
var rs = d3.scaleLinear()
        .domain([d3.min(data, rValue), d3.max(data, rValue)])
        .range([1, 13]);

// draw circles for each point
g.selectAll('bubble').data(data)
  .enter().append('circle')
    .attr('class', 'circle')
    .attr('cx', d => xScale(xValue(d)))
    .attr('cy', d => yScale(yValue(d)))
    .attr('r', function(d){ return rs(d["IMDB Rating"])}) // set size of circle based on rating
    .style('fill', function(d){ return color(d["Bechdel Test"]); }) // set color based on pass or fail of test
    .on("mouseover", function(d, i) {  // display information on tooltip on hover
       tooltip.transition()
         .duration(200)
         .style("opacity", 1);
       tooltip.html("Name : " + d.title + "<br/>" +
                    "Country : " + d.country + "<br/>" +
                    "Director : " + d.director)
         .style("left", (d3.event.pageX) + "px")
         .style("top", (d3.event.pageY - 28) + "px");
       })
     .on("mouseout", function(d, i) { // remove tooltip on mouseout
       tooltip.transition()
         .duration(500)
         .style("opacity", 0);
       });

// Title of the graph
g.append("text")
        .attr("x", (innerWidth / 2))
        .attr("y", 8)
        .attr("class", "text")
        .attr("text-anchor", "middle")
        .style("font-size", "14px")
        .text("Movies: Budgets, Grosses, Ratings and The Bechdel Test");

// Label for radius
g.append('text')
  .attr("class", "text")
  .attr("id", "rLabel")
  .attr('x', width - 51)
  .attr('y', -10)
  .attr('dy', '.35em')
  .style('text-anchor', 'end')
  .text("Radius indicates IMDB Rating");

// Label for color
g.append('text')
  .attr("class", "text")
  .attr("id", "cLabel")
  .attr('x', width - 51)
  .attr('y', 0)
  .attr('dy', '.35em')
  .style('text-anchor', 'end')
  .text("Color indicates Bechdel Test");

// Label for Y-axis
g.append('text')
   .attr("class", "text")
   .attr('id','yAxisLabel')
   .attr("transform", "rotate(-90)")
   .attr("x", -30)
   .attr("y", 8)
   .attr("dy", ".71em")
   .style("text-anchor", "end")
   .text("MetaScore");

// Label for X-axis
g.append('text')
   .attr("class", "text")
   .attr('id','xAxisLabel')
   .attr("x", innerWidth)
   .attr("y", height-45)
   .style("text-anchor", "end")
   .text("Budget (M)");

// Label for Data
g.append('text')
   .attr("class", "text")
   .attr("x", width - 61)
   .attr("y", height-75)
   .style("text-anchor", "end")
   .text(" Data from : IMDB and Five Thirty Eight");

// sets up initial axes
function initAxis(){
xAxisG.call(xAxis);
yAxisG.call(yAxis);
}

// redraws axes
function updateAxis(){
        var t = d3.transition()
            .duration(1)

        xAxisG
            .transition(t)
            .call(xAxis)

        yAxisG
            .transition(t)
            .call(yAxis)
    }

initAxis()
updateAxis()

// set up Legend
var legend = svg.selectAll('legend')
    .data(color.domain())
    .enter().append('g')
    .attr('class', 'legend')
    .attr('transform', function(d,i){ return 'translate(0,' + i * 20 + ')'; });


// for each element in the color domain
// draw a rectangle with its color
legend.append('rect')
  .attr('x', width - 20)
  .attr('y', 30)
  .attr('width', 18)
  .attr('height', 18)
  .attr('class', 'colorrect')
  .style('fill', color);

// and show the name of the group
legend.append('text')
  .attr('x', width - 25)
  .attr('y', 39)
  .attr('dy', '.35em')
  .style('text-anchor', 'end')
  .attr('class', 'colortext')
  .text(function(d){return d; });

// on click sets all elements of that type to either 0 or 1 opacity
legend.on('click', function(type){
      g.selectAll('.circle')
          .filter(function(d){
              var result = false;
              if(d3.select(this).style('opacity') < 0.5){
                result = (d["Bechdel Test"] == type);
                }
              return result
          })
          .transition().duration(10)
            .delay(function (d,i) { return i})
              .style("opacity", 1);

      g.selectAll('.circle')
          .filter(function(d){
              console.log("hi")
              var result = false;
              if(d3.select(this).style('opacity') > 0.5){
                d3.select(this).style('opacity').value = 0;
                result = (d["Bechdel Test"] == type);
              }
              return result
          })
          .transition().duration(10)
            .delay(function (d,i) { return i})
              .style("opacity", 0);

})


// Select X-axis Variable dropdown
  body.append('br')
  var span = body.append('span')
    .text('Select X-Axis variable: ')
  var xInput = body.append('select')
      .attr('id','xSelect')
      .on('change',xChange)
    .selectAll('option')
      .data(axisData)
      .enter()
    .append('option')
      .attr('value', function (d) { return d.text })
      .text(function (d) { return d.text ;})

  body.append('br')

// Select Y-axis Variable dropdown
  var span = body.append('span')
      .text('Select Y-Axis variable: ')
  var yInput = body.append('select')
      .attr('id','ySelect')
      .on('change',yChange)
    .selectAll('option')
      .data(axisData)
      .enter()
    .append('option')
      .attr('value', function (d) { return d.text })
      .text(function (d) { return d.text ;})
  body.append('br')

// Select R Variable dropdown
  var span = body.append('span')
    .text('Select Radius variable:  ')
  var xInput = body.append('select')
      .attr('id','rSelect')
      .on('change',rChange)
    .selectAll('option')
      .data(radiusData)
      .enter()
    .append('option')
      .attr('value', function (d) { return d.text })
      .text(function (d) { return d.text ;})
  body.append('br')

// Select color Variable dropdown
  var span = body.append('span')
    .text('Select Color variable:  ')
  var xInput = body.append('select')
      .attr('id','rSelect')
      .on('change',cChange)
    .selectAll('option')
      .data(colorData)
      .enter()
    .append('option')
      .attr('value', function (d) { return d.text })
      .text(function (d) { return d.text ;})


// Initial selection
var xSelect = d3.select('#xSelect')
xSelect.property('value', 'Budget (M)')

var ySelect = d3.select('#ySelect')
ySelect.property('value', 'MetaScore')

// on change of x axis redraw
function xChange() {
    var value = this.value // get the new x value
    var xValue = d => d[value];
    xScale
        .domain([d3.min(data, xValue), d3.max(data, xValue)])
        .range([0, innerWidth]);

    xAxis.scale(xScale) // change the xScale
    d3.select('#xAxisLabel') // change the xAxisLabel
      .transition().duration(1000)
      .text(value)
    d3.selectAll('circle') // move the circles
      .transition().duration(1000)
      .delay(function (d,i) { return i})
        .attr('cx',function (d) { return xScale(d[value]) })
    updateAxis();
  }

// on change of y axis redraw
function yChange() {
    var value = this.value // get the new y value
    var yValue = d => d[value];
    yScale
        .domain([d3.min(data, yValue), d3.max(data, yValue)])
        .range([innerHeight, 30]);
    yAxis.scale(yScale) // change the yScale
    yAxisG.call(yAxis)
    d3.select('#yAxisLabel') // change the yAxisLabel
      .transition().duration(1000)
      .text(value)
    d3.selectAll('circle') // move the circles
      .transition().duration(1000)
      .delay(function (d,i) { return i})
        .attr('cy',function (d) {
        console.log(d3.select(this))
        return yScale(d[value]) })
    updateAxis();
  }

// on change of radius redraw
function rChange() {
    var value = this.value // get the new r variable value
    var rValue = d => d[value];
    var rs = d3.scaleLinear()
        .domain([d3.min(data, rValue), d3.max(data, rValue)])
        .range([1, 13]);
    d3.select('#rLabel') // change the radius label
      .transition().duration(1000)
      .text("Radius indicates " + value)
    d3.selectAll('circle') // resize the circles
      .transition().duration(1000)
      .delay(function (d,i) { return i})
        .attr('r',function (d) { return rs(d[value]) })
  }

// on change of color refill
function cChange() {
    var value = this.value // get the new color variable value
    var rValue = d => d[value];
    var color = d3.scaleOrdinal(d3.schemeCategory10);

    d3.select('#cLabel') // change the label
      .transition().duration(1000)
      .text("Color indicates " + value)
    d3.selectAll('circle') // recolor the circles
      .transition().duration(1000)
      .delay(function (d,i) { return i})
        .style('fill',function (d) { return color(d[value]); })
        .style("opacity", 1)

    // remove existing legend
    d3.selectAll('.colorrect').remove();
    d3.selectAll('.colortext').remove();
    // redraw legend
    var legend = svg.selectAll('legend')
    .data(color.domain())
    .enter().append('g')
    .attr('class', 'legend')
    .attr('transform', function(d,i){ return 'translate(0,' + i * 20 + ')'; });

    legend.append('rect')
    .attr('x', width - 20)
    .attr('y', 30)
    .attr('width', 18)
    .attr('height', 18)
    .attr('class', 'colorrect')
    .style('fill', color);

    // and show the name of the group
    legend.append('text')
    .attr('x', width - 25)
    .attr('y', 39)
    .attr('dy', '.35em')
    .style('text-anchor', 'end')
    .text(function(d){return d; })
    .attr('class', 'colortext');

    legend.on('click', function(type){
      g.selectAll('.circle')
          .filter(function(d){
              var result = false;
              if(d3.select(this).style('opacity') < 0.5){
                result = (d[value] == type);
                }
              return result
          })
          .transition().duration(10)
            .delay(function (d,i) { return i})
              .style("opacity", 1);

      g.selectAll('.circle')
          .filter(function(d){
              var result = false;
              if(d3.select(this).style('opacity') > 0.5){
                d3.select(this).style('opacity').value = 0;
                result = (d[value] == type);
              }
              return result
          })
          .transition().duration(10)
            .delay(function (d,i) { return i})
              .style("opacity", 0);

    })

  }

});