Built with blockbuilder.org
forked from adamfknapp's block: base scatter plot rev 02
xxxxxxxxxx
<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>
<!-- load the d3.js library -->
<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;
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;
return 'translate(' + horz + ',' + vert + ')';
});
legend.append('rect')
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.style('fill', color)
.attr("fill-opacity", fillopac);
legend.append('text')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing)
.text(d => d);
//---------------------------------------------------------
// Draw the Dots ------------------------------------------
//---------------------------------------------------------
//Render the Base dataset
renderdots(baseLayer, data);
listenForHover(legend.selectAll('rect'), data);
listenForHover(legend.selectAll('text'), data);
}
// Draw the dots------------------------
function renderdots(g, layers){
let g2 = g.selectAll(".dot").data(layers);
g2 = g2
.enter().append("circle")
.attr('class', 'dot')
.merge(g2)
.attr("fill-opacity", d => ((d.result == hoveredColorValue) ? 0.7 : 0.3))
.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", d => colorOfDot(d))
.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");
}
function setOverlayTransparency(alpha){
overlayRect
.transition().duration(400)
.attr("fill", "rgba(255, 255, 255, " + alpha + ")");
}
function colorOfDot(d) {
if (d.result == 'Pass'){return "green";}
else if (d.result == 'Fail'){return "red";}
else {return "black";}
}
//---------------------------------------------------------
//Axis-----------------------------------------------------
//---------------------------------------------------------
// Add the X Axis
g.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
g.append("g")
.attr("class", "y axis")
.call(yAxis);
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