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.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;
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(function(d){return d;})
//---------------------------------------------------------
// Draw the Dots ------------------------------------------
//---------------------------------------------------------
var r = 10 //set dot size
//var layers = stack(nested.reverse()).reverse(); //line 141 from currans code
var tipNumberFormat = d3.format(",")
//Render the Base dataset
renderdots();
//Determine transparency based on hover color
//if(hoveredColorValue){
// setOverlayTransparency(0.7);
// renderdots(foregroundLayer, layers.filter(function (layer){
// return layer.key === hoveredColorValue;
// }));
// } else {
// setOverlayTransparency(0.0);
// renderBars(foregroundLayer, []); //Reset transparecy
// }
// Draw the dots------------------------
function renderdots(){
g.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("fill-opacity", fillopac)
.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", function(d) {
if (d.result == 'Pass'){return "green";}
else if (d.result == 'Fail'){return "red";}
else {return "black";}
})
.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");
}
//---------------------------------------------------------
//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);
});
</script>
</body>
https://d3js.org/d3.v3.min.js
https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js