Scatter Chart

forked from abrown004's block: Diverging Bar Chart

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet" type="text/css">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-time-format.v2.min.js"></script>
  <style>
    body {
    	font-family: 'Open Sans';
    	color: #333333;
		}
    .yAxis {
      font-family: 'Open Sans';
      color: #333333;
      font-size: 14px;
    }
    .xAxis {
      font-family: 'Open Sans';
      color: #333333;
      font-size: 14px;
    }
    div.tooltip {   
  		position: absolute;           
  		text-align: left;           
  		max-width: 300px;                  
  		/*height: 100px;*/                
  		padding: 10px;             
  		font-size: 14px;
      font-family: 'Open Sans';  
  		color: white;   
  		font-weight: 500;   
  		background: #123D4B;
      border: 1px solid black;
  		border-radius: 4px;           
  		pointer-events: none;         
		}
    /* removed limit line assuming there may be more than one limit
    .line {
      color: #333333;
  		stroke-width: 2px;
      stroke-dasharray: 5,2;
		}
		*/    
  </style>
</head>

<body>
  
  <script>
    
    // Define the variables
    var margin = {top:20, left:60, bottom:60, right:20};
		var h = 500 - margin.top - margin.bottom;
    var w = 860 - margin.left - margin.right;
        
    // Parse and format the dates
		var parseDate = d3.timeParse("%Y%m%d");
    var formatDate = d3.timeFormat("%b. %-d, %Y");
    
    // Calculate the percent the sample exceeded the limit/benchmark/NAL
    var exceedance = function(value,limit) {
      return ((value - limit)%limit);
    }
    
    // Tooltip div
    var tooltip = d3.select("body").append("div")   
    .attr("class", "tooltip")               
    .style("opacity", 0);
    
    // Import the data
    d3.csv("data.csv",function(d) {
      d.parameter = d.parameter;
      d.facility = d.project;
      d.sampleLocation = d.samplePoint;
    	d.date = parseDate(d.date);
      d.value = +d.value;
      d.units = d.units;
      d.limit = +d.limit;
      d.percentExceeded = exceedance(+d.value,+d.limit);
  		return d;
    },
    function(error,dataset) {
      if (error) throw error;
//      d3.select('#chart')
//            .datum(dataset) // bind data to the div
//            .call(bar()); // draw chart in div
    
    //// Define the variables
    var limit = 100; //NAL, Benchmark, or other limit
    var parameter = d3.map(dataset,function(d){return d.parameter;}).keys();
    var units = d3.map(dataset,function(d){return d.units;}).keys();  
      
    // Create the SVG element a surrounding margin and make 0,0 past the margin
    var svg = d3.select("body")
    	.append("svg")
      .attr("height", h + margin.top + margin.bottom)
      .attr("width", w + margin.left + margin.right)
      .append("g")
      .attr("transform","translate(" + margin.left + "," + margin.top + ")");
      
   	// Define the x-axis (time-series) scale
    var xScale = d3.scaleTime()
    							 .domain([new Date(2017,5,30), new Date(2018,6,1)])
    							 .rangeRound([0,w]);
    
    var xAxis = d3.axisBottom()
    							.scale(xScale)
    							.tickFormat(d3.timeFormat("%b '%y"));
    
    //Define the y-axis (continuous) scale
    var yScale = d3.scaleLinear()
    							 .domain([0,
                            d3.max(dataset, 
                                   function(d) { return d.value})])
    							 .rangeRound([h, 0])
    
    var yAxis = d3.axisLeft()
    							.scale(yScale);
      
   	// Define the z-scale for the color gradient in the circle markers
    var colorScale = d3.scaleLinear()
    							 		 .domain([d3.min(dataset,
                                         function(d){return(d.percentExceeded);}),
                              0,
                              d3.max(dataset,
                                         function(d){return(d.percentExceeded);})])
            			 		 .range(['#9ecae1','#ddd','#e6550d'])
    									 .nice();
      
    // Add the circle markers with the tooltip functionality  
   	svg.append("g")
      	.attr("class", "markers")
    	.selectAll("circle")
    	.data(dataset)
      .enter().append("circle")
    		.attr("r", 5)
    		.attr("cx",function(d) {return xScale(d.date); })
    		.attr("cy",function(d){return yScale(d.value); })
    		.attr("fill", function(d) {return colorScale(d.percentExceeded);}) // "#d9d9d9")
    		.attr("stroke","#333333")
        .attr("stroke-width",2)
        .style('opacity', 0.9)
			.on("mouseover", function(d) {		
            tooltip.transition()		
              .duration(200)		
              .style("opacity", .9);	
            tooltip.html(
              "Facility Name: " + d.facility + "<br/>" +
              "Sample Date: " + formatDate(d.date) + "<br/>" +
              "Sample Location: " + d.sampleLocation + "<br/>" +
              "Parameter Value: " + d.value + " " + d.units + "<br/>" +
              "Limit: " + d.limit + " " + d.units + "<br/>" +
            	"Percent Exceeded: " + d.percentExceeded + "%")
            	.style("left", (d3.event.pageX) + "px")
         			.style("top", (d3.event.pageY) + "px");
	        })
    	.on('mouseout', function (d) {
            tooltip.style("opacity", 0);
       		});
      
    // Add the x-axis
    svg.append("g")
    	.attr("class","xAxis")
    	.attr("transform", "translate(0," + yScale(0) + ")")
    	.call(xAxis)
      .append("text")
      .attr("x",w/2)
      .attr("y",0+0.8*margin.bottom)
      .attr("fill", "#333333")
      .attr("font-weight", "bold")
      .attr("text-anchor", "middle")
    	.attr("font-size","15px")
      .text("Sample Date");
      
    // Add the y-axis
    svg.append("g")
    	.attr("class","yAxis")
    	.call(yAxis)
    	.append("text")
    	.attr("transform", "rotate(-90)")
      .attr("y", 0-margin.left)
      .attr("x", 0-h/2)
      .attr("dy", "1em")
      .attr("fill", "#333333")
      .attr("font-weight", "bold")
      .attr("text-anchor", "middle")
    	.attr("font-size","15px")
      .text(parameter + " [" + units + "]");
      
/*  // Add the limit line
		//Removed this line assuming there may be multiple limits
    svg.append("g")
    	.attr("class","line")
      .attr("transform", "translate(0," + yScale(limit) + ")")
      .call(d3.axisBottom()
          .scale(xScale)
          .tickSize(0)
          .tickFormat(""))
    	.append("text")
    	.attr("x",w)
    	.attr("y",0 - 0.2*margin.bottom)
    	.attr("fill", "#333333")
    	.attr("text-anchor","end")
     	.attr("font-size","15px")
    	.text("Limit = " + limit + " " + units);
*/    
	});
    
  </script>
</body>

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

https://d3js.org/d3-time-format.v2.min.js