xxxxxxxxxx<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