[unlisted] base scatter plot rev 02

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.v4.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.timeParse("%m/%e/%y");
  
  // Set the ranges----------------------------------------
	var x = d3.scaleTime().range([0, width]);
	var y = d3.scaleLinear().range([height, 0]);

// Define the axes----------------------------------------
	var xAxis = d3.axisBottom(x).ticks(5);
	var yAxis = d3.axisLeft(y).ticks(5);
  
	// Define the line----------------------------------------
	var valueline = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.sold); });
    
	var hoveredColorValue; // this is used later
  
  // 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.schemeCategory10; 
  
	// add the tooltip area to the webpage--------------------
	var tooltip = d3.select("body").append("div")
    	.attr("class", "tooltip")
    	.style("opacity", 0);

function type(d) {
    d.date = parseDate(d.Release_date);
    d.sold = +d.Tickets_sold;
    d.result = d.Bechdel_Test_Result;
    return d;
  }
  
  var fillopac = 0.3;
	var r = 10; //set dot size
  var tipNumberFormat = d3.format(",");

// Get the data---------------------------------------------
  function render(data) {
    x.domain(d3.extent(data, d => d.date));
    y.domain([0, d3.max(data, d => d.sold)]);

// Define Colors & Fill------------------------------------ 
    var color = d3.scaleOrdinal()
    .domain(["Pass", "Fail", "No Data"])
    .range(["green", "red" , "black"]);  
  
//---------------------------------------------------------  
// Set up the legend---------------------------------------
//---------------------------------------------------------
    var legendRectSize = 20;                              
    var legendSpacing = 5;

d3.csv("film_data.csv", type, render);

</script>
</body>

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

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