base scatter plot rev 03

forked from adamfknapp's block: base scatter plot rev 02

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
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>

<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: 80, right: 40, bottom: 30, left: 80},
   	 	width = 900 - margin.left - margin.right,
    	height = 470 - margin.top - margin.bottom;
	
  // 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]);
	var y = d3.scale.linear().range([height, 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("transform", "translate(" 
          + margin.left + "," + margin.top + ")");
  
  		//Based on https://blockbuilder.org/curran/0d2cc6698cad72a48027b8de0ebb417d
  		//This is the layer where the cars are drawn
  		var baseLayer = g.append("g");
    
  		// This layer contains a semi-transparent overlay
  		// that fades out the base dots.
      var overlayRect = g.append("g")
        .append("rect")
        .attr("width", innerWidth)
        .attr("height", innerHeight)
        .attr("fill", "none")
        .style("pointer-events", "none");
       
  		// This contains the subset of dots rendered on top
      // when you hover over the entries in the color legend.
      var foregroundLayer = 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;

});
</script>
</body>

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

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