Read me file for VI9
xxxxxxxxxx
<html>
<meta charset="utf-8">
<!-- Example based on https://bl.ocks.org/mbostock/3887118 -->
<!-- Tooltip example from https://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html -->
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<style>
body {
font: 11px sans-serif;
margin: auto;
width: 90%;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.dot {
stroke: #000;
}
.tooltip {
position: absolute;
width: 150px;
height: 40px;
font-size: 11px;
pointer-events: none;
}
</style>
<body>
<div class="col-xs-12 graph1">
<h4 class="text-center" >Selection and Highlighting implementation</h4>
<h5 class="text-center" >Hover on each legend makes other conferences become invisible temporary until hover out</h5>
<h5 class="text-center" >Click on each legend makes other conferences become invisible totally until click elsewhere</h5>
<h5 class="text-center" >Hover on each point show the name and the values of each point</h5>
</div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 50, right: 30, bottom: 60, left: 100},
width = 960 - margin.left - margin.right,
height = 560 - margin.top - margin.bottom;
var tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
// setup fill color
var cValueTR = function(d) {
if(d['Conf'] == 'SEC' || d['Conf'] == 'ACC' || d['Conf'] == 'Big 12' || d['Conf'] == 'Pac-12' || d['Conf'] == 'Big Ten') {
return d['Conf'];
}
};
//var colorTR = d3.scale.category10();
//Set the color for each region
var colorTR = d3.scale.ordinal()
.range(["#e41a1c", "#377eb8", "#4daf4a", "#984ea3", "#ff7f00"])
.domain(["SEC", "ACC", "Big 12", "Pac-12", "Big Ten"]);
// setup x
var xValueTR = function(d) {
if(d['Conf'] == 'SEC' || d['Conf'] == 'ACC' || d['Conf'] == 'Big 12' || d['Conf'] == 'Pac-12' || d['Conf'] == 'Big Ten') {
return d['Rushing Attempts'];
}
}, yValueTR = function(d) {
if(d['Conf'] == 'SEC' || d['Conf'] == 'ACC' || d['Conf'] == 'Big 12' || d['Conf'] == 'Pac-12' || d['Conf'] == 'Big Ten') {
return d["Passing Attempts"];
}
}// data -> value
var xScale = d3.scale.linear().range([0, width]), // value -> display
xMap = function(d) { return xScale(xValueTR(d));}, // data -> display
xAxis = d3.svg.axis().scale(xScale).orient("bottom");
var yScale = d3.scale.linear().range([height, 0]), // value -> display
yMap = function(d) { return yScale(yValueTR(d));}, // data -> display
yAxis = d3.svg.axis().scale(yScale).orient("left");
var opacityCircles = 0.8;
// add the graph canvas to the body of the webpage
var svg4 = d3.select(".graph1").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
var wrapper = svg4.append("g").attr("class", "chordWrapper")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// load data
d3.csv("passing-stats-2014.csv", function(error, data) {
// change string (from CSV) into number format
var myDataTR = [];
data.forEach(function(d) {
//d.Calories = +d.Calories;
if(d['Conf'] == 'SEC' || d['Conf'] == 'ACC' || d['Conf'] == 'Big 12' || d['Conf'] == 'Pac-12' || d['Conf'] == 'Big Ten') {
d['Rushing Attempts'] = +d['Rushing Attempts'];
d['Passing Attempts'] = +d['Passing Attempts'];
myDataTR.push(d);
}
});
// don't want dots overlapping axis, so add in buffer to data domain
xScale.domain([d3.min(myDataTR, xValueTR)-5, d3.max(myDataTR, xValueTR)+5]);
yScale.domain([d3.min(myDataTR, yValueTR)-5, d3.max(myDataTR, yValueTR)+5]);
// x-axis
wrapper.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end")
.text("Rushing Attempts");
// y-axis
wrapper.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Passing Attempts");
// draw dots
wrapper.selectAll(".dot")
.data(myDataTR)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 3.5)
.attr("cx", xMap)
.attr("cy", yMap)
.style("fill", function(d) { return colorTR(cValueTR(d));})
.style("opacity", opacityCircles)
.on("mouseover", function(d) {
tooltip.transition()
.duration(200)
.style("opacity", .9);
tooltip.html(d["Player"] + "<br/> (" + xValueTR(d)
+ ", " + yValueTR(d) + ")")
.style("left", (d3.event.pageX + 5) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
tooltip.transition()
.duration(500)
.style("opacity", 0);
});
// draw legend
var legend = wrapper.selectAll(".legend")
.data(colorTR.domain())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
// draw legend colored rectangles
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", colorTR)
.style("cursor", "pointer")
.on("mouseover", selectLegend(0.05))
.on("mouseout", selectLegend(opacityCircles))
.on("click", clickLegend);
// draw legend text
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d;})
});
///////////////////////////////////////////////////////////////////////////
////////////////////Hover function for the legend ////////////////////////
///////////////////////////////////////////////////////////////////////////
//Decrease opacity of non selected circles when hovering in the legend
function selectLegend(opacity) {
return function(d, i) {
var chosen = colorTR.domain()[i];
wrapper.selectAll(".dot")
.filter(function(d) { return d['Conf'] != chosen; })
.transition()
.style("opacity", opacity)
;
};
}//function selectLegend
///////////////////////////////////////////////////////////////////////////
///////////////////// Click functions for legend //////////////////////////
///////////////////////////////////////////////////////////////////////////
//Function to show only the circles for the clicked sector in the legend
function clickLegend(d,i) {
event.stopPropagation();
//deactivate the mouse over and mouse out events
d3.selectAll(".legend")
.on("mouseover", null)
.on("mouseout", null);
//Chosen legend item
var chosen = colorTR.domain()[i];
//Only show the circles of the chosen sector
wrapper.selectAll(".dot")
.style("opacity", opacityCircles)
.style("visibility", function(d) {
if (d['Conf'] != chosen) return "hidden";
else return "visible";
});
}//sectorClick
//Show all the cirkels again when clicked outside legend
function resetClick() {
//Activate the mouse over and mouse out events of the legend
d3.selectAll(".legend")
.on("mouseover", selectLegend(0.05))
.on("mouseout", selectLegend(opacityCircles));
//Show all circles
wrapper.selectAll(".dot")
.style("opacity", opacityCircles)
.style("visibility", "visible");
}//resetClick
//Reset the click event when the user clicks anywhere but the legend
d3.select("body").on("click", resetClick);
</script>
</body>
</html>
Modified http://d3js.org/d3.v3.min.js to a secure url
https://code.jquery.com/jquery-2.2.2.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
https://d3js.org/d3.v3.min.js