adamfknapp · November 15, 2017 03:56
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/AdditionalData.csv b/AdditionalData.csv
diff --git a/film_data.csv b/film_data.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">

 <head> 
  <h1> The Bechdel Test</h1>

  The Bechdel test asks a simple question: does a film have at least one scene where two women have a discussion about something other than a man? This visualization shows trends in the Bechdel Test over time along with the performance of specific films.  

  
 <style> /* set the CSS */
 circle { transition: opacity .4s; }	
 body { font: 12px Arial;}
 path { 
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
 }
 .axis path,
 .axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
 }  
 // Legend-------------
 .legend{font-family: 'Open Sans', sans-serif;
        font-size: 12pt;}
  		rect{ stroke-width: 2;}
  
 .tooltip {
    position: absolute;			
    text-align: left;			
    width: 250px;					
    height: 60px;					
    padding: 2px;				
    font: 12px sans-serif;		
    background: white;	
    border: 0px;		
    border-radius: 8px;			
    pointer-events: none;	
 }
  
 </style>
 <body>

 <!-- load the d3.js library -->    
 <script src="https://d3js.org/d3.v3.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script>
 <script>
  
 //---------------------------------------------------------  
 // Set up & Define variables-------------------------------
 //--------------------------------------------------------- 
  
 	// Set the dimensions of the canvas / graph--------------
 	var margin = {top: 30, right: 40, bottom: 30, left: 120},
   	 	width = 900 - margin.left - margin.right,
    	height = 450 - margin.top - margin.bottom;

  var LowerPanel = 100
  var RightPanel = 100
  // Parse the date / time---------------------------------
 	// see https://github.com/d3/d3-time-format for details on parsing dates 
 	var parseDate = d3.time.format("%m/%e/%y").parse;
  // Set the ranges----------------------------------------
 	var x = d3.time.scale().range([0, width- RightPanel]);
 	var y = d3.scale.linear().range([height - LowerPanel , 0]);
  // Define the axes----------------------------------------
 	var xAxis = d3.svg.axis().scale(x)
    	.orient("bottom").ticks(5);
 	var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(5);
  
 	// Define the line----------------------------------------
 	var valueline = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.sold); });
    
 	
  // Adds the svg canvas-----------------------------------
 	var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
  
  
 
  var g = svg.append("g").attr("id","two").attr("transform", "translate(" 
          + margin.left + "," + margin.top + ")");
  
  		var baseLayer = g.append("g");
    
     

  
 	// setup fill color---------------------------------------
 	var cValue = function(d) { return d.Bechdel_Test_Result;},
    	color = d3.scale.category10(); 
  
 	// add the tooltip area to the webpage--------------------
 	var tooltip = d3.select("body").append("div")
    	.attr("class", "tooltip")
    	.style("opacity", 0);
  
  
 // Get the data---------------------------------------------
    d3.csv("film_data.csv", function(error, data) {
        data.forEach(function(d) {
            d.date = parseDate(d.Release_date);
            d.sold = +d.Tickets_sold;
            d.result = d.Bechdel_Test_Result;
        });
      
      // Scale the range of the data
        x.domain(d3.extent(data, function(d) { return d.date; }));
        y.domain([0, d3.max(data, function(d) { return d.sold; })]);
     
      // Define Colors & Fill------------------------------------ 
      var color = d3.scale.ordinal()
              .domain(["Pass", "Fail", "No Data"])
              .range(["green", "red" , "black"]);  
      var fillopac = 0.3 
  
 //---------------------------------------------------------  
 // Set up the legend---------------------------------------
 //---------------------------------------------------------
    var legendRectSize = 20;                              
    var legendSpacing = 5;                                
    var legend = g.selectAll('.legend')                     
      .data(color.domain())  
      .enter()                                                
      .append('g')                                            
      .attr('class', 'legend')                                
      .attr('transform', function(d, i) {                     
        var height = legendRectSize + legendSpacing+5;          
        var offset =  height * color.domain().length / 2;     
        var horz = width -2 * legendRectSize;                       
        var vert = i * height - offset+50;                       
        return 'translate(' + horz + ',' + vert + ')';        
      });                                                    
    legend.append('rect')                                     
        .attr('width', legendRectSize)                          
        .attr('height', legendRectSize)                         
        .style('fill', color)
        .attr("fill-opacity", fillopac)
    		.on("mouseover", function(d){
      g.selectAll("circle").style("opacity", function(e){
        return e.result === d ? 1 : 0.1
      })
    }).on("mouseout", function(){
      g.selectAll("circle").style("opacity", 1)
    });                                
    legend.append('text')                                     
        .attr('x', legendRectSize + legendSpacing)              
        .attr('y', legendRectSize - legendSpacing)              
        .text(function(d){return d;})   
  
  
  
 //---------------------------------------------------------  
 // Draw the Dots ------------------------------------------
 //--------------------------------------------------------- 
  
  	var r = 10 //set dot size
    //var layers = stack(nested.reverse()).reverse(); //line 141 from currans code
    var tipNumberFormat = d3.format(",")
 		
    //Render the Base dataset
    renderdots();     
      
    // Draw the dots------------------------
    function renderdots(){
      g.selectAll("dot")
        .data(data)
      	.enter().append("circle")
    		.attr("fill-opacity", fillopac)
        .attr("r", r)
        .attr("cx", function(d) { return x(d.date); })
        .attr("cy", function(d) { return y(d.sold); })
        
    		//Set color based on value-----
        .style("fill", function(d) {
      				if (d.result == 'Pass'){return "green";}
      				else if (d.result == 'Fail'){return "red";}
      				else {return "black";}
      				})
    
      	.on("mouseover", function(d) {
           d3.select(this)
             .attr("r",r*1.5)
             .attr("fill-opacity", fillopac*3); // Change size of marker
           
      		tooltip.transition()
               .duration(100)
          		  .style("opacity", .9);
          tooltip.html(d["Title"]
                       + "<br/>" + d["Bechdel_Test_Result"]
                       + "<br/> Released: " + d["Release_date"]
                       + "<br/> Tickets sold: "+ 	tipNumberFormat(d["Tickets_sold"])  												)
               .style("left", (d3.event.pageX + 15) + "px")
               .style("top", (d3.event.pageY - 10) + "px");
         	})
     .on("mouseout", function(d) {		
          d3.select(this).attr("r",r).attr("fill-opacity", fillopac); 
      		tooltip.transition()		
                .duration(500)		
                .style("opacity", 0);	
        })
    ;}
 
   function listenForHover(selection, data){
        selection
          .on("mouseover", function (d){
            hoveredColorValue = d;
            render(data);
          })
          .on("mouseout", function (d){
            hoveredColorValue = null;
            render(data);
          })
          .style("cursor", "pointer");
      }  
      
      
 //---------------------------------------------------------   
 //Axis-----------------------------------------------------
 //--------------------------------------------------------- 
  
    // Add the upper X Axis
    g.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + (height-LowerPanel) +")")
        .call(xAxis)
    		;     

      
      
    // Add the Y Axis
    g.append("g")
        .attr("class", "y axis")
        .call(yAxis);
      
    // text label for the y axis
    g.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 0 - margin.left)
      .attr("x",0 - (height / 3))
      .attr("dy", "2em")
      .style("text-anchor", "middle")
      .text("Tickets Sold");   
    
 //---------------------------------------------------------   
 //Lower Plot-----------------------------------------------
 //--------------------------------------------------------- 

 var PassRate = [34,49,28,40,48,32,28,40,32,23,60,52,44,56];
 var SocialData = [59,60,61,62,63,64,64,63,64,64,66,67,68,68];
      
 //Based on Scott Murray's tutorial at http://alignedleft.com/tutorials/d3/making-a-bar-chart

 var w = 775;
 var xstart = 135
 var h = 100;
 var barpad = 1
 var xSpace = 20

 //Set up the SVG container for the bar chart
 var svg = d3.select("body").append("svg")
      .attr("width", w)
      .attr("height", h);

          // svg repositioning
    
      
 //Create the bar chart
 svg.selectAll("rect")
  	.data(PassRate)
  	.enter()
  	.append("rect")
  	.attr("fill", "green")
     .style("fill-opacity",0.4)
  	.attr("x", function(d,i){
  			return xstart+(i *((w-xstart)/PassRate.length)); // Space out the bars
 				})
  	.attr("y", function(d){
  			return h-d;//Intert the chart
 				})
   	.attr("width", (w-xstart)/(PassRate.length+ barpad))
    .attr("height", function(d){
  			return d; // Get heights of the bars
 				});

 //Bar chart labels
 svg.selectAll("text")
   .data(PassRate)
   .enter()
   .append("text")

 	 .text(function(d){
  				return d;
 					})
  	.attr("x", function(d,i){
  			return xstart+(i *((w-xstart)/PassRate.length)+14); // Space out the bars
 				})
  	.attr("y", function(d){
  			return h-d-4;//Invert the chart
 				})	
    .attr("font-family", "sans-serif")
    .attr("font-size", "12px")
    .attr("fill", "grey")
      

 });
 </script>
 </body>
year	passtickets	womenCong	BetterMan
2000	193,479,416	12.5	58.4
2001	327,559,803	12.5	59.4
2002	206,321,547	14	60.3
2003	265,787,633	14	61.4
2004	352,909,556	14.4	62.4
2005	194,933,155	14.4	63.2
2006	173,954,006	15.9	64
2007	293,780,669	15.9	63.9
2008	150,133,991	17.6	63.7
2009	197,652,980	17.6	64
2010	383,923,854	17.9	64.2
2011	324,879,834	17.9	65.9
2012	270,891,996	17.9	67.6
2013	378,928,356	17.9	68
	<!DOCTYPE html>
	<meta charset="utf-8">

	<head>
	<h1> The Bechdel Test</h1>

	The Bechdel test asks a simple question: does a film have at least one scene where two women have a discussion about something other than a man? This visualization shows trends in the Bechdel Test over time along with the performance of specific films.


	<style> /* set the CSS */
	circle { transition: opacity .4s; }
	body { font: 12px Arial;}
	path {
	stroke: steelblue;
	stroke-width: 2;
	fill: none;
	}
	.axis path,
	.axis line {
	fill: none;
	stroke: grey;
	stroke-width: 1;
	shape-rendering: crispEdges;
	}
	// Legend-------------
	.legend{font-family: 'Open Sans', sans-serif;
	font-size: 12pt;}
	rect{ stroke-width: 2;}

	.tooltip {
	position: absolute;
	text-align: left;
	width: 250px;
	height: 60px;
	padding: 2px;
	font: 12px sans-serif;
	background: white;
	border: 0px;
	border-radius: 8px;
	pointer-events: none;
	}

	</style>
	<body>

	<!-- load the d3.js library -->
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script>
	<script>

	//---------------------------------------------------------
	// Set up & Define variables-------------------------------
	//---------------------------------------------------------

	// Set the dimensions of the canvas / graph--------------
	var margin = {top: 30, right: 40, bottom: 30, left: 120},
	width = 900 - margin.left - margin.right,
	height = 450 - margin.top - margin.bottom;

	var LowerPanel = 100
	var RightPanel = 100
	// Parse the date / time---------------------------------
	// see https://github.com/d3/d3-time-format for details on parsing dates
	var parseDate = d3.time.format("%m/%e/%y").parse;
	// Set the ranges----------------------------------------
	var x = d3.time.scale().range([0, width- RightPanel]);
	var y = d3.scale.linear().range([height - LowerPanel , 0]);
	// Define the axes----------------------------------------
	var xAxis = d3.svg.axis().scale(x)
	.orient("bottom").ticks(5);
	var yAxis = d3.svg.axis().scale(y)
	.orient("left").ticks(5);

	// Define the line----------------------------------------
	var valueline = d3.svg.line()
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y(d.sold); });


	// Adds the svg canvas-----------------------------------
	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)



	var g = svg.append("g").attr("id","two").attr("transform", "translate("
	+ margin.left + "," + margin.top + ")");

	var baseLayer = g.append("g");




	// setup fill color---------------------------------------
	var cValue = function(d) { return d.Bechdel_Test_Result;},
	color = d3.scale.category10();

	// add the tooltip area to the webpage--------------------
	var tooltip = d3.select("body").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);


	// Get the data---------------------------------------------
	d3.csv("film_data.csv", function(error, data) {
	data.forEach(function(d) {
	d.date = parseDate(d.Release_date);
	d.sold = +d.Tickets_sold;
	d.result = d.Bechdel_Test_Result;
	});

	// Scale the range of the data
	x.domain(d3.extent(data, function(d) { return d.date; }));
	y.domain([0, d3.max(data, function(d) { return d.sold; })]);

	// Define Colors & Fill------------------------------------
	var color = d3.scale.ordinal()
	.domain(["Pass", "Fail", "No Data"])
	.range(["green", "red" , "black"]);
	var fillopac = 0.3

	//---------------------------------------------------------
	// Set up the legend---------------------------------------
	//---------------------------------------------------------
	var legendRectSize = 20;
	var legendSpacing = 5;
	var legend = g.selectAll('.legend')
	.data(color.domain())
	.enter()
	.append('g')
	.attr('class', 'legend')
	.attr('transform', function(d, i) {
	var height = legendRectSize + legendSpacing+5;
	var offset = height * color.domain().length / 2;
	var horz = width -2 * legendRectSize;
	var vert = i * height - offset+50;
	return 'translate(' + horz + ',' + vert + ')';
	});
	legend.append('rect')
	.attr('width', legendRectSize)
	.attr('height', legendRectSize)
	.style('fill', color)
	.attr("fill-opacity", fillopac)
	.on("mouseover", function(d){
	g.selectAll("circle").style("opacity", function(e){
	return e.result === d ? 1 : 0.1
	})
	}).on("mouseout", function(){
	g.selectAll("circle").style("opacity", 1)
	});
	legend.append('text')
	.attr('x', legendRectSize + legendSpacing)
	.attr('y', legendRectSize - legendSpacing)
	.text(function(d){return d;})



	//---------------------------------------------------------
	// Draw the Dots ------------------------------------------
	//---------------------------------------------------------

	var r = 10 //set dot size
	//var layers = stack(nested.reverse()).reverse(); //line 141 from currans code
	var tipNumberFormat = d3.format(",")

	//Render the Base dataset
	renderdots();

	// Draw the dots------------------------
	function renderdots(){
	g.selectAll("dot")
	.data(data)
	.enter().append("circle")
	.attr("fill-opacity", fillopac)
	.attr("r", r)
	.attr("cx", function(d) { return x(d.date); })
	.attr("cy", function(d) { return y(d.sold); })

	//Set color based on value-----
	.style("fill", function(d) {
	if (d.result == 'Pass'){return "green";}
	else if (d.result == 'Fail'){return "red";}
	else {return "black";}
	})

	.on("mouseover", function(d) {
	d3.select(this)
	.attr("r",r*1.5)
	.attr("fill-opacity", fillopac*3); // Change size of marker

	tooltip.transition()
	.duration(100)
	.style("opacity", .9);
	tooltip.html(d["Title"]
	+ "<br/>" + d["Bechdel_Test_Result"]
	+ "<br/> Released: " + d["Release_date"]
	+ "<br/> Tickets sold: "+ tipNumberFormat(d["Tickets_sold"]) )
	.style("left", (d3.event.pageX + 15) + "px")
	.style("top", (d3.event.pageY - 10) + "px");
	})
	.on("mouseout", function(d) {
	d3.select(this).attr("r",r).attr("fill-opacity", fillopac);
	tooltip.transition()
	.duration(500)
	.style("opacity", 0);
	})
	;}

	function listenForHover(selection, data){
	selection
	.on("mouseover", function (d){
	hoveredColorValue = d;
	render(data);
	})
	.on("mouseout", function (d){
	hoveredColorValue = null;
	render(data);
	})
	.style("cursor", "pointer");
	}


	//---------------------------------------------------------
	//Axis-----------------------------------------------------
	//---------------------------------------------------------

	// Add the upper X Axis
	g.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + (height-LowerPanel) +")")
	.call(xAxis)
	;



	// Add the Y Axis
	g.append("g")
	.attr("class", "y axis")
	.call(yAxis);

	// text label for the y axis
	g.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 0 - margin.left)
	.attr("x",0 - (height / 3))
	.attr("dy", "2em")
	.style("text-anchor", "middle")
	.text("Tickets Sold");

	//---------------------------------------------------------
	//Lower Plot-----------------------------------------------
	//---------------------------------------------------------

	var PassRate = [34,49,28,40,48,32,28,40,32,23,60,52,44,56];
	var SocialData = [59,60,61,62,63,64,64,63,64,64,66,67,68,68];

	//Based on Scott Murray's tutorial at http://alignedleft.com/tutorials/d3/making-a-bar-chart

	var w = 775;
	var xstart = 135
	var h = 100;
	var barpad = 1
	var xSpace = 20

	//Set up the SVG container for the bar chart
	var svg = d3.select("body").append("svg")
	.attr("width", w)
	.attr("height", h);

	// svg repositioning


	//Create the bar chart
	svg.selectAll("rect")
	.data(PassRate)
	.enter()
	.append("rect")
	.attr("fill", "green")
	.style("fill-opacity",0.4)
	.attr("x", function(d,i){
	return xstart+(i *((w-xstart)/PassRate.length)); // Space out the bars
	})
	.attr("y", function(d){
	return h-d;//Intert the chart
	})
	.attr("width", (w-xstart)/(PassRate.length+ barpad))
	.attr("height", function(d){
	return d; // Get heights of the bars
	});

	//Bar chart labels
	svg.selectAll("text")
	.data(PassRate)
	.enter()
	.append("text")

	.text(function(d){
	return d;
	})
	.attr("x", function(d,i){
	return xstart+(i *((w-xstart)/PassRate.length)+14); // Space out the bars
	})
	.attr("y", function(d){
	return h-d-4;//Invert the chart
	})
	.attr("font-family", "sans-serif")
	.attr("font-size", "12px")
	.attr("fill", "grey")


	});
	</script>
	</body>