base scatter plot rev 02

<!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.

<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 https://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>

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

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js