|
<!DOCTYPE html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<script src="https://d3js.org/d3.v5.min.js"></script> |
|
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> <!-- for color scales --> |
|
|
|
<style> |
|
body {font-family: calibri;} |
|
.axis {font: 14px calibri;} |
|
.label {font: 16px calibri;} |
|
.tooltip { |
|
position: absolute; |
|
width: 1105px; |
|
height: 73px; |
|
background: #f2f2f2; |
|
pointer-events: none;} |
|
|
|
</style> |
|
</head> |
|
|
|
<body> |
|
<h3>Scatterplot</h3> |
|
<div><svg id="chart1" width="800" height="451"></svg></div> |
|
|
|
|
|
|
|
<script> |
|
// add the graph canvas to the body of the webpage |
|
var svg = d3.select("#chart1"), |
|
margin = {top: 20, right: 55, bottom: 50, left: 70}, |
|
width = +svg.attr("width") - margin.left - margin.right, |
|
height = +svg.attr("height") - margin.top - margin.bottom; |
|
|
|
var g = svg.append("g") |
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); |
|
|
|
// add the tooltip area to the webpage |
|
var tooltip = d3.select("body").append("div") |
|
.attr("class", "tooltip") |
|
.style("opacity", 0); |
|
|
|
|
|
// load data |
|
d3.csv("ScatterPlot1.csv").then(function(data) { |
|
|
|
/* |
|
* value accessor - returns the value to encode for a given data object. |
|
* scale - maps value to a visual display encoding, such as a pixel position. |
|
* map function - maps from data value to display value |
|
*/ |
|
|
|
// setup x - use +d to change string (from CSV) into number format |
|
var xValue = function(d) { return +d["numStudents"];}, // data -> value |
|
xScale = d3.scaleLinear().range([0, width]), // value -> display |
|
xMap = function(d) { return xScale(xValue(d));}; // data -> display |
|
|
|
|
|
// setup y - use +d to change string into number format |
|
var yValue = function(d) { return +d["Faculty"];}, // data -> value |
|
yScale = d3.scaleLinear().range([height, 0]), // value -> display |
|
yMap = function(d) { return yScale(yValue(d));}; // data -> display |
|
|
|
// don't want dots overlapping axis, so add in buffer to data domain |
|
xScale.domain([d3.min(data, xValue)-1, d3.max(data, xValue)+1]); |
|
yScale.domain([0, d3.max(data, yValue)+1]); |
|
|
|
//create color scale |
|
var cValue = function(d) { return d['country'];}, |
|
colors = d3.scaleOrdinal(d3.schemePaired); |
|
|
|
var sValue = function(d) { return parseInt(d['country']); }, |
|
sizes = d3.scaleLinear() |
|
.domain([1.5, d3.max(data, sValue)+4.86]) |
|
.range([1.5, 6.5]); |
|
|
|
// x-axis |
|
g.append("g") |
|
.attr("class", "axis x-axis") |
|
.attr("transform", "translate(0," + height + ")") // move axis to bottom of chart |
|
.call(d3.axisBottom(xScale)); |
|
|
|
// x-axis label |
|
g.append("text") |
|
.attr("class", "label") |
|
.attr("x", width/2) |
|
.attr("y", height+(margin.bottom*0.75)) |
|
.style("text-anchor", "middle") |
|
.text("Number of Students"); |
|
|
|
// y-axis |
|
g.append("g") |
|
.attr("class", "axis y-axis") |
|
.call(d3.axisLeft(yScale)); |
|
|
|
// y-axis label |
|
g.append("text") |
|
.attr("class", "label") |
|
.attr("x", 0-(height/2)) |
|
.attr("y", 0-(margin.left*0.75)) |
|
.attr("transform", "rotate(-90)") // rotate text -90 degrees from x, y |
|
.style("text-anchor", "middle") |
|
.text("Number of Facutly Members"); |
|
|
|
// draw dots |
|
g.selectAll(".dot") |
|
.data(data) |
|
.enter().append("circle") |
|
.attr("class", "dot") |
|
.attr("r", 3) |
|
.attr("cx", xMap) |
|
.attr("cy", yMap) |
|
.style("fill", function(d) { return colors(cValue(d)); }) |
|
|
|
|
|
// tooltip |
|
.on("mouseover", function(d) { |
|
tooltip.transition() |
|
.duration(200) // ms delay before appearing |
|
.style("opacity", .8); // tooltip appears on mouseover |
|
tooltip.html(d["Number of Students"] + "<br/> " + d.numStudents + "<br/>(" + xValue(d) |
|
+ ", " + yValue(d) + ")") |
|
.style("left", (d3.event.pageX + 10) + "px") // specify x location |
|
.style("top", (d3.event.pageY - 28) + "px"); // specify y location |
|
}) |
|
.on("mouseout", function(d) { |
|
tooltip.transition() |
|
.duration(500) |
|
.style("opacity", 0); // disappear on mouseout |
|
}); |
|
|
|
// draw legend |
|
var legend = svg.selectAll(".legend") |
|
.data(colors.domain()) |
|
.enter().append("g") |
|
.attr("class", "legend") |
|
.attr("transform", function(d, i) { return "translate(0," + i * 15 + ")"; }); |
|
|
|
// draw legend colored rectangles |
|
legend.append("rect") |
|
.attr("x", width ) |
|
.attr("width", 8) |
|
.attr("height", 7) |
|
.style("fill", colors); |
|
|
|
// draw legend text |
|
legend.append("text") |
|
.attr("x", width - 10) |
|
.attr("y", 9) |
|
.attr("dy", ".15em") |
|
.style("text-anchor", "end") |
|
.text(function(d,i) { return d;}) |
|
}); |
|
</script> |
|
</body> |
