|
<html> |
|
<meta http-equiv="content-type" content="text/html; charset=UTF8"> |
|
<meta name="viewport" content="initial-scale=1,maximum-scale=1"/> |
|
<link rel="stylesheet" type="text/css" href="dc_b.css" media="screen" /> |
|
|
|
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> |
|
|
|
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/styles/color-brewer.min.css" media="screen" /> |
|
|
|
<style> |
|
|
|
html { |
|
background-color: #5ACDE5; |
|
|
|
} |
|
|
|
#world-chart { |
|
z-index: -20; |
|
} |
|
|
|
body { |
|
margin:0px; padding:0px; |
|
background-color: #5ACDE5; |
|
/*remove vertical margins*/ |
|
margin-top: 0; |
|
margin-bottom: 0; |
|
/*remove horizontal margins*/ |
|
margin-left: 0; |
|
margin-right:: 0 |
|
} |
|
|
|
#header{ |
|
background-color:rgba(0,0,0,0.0); |
|
} |
|
|
|
hr { |
|
border: 0; |
|
height: 0; |
|
border-top: 0px solid rgba(0, 0, 0, 0.1); |
|
//border-bottom: 1px solid rgba(255, 255, 255, 0.5); |
|
border-bottom: 0px solid rgba(255, 255, 255, 0.5); |
|
background-color:rgba(0,0,0,0.0); |
|
} |
|
|
|
table th tr { |
|
background-color:rgba(0,0,0,0.0); |
|
border-collapse: separate; /* Or do nothing, this is default */ |
|
border-spacing: -10px; /* Only works if border-collapse is separate */ |
|
} |
|
|
|
.selectext { |
|
display: block; |
|
font-family: "Helvetica, san-serif"; |
|
text-shadow: 1px 1px 2px #000000; |
|
font: 24px bold sans-serif; |
|
color: white!important; |
|
text-shadow: 1px 1px 2px #000000; |
|
position:absolute; margin-top:550pt; margin-left:65pt; margin-top:5pt; |
|
z-index: 999; |
|
} |
|
|
|
.caret { |
|
display:block; |
|
border-left: 8px solid transparent; |
|
border-right: 8px solid transparent; |
|
border-top: 8px solid #FFFFFF; |
|
position: absolute; top: 10px; left: 265px; z-index: -20; |
|
z-index: 999; |
|
} |
|
|
|
#imagehere { |
|
display:block-inline; |
|
position: absolute; top: 45px; left: 5px; |
|
margin-left:1px; |
|
height=20px; width=20px; |
|
background-color: transparent; |
|
z-index:1000; |
|
} |
|
|
|
.dropdown-menu ult li a{ |
|
display:block; |
|
color: #666; //black; |
|
text-shadow: 0px 0px 0px #000000; |
|
font: 10px!important ; |
|
} |
|
|
|
table.table-hover tbody { |
|
margin: 0; |
|
text-align: center; |
|
margin:-10px; padding:0px; |
|
background-color: rgba(0,0,0,0.0); |
|
} |
|
|
|
tr.header { |
|
color: white; |
|
text-shadow: 1px 1px 2px #000000; |
|
background-color: rgba(0,0,0,0.0); |
|
} |
|
|
|
tr{ |
|
background-color: rgba(0,0,0,0.0); |
|
} |
|
tr.header.body{ |
|
color: white; |
|
text-shadow: 1px 1px 2px #000000; |
|
background-color: rgba(0,0,0,0.0); |
|
} |
|
|
|
th.body{ |
|
background-color: transparent!important; |
|
} |
|
.dc-chart .x-axis-label { |
|
fill: white; |
|
text-shadow: 1px 1px 2px #000000; |
|
} |
|
|
|
table .dc-table-graph.table.table-hover tbody tr.dc-table-group td.dc-table-label { |
|
background-color: rgba(0,0,0,0.0); |
|
margin: 0; |
|
text-align: center; |
|
} |
|
//tr.dc-table-group { display:none; } |
|
|
|
.dc-chart svg g g.chart-body g.stack text.barLabel { |
|
display:none; |
|
} |
|
|
|
//.dc-chart svg g g.chart-body g.axis.y { display: none; } |
|
|
|
.dc-table-row .dc-table-column { |
|
font: 24px bold sans-serif; |
|
color: white; |
|
text-shadow: 1px 1px 2px #000000; |
|
background-color: rgba(0,0,0,0.0); |
|
} |
|
|
|
.dc-table-row .dc-table-column._0{ |
|
background-color: transparent; |
|
} |
|
|
|
/* first column */ |
|
/* moving over so that marker image can be first in row */ |
|
td:first-child { |
|
padding-left:2px; |
|
background-color: transparent; |
|
} |
|
|
|
td.dc-table-label .dc-table-column { |
|
background-color: transparent; |
|
} |
|
|
|
//.dc-table-group .tr { |
|
//box-shadow: 0 1px 10px #000000; |
|
// background-color: transparent; |
|
//} |
|
|
|
td.dc-table-label{ |
|
background-color: transparent; |
|
} |
|
.dc-table-label td{ |
|
background-color: transparent; |
|
} |
|
|
|
tr { |
|
background-color: transparent; |
|
} |
|
|
|
.dc-table-group .dc-table-column{ |
|
background-color: transparent; |
|
} |
|
|
|
.dc-table-group .dc-table-column._1{ |
|
width:20px; |
|
visibility: hidden; |
|
background-color: transparent; |
|
} |
|
|
|
.dc-table-group .dc-table-column._3{ |
|
visibility: hidden; |
|
background-color: transparent; |
|
} |
|
|
|
.dc-table-group .dc-table-column._4{ |
|
background-color: transparent; |
|
} |
|
.dc-table-group .dc-table-column._5{ |
|
background-color: transparent; |
|
} |
|
|
|
.h-scroll-1 { |
|
height: 100vh; /* %-height of the viewport */ |
|
position: absolute; top: 0px; left: 110px; z-index: -20; |
|
overflow-y: scroll; |
|
z-index:1; |
|
} |
|
.h-scroll-2 { |
|
height: 60vh; /* %-height of the viewport */ |
|
position: absolute; top: 390px; left: 120px; |
|
background-color: transparent; |
|
overflow-y: scroll; |
|
width: 955px ; |
|
margin-left: auto; |
|
margin-right: auto ; |
|
z-index:50; |
|
} |
|
|
|
tr { |
|
border-bottom: 1px solid #5ACDE5;; |
|
border-bottom-width: 1px; |
|
border-bottom-style: solid; |
|
border-bottom-color: #5ACDE5;; |
|
} |
|
|
|
hr { |
|
display: block; |
|
color: white; |
|
margin-top: 0.5em; |
|
margin-bottom: 0.5em; |
|
margin-left: auto; |
|
margin-right: auto; |
|
border-style: inset; |
|
border-width: 1px; |
|
} |
|
|
|
</style> |
|
<body> |
|
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> |
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script> |
|
<script src="https://github.com/mbostock/d3/tree/master/lib/colorbrewer/colorbrewer.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-geo-projection/0.2.16/d3.geo.projection.min.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script> |
|
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js'></script> |
|
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.0-dev/dc.js'></script> |
|
|
|
<script> |
|
|
|
$(document).ready(function () { |
|
|
|
d3.json("world3.json", function (world_data) { |
|
d3.csv("test7.csv", function (pcorps_data) { |
|
|
|
var width = 1000, |
|
height = 600; |
|
|
|
var smallCol = []; |
|
var medCol = []; |
|
var lrgCol = []; |
|
var grdCol = []; |
|
pcorps_data.forEach(function (d) { |
|
d.volunteers = +d.volunteers; |
|
d.cno = +d.cno; |
|
d.state_id = +d.state_id; |
|
if (d.category == "small") { |
|
smallCol.push({ "nameloc": d.nameloc,"state_id": d.state_id,"volunteers": d.volunteers })}; |
|
if (d.category == "medium") { |
|
medCol.push({ "nameloc": d.nameloc,"state_id": d.state_id,"volunteers": d.volunteers })}; |
|
if (d.category == "large") { |
|
lrgCol.push({ "nameloc": d.nameloc,"state_id": d.state_id,"volunteers": d.volunteers })}; |
|
if (d.category == "graduate") { |
|
grdCol.push({ "nameloc": d.nameloc,"state_id": d.state_id,"volunteers": d.volunteers })}; |
|
}); |
|
|
|
console.log("smallcol",smallCol); |
|
var smlcolxf = crossfilter(smallCol); |
|
var smlColDimension = smlcolxf.dimension(function(d) {return d.state_id;}); |
|
var smlColSumGroup = smlColDimension.group().reduceSum(function(d) {return +d.volunteers;}); |
|
|
|
var sortByCnt3 = smallCol.sort(function (a, b) { return Math.ceil(+a.volunteers) < Math.ceil(+b.volunteers); }); |
|
var names = sortByCnt3.map(function (d) { return d.state_id; }); |
|
console.log("names is",names); |
|
|
|
var medcolxf = crossfilter(medCol); |
|
var medColDimension = medcolxf.dimension(function(d) {return d.state_id;}); |
|
var medColSumGroup = medColDimension.group().reduceSum(function(d) {return +d.volunteers;}); |
|
var sortByCnt4 = medCol.sort(function (a, b) { return Math.ceil(+a.volunteers) < Math.ceil(+b.volunteers); }); |
|
var names = sortByCnt4.map(function (d) { return d.state_id; }); |
|
|
|
var lrgcolxf = crossfilter(lrgCol); |
|
var lrgColDimension = lrgcolxf.dimension(function(d) {return d.state_id;}); |
|
var lrgColSumGroup = lrgColDimension.group().reduceSum(function(d) {return +d.volunteers;}); |
|
|
|
var sortByCnt5 = lrgCol.sort(function (a, b) { return Math.ceil(+a.volunteers) < Math.ceil(+b.volunteers); }); |
|
var names = sortByCnt5.map(function (d) { return d.state_id; }); |
|
|
|
var grdcolxf = crossfilter(grdCol); |
|
var grdColDimension = grdcolxf.dimension(function(d) {return d.state_id;}); |
|
var grdColSumGroup = grdColDimension.group().reduceSum(function(d) {return +d.volunteers;}); |
|
|
|
var sortByCnt6 = grdCol.sort(function (a, b) { return Math.ceil(+a.volunteers) < Math.ceil(+b.volunteers); }); |
|
var names = sortByCnt6.map(function (d) { return d.state_id; }); |
|
|
|
var ndx = crossfilter(pcorps_data); |
|
console.log("ndx",ndx); |
|
|
|
var colDimension = ndx.dimension(function(d) {return d.state_id;}); |
|
var colsumGroup = colDimension.group().reduceSum(function(d) {return +d.volunteers;}); |
|
|
|
var sortByCnt = pcorps_data.sort(function (a, b) { return Math.ceil(+a.volunteers) < Math.ceil(+b.volunteers); }); |
|
|
|
console.log("sortbyCnt",sortByCnt); |
|
|
|
var names = sortByCnt.map(function (d) { return d.state_id; }); |
|
console.log("colDimension",colDimension.top(Infinity)); |
|
console.log("colsumgroup",colsumGroup.top(Infinity)); |
|
|
|
|
|
var volunteersbyCountryDim = ndx.dimension(function (d) { return +d.cno}); |
|
|
|
var volunteersbyCountryGroup = volunteersbyCountryDim.group(); |
|
// console.log("volunteersByCountry",volunteersbyCountryDim); |
|
|
|
var namesDimension = ndx.dimension(function (d) { return d.nameloc}); |
|
//console.log("namesDimension",namesDimension.top(Infinity)); |
|
var filternamesDimension = namesDimension.filter("University of Florida"); |
|
var filternamesDimensionexact = namesDimension.filterExact("University of Florida"); |
|
console.log ("filter output", filternamesDimension); |
|
console.log ("filter exactoutput", filternamesDimensionexact.top(Infinity)); |
|
console.log ("filter exactoutput stateid", filternamesDimensionexact.top(Infinity)[0].state_id); |
|
|
|
var namesDimensionGroup = namesDimension.group(); |
|
|
|
var namesDimensionGroup = namesDimension.group().reduce( |
|
//add |
|
function(p,v){ |
|
++p.count; |
|
p.volunteers_sum += v.volunteers_count; |
|
p.volunteers_avg = p.volunteers_sum / p.count; |
|
return p; |
|
}, |
|
//remove |
|
function(p,v){ |
|
--p.count; |
|
p.volunteers_sum -= v.proposal_count; |
|
p.volunteers_avg = p.volunteers_sum / p.count; |
|
return p; |
|
}, |
|
//init |
|
function(p,v){ |
|
return {count:0, volunteers_sum: 0, volunteers_avg: 0, }; |
|
} |
|
); |
|
|
|
|
|
var volunteersdim = ndx.dimension(function (d) { return +d.volunteers;}); |
|
console.log('volunteersdim',volunteersdim); |
|
var volunteersdimGroup = volunteersdim.group(); |
|
var volunteerstotal = volunteersdim.groupAll().reduceSum(function(d) { return +d.volunteers;}).value(); |
|
|
|
console.log('total volunteers',volunteerstotal); |
|
|
|
var states = ndx.dimension(function (d) { |
|
return d["State"]; |
|
}); |
|
console.log("states",states); |
|
|
|
var stateVolunteerSum = states.group().reduceSum(function (d) { |
|
return d["volunteers"]; |
|
}); |
|
|
|
var countries = ndx.dimension(function (d) { |
|
|
|
return d["cname"]; |
|
}); |
|
console.log("countriesdim", countries); |
|
var countriesVolunteerSum = countries.group().reduceSum(function (d) { |
|
return +d["cno"]; |
|
}); |
|
|
|
var allVolunteers = volunteersdim.top(Infinity); //sorts descending all volunteers |
|
console.log('allVolunteers', allVolunteers); |
|
|
|
var volunteerstotal = volunteersdim.groupAll().reduceSum(function(d) { return +d.volunteers;}).value(); |
|
|
|
var stateDim = ndx.dimension(function (d) { return +d.state_id;}); |
|
var volunteersByStateGroup = stateDim.group().reduceSum(function(d) { return +d.volunteers;}); |
|
|
|
var categoriesdim = ndx.dimension(function (d) { return d.category;}); |
|
console.log('category',categoriesdim); |
|
var volunteersByCat = categoriesdim.groupAll().reduceSum(function(d) { return +d.volunteers;}).value(); |
|
|
|
|
|
volunteersTop4 = volunteersdim.top(4); |
|
console.log('top 4 the_volunteers',volunteersTop4); // |
|
|
|
var volunteersBot4 = volunteersdim.bottom(4); |
|
|
|
volunteersdim.filterAll(); //clears out |
|
var large_uni_filter = allVolunteers.filter(function(d) { if (d.category === "large") {return d.category;} }); |
|
|
|
var small_uni_filter = allVolunteers.filter(function(d) { if (d.category === "small") {return d.category;} }); |
|
|
|
var grad_uni_filter = allVolunteers.filter(function(d) { if (d.category === "graduate") {return d.category;} }); |
|
|
|
$('.dropdown-menu li').click(function(e){ |
|
reset_filter(); |
|
chart5.filterAll(); |
|
chart4.filterAll(); |
|
chart3.filterAll(); |
|
e.preventDefault(); |
|
console.log("e", e); |
|
var selected = $(this).text(); //the college name is selected |
|
var ddname = namesDimension.filterExact(selected); |
|
console.log ("filter exactoutput", ddname.top(Infinity)); |
|
console.log ("filter exactoutput stateid", ddname.top(Infinity)[0].state_id); |
|
console.log("ddname in click", ddname.top(Infinity)); |
|
var thestateid = ddname.top(Infinity)[0].state_id; |
|
chart5.filter(thestateid); |
|
chart4.filter(thestateid); |
|
chart3.filter(thestateid); |
|
console.log("selected", selected); |
|
mapChart3.on("renderlet", drawAdditionalStuffInMap(mapChart3,selected)); |
|
text_filter(namesDimension, selected); |
|
reset_filter(); |
|
text_filter(namesDimension, selected) |
|
dataTable.redraw(); |
|
}); |
|
|
|
|
|
function drawAdditionalStuffInMap(_chart, thename) { |
|
var projection = d3.geo.mercator().scale(180).translate([470,270]); |
|
var svg = _chart.svg(); |
|
svg.selectAll("g.additionalStuff").remove() |
|
var group = svg.selectAll("g.additionalStuff"); |
|
if (group.empty()) { |
|
group = svg.append("g").classed("additionalStuff", true); |
|
} |
|
|
|
var additionalNodes = group.selectAll("image").data(pcorps_data, function(d) { return d.state_id; }); |
|
_chart.dimension().top(Infinity).map(function(d) { |
|
d.location = projection([d.lon, d.lat]); |
|
console.log("name location",d.nameloc, d.location); |
|
return d; |
|
}); |
|
|
|
//white3.svg was created with Inkscape |
|
|
|
additionalNodes.enter() |
|
.append("image") |
|
.attr("xlink:href", "white3.svg") |
|
.attr("width", "20") |
|
.attr("height", "20") |
|
.attr("opacity", 1.0) |
|
.attr("x", function(d) { if(d.nameloc != thename) return projection(d.lon[1]).splice(0,1); |
|
|
|
console.log("x", projection(d.lon[1]).splice(0,1)); |
|
}) |
|
.attr("y", function(d) { if(d.nameloc != thename) return projection(d.lat).splice(1,1); |
|
console.log("y", projection(d.lon[1]).splice(0,1)); |
|
}) |
|
.attr("transform", function(d){ |
|
if ( d.nameloc == thename){ |
|
return "translate(" + d.location[0] + "," + d.location[1] + ")"; } |
|
}) |
|
.attr("opacity", function (d) { |
|
if ( d.nameloc != thename) { return 0.0;} }) |
|
; |
|
} |
|
|
|
function text_filter(dim,q){ |
|
dataTable.filterAll(); |
|
chart3.filterAll(); |
|
var re = new RegExp(q,"i"); |
|
if (q != '') { |
|
dim.filter(function(d) { |
|
console.log("inside textfilter d", d); |
|
if (d.search(re) == d) |
|
console.log(" d:",d); |
|
return 0 == d.search(re); |
|
}); |
|
} else { |
|
dim.filterAll(); |
|
} |
|
dc.redrawAll(); |
|
console.log("textfilter run"); |
|
} |
|
|
|
function reset_filter (){ |
|
namesDimension.filterAll(); |
|
} |
|
|
|
//beginning of charts |
|
|
|
var mapChart3 = dc.geoChoroplethChart("#world-chart3"); |
|
mapChart3.width(950) |
|
.height(500) |
|
.dimension(countries) |
|
.group(countriesVolunteerSum) |
|
.colors(d3.scale.linear().domain([0,10]).range(["#A3E5E8","navy"])) // |
|
.overlayGeoJson(world_data["features"], "name", function (d) { |
|
(d?d:0) |
|
var world_id = d.id; |
|
//return d.properties.name; |
|
return (d.properties.name ? d.properties.name: 0); |
|
}) |
|
.projection(d3.geo.mercator().scale(180).translate([470,270])) |
|
.title(function (p) { |
|
return p.key + "\nVolunteers: " + (p.value ? p.value : 0) ; |
|
}); |
|
|
|
mapChart3.render(); |
|
|
|
|
|
var dataTable = dc.dataTable("#dc-table-graph"); |
|
dataTable.width(950).height(800) |
|
.dimension(volunteersbyCountryDim) |
|
.group(function(d) { return " " |
|
}) |
|
.size(10) |
|
.columns([ |
|
function(d) { return d.nameloc; }, |
|
//function(d) { return +d.lat; }, |
|
function(d) { return d.category; }, |
|
//function(d) { return +d.lat; }, |
|
function(d) { return d.state_id; }, //this is the rank |
|
function(d) { return +d.volunteers; } |
|
]) |
|
.sortBy(function(d){ return +d.volunteers; }) |
|
if (dataTable.order() == d3.ascending) dataTable.order(d3.descending) ; |
|
dataTable.on("renderlet",(function(dataTable){ |
|
// dataTable.selectAll('td.dc-table-column').style('fill', "rgba(0,0,0,0.0)") |
|
dataTable.selectAll('td.dc-table-column._1').style('visibility', "hidden") |
|
dataTable.selectAll('td.dc-table-column._3').style('visibility', "hidden")})); |
|
//.on('renderlet', function (dataTable) { |
|
// each time table is rendered remove nasty extra row dc.js insists on adding |
|
//dataTable.select('tr.dc-table-group').remove(); |
|
//d}); |
|
|
|
dataTable.render(); |
|
|
|
|
|
//dataTable.on('renderlet', function (dataTable) { |
|
dataTable.on('renderlet', function () { |
|
// each time table is rendered remove extra row dc.js insists on adding |
|
dataTable.select('tr.dc-table-group').remove(); |
|
//dataTable.selectAll('tr.dc-table-group').remove(); |
|
}); |
|
|
|
function AddXLabel(chartToUpdate, displayText) |
|
{ |
|
chartToUpdate.svg() |
|
.append("text") |
|
.attr("class", "x-axis-label") |
|
.attr("text-anchor", "end") |
|
.attr("x", chartToUpdate.width()/1.0) |
|
.attr("y", chartToUpdate.height()-144) |
|
.text(displayText); |
|
} |
|
|
|
var chart3 = dc.barChart("#small-chart"); |
|
chart3 |
|
.margins({top: 20, right: 10, bottom: 17, left: 20}) |
|
.width(195) |
|
.height(155) |
|
.x(d3.scale.ordinal()) |
|
.xUnits(dc.units.ordinal) |
|
.y(d3.scale.linear().domain([0,80])) |
|
.gap(15) |
|
.brushOn(false) |
|
.dimension(smlColDimension) |
|
.group(smlColSumGroup) |
|
.renderLabel(true) |
|
.barPadding(0.5) |
|
.outerPadding(0.15) |
|
.title(function (p) { |
|
//console.log("p",p.value,p.key); |
|
if (p.value == 'Nan') { p.value = 0; p.key = 0;} |
|
else { |
|
return p.key + ":" + p.value + ' Volunteers'; |
|
} |
|
}); |
|
|
|
chart3.render(); |
|
chart3.on('renderlet', function(chart) { |
|
chart.selectAll('rect.bar') |
|
.on('mouseover.foo', function(d) { |
|
chart5.filterAll(); |
|
chart4.filterAll(); |
|
chart3.filterAll(); |
|
reset_filter(); |
|
var dname = smlColDimension.filter(d.data.key); |
|
var location = dname.top(Infinity)[0].nameloc; |
|
text_filter(namesDimension,location); |
|
dataTable.redraw(); |
|
mapChart3.on("renderlet", drawAdditionalStuffInMap(mapChart3,location)); |
|
}) |
|
.on('mouseout.chart', function(d) { |
|
reset_filter(); |
|
}); |
|
}); |
|
|
|
var chart4 = dc.barChart("#medium-chart"); |
|
chart4 |
|
.margins({top: 20, right: 10, bottom: 17, left: 20}) |
|
.width(195) |
|
.height(155) |
|
.x(d3.scale.ordinal()) |
|
.xUnits(dc.units.ordinal) |
|
.y(d3.scale.linear().domain([0,80])) |
|
.gap(15) |
|
.brushOn(false) |
|
.dimension(medColDimension) |
|
.group(medColSumGroup) |
|
.barPadding(0.5) |
|
.outerPadding(0.15) |
|
.renderLabel(true) |
|
.title(function (p) { |
|
if (p.value == 'Nan') { p.value = 0; p.key = 0;} |
|
else { |
|
return p.key + ":" + p.value + ' Volunteers'; |
|
} |
|
}); |
|
|
|
chart4.render(); |
|
|
|
chart4.on('renderlet', function(chart) { |
|
chart.selectAll('rect.bar') |
|
.on('mouseover.chart', function(d) { |
|
chart5.filterAll(); |
|
chart4.filterAll(); |
|
chart3.filterAll(); |
|
reset_filter(); |
|
var thestateid = d.data.key; |
|
var dname = medColDimension.filter(d.data.key); |
|
var location = dname.top(Infinity)[0].nameloc; |
|
console.log("dname",dname.top(Infinity)[0].nameloc); |
|
console.log("location",location); |
|
text_filter(namesDimension,location); |
|
dataTable.redraw(); |
|
mapChart3.on("renderlet", drawAdditionalStuffInMap(mapChart3,location)); |
|
}) |
|
.on('mouseout.foo', function(d) { |
|
reset_filter(); |
|
}); |
|
}); |
|
|
|
|
|
var chart5 = dc.barChart("#large-chart"); |
|
chart5 |
|
.margins({top: 20, right: 10, bottom: 17, left: 20}) |
|
.width(195) |
|
.height(155) |
|
.x(d3.scale.ordinal()) |
|
.xUnits(dc.units.ordinal) |
|
.y(d3.scale.linear().domain([0,80])) |
|
.gap(2) |
|
.brushOn(false) |
|
.dimension(lrgColDimension) |
|
.group(lrgColSumGroup) |
|
.renderLabel(true) |
|
.barPadding(0.5) |
|
.outerPadding(0.15) |
|
.title(function (p) { |
|
if (p.value == 'Nan') { p.value = 0; p.key = 0;} |
|
else { |
|
return p.key + ":" + p.value + ' Volunteers'; |
|
} |
|
}); |
|
chart5.render(); |
|
|
|
chart5.on('renderlet', function(chart) { |
|
chart.selectAll('rect.bar') |
|
.on('mouseover.chart', function(d) { |
|
reset_filter(); |
|
var thestateid = d.data.key; |
|
var dname = lrgColDimension.filter(d.data.key); |
|
var location = dname.top(Infinity)[0].nameloc; |
|
console.log("dname",dname.top(Infinity)[0].nameloc); |
|
console.log("location",location); |
|
text_filter(namesDimension,location); |
|
dataTable.redraw(); |
|
mapChart3.on("renderlet", drawAdditionalStuffInMap(mapChart3,location)); |
|
}) |
|
.on('mouseout.chart', function(d) { |
|
reset_filter(); |
|
}); |
|
}); |
|
|
|
|
|
dc.renderAll(); |
|
|
|
AddXLabel(chart3, "Small(<5k undergraduates)"); |
|
AddXLabel(chart4, "Medium(5-15k undergraduates)"); |
|
AddXLabel(chart5, "Large(>15k undergraduates)"); |
|
|
|
}); //csv |
|
}); //world json |
|
}); //jquery |
|
|
|
|
|
</script> |
|
</body> |
|
<div class='container' id='main-container' style="background-color: #5ACDE5;"> |
|
<div class='content'> |
|
<div class='container'> |
|
<div class='col-xs-12'> |
|
<center > |
|
<div class="dropdown "> |
|
<p class="selectext"> |
|
<img src="white3.svg">Select a College</p><a data-target="#" href="index.html" data-toggle="dropdown" class="dropdown-toggle"><b class="caret"></b></a> |
|
<ul class="dropdown-menu" id="btnSubmit" select-id="CollegeName" name="CollegeName"> |
|
<li><a href="#"><option value="University of Washington" selected="selected">University of Washington</option></a></li> |
|
<li><a href="#"><option value="University of Florida">University of Florida</option></a></li> |
|
<li><a href="#"><option value="American University">American University</option></a></li> |
|
<li><a href="#"><option value="University of Wisconsin at Madison">University of Wisconsin at Madison</option></a></li> |
|
<li><a href="#"><option value="The Ohio State University">The Ohio State University</option></a></li> |
|
<li><a href="#"><option value="Western Washington University">Western Washington University</option></a></li> |
|
<li><a href="#"><option value="University of Virginia">University of Virginia</option></a></li></a></li> |
|
<li><a href="#"><option value="George Washington University">George Washington University</option></a></li> |
|
<li><a href="#"><option value="Cornell University">Cornell University</option></a></li> |
|
<li><a href="#"><option value="Gonzaga University">Gonzaga University</option></a></li> |
|
<li><a href="#"><option value="Tulane University">Tulane University</option></a></li> |
|
<li><a href="#"><option value="University of Denver">University of Denver</option></a></li> |
|
<li><a href="#"><option value="Carleton College">Carleton College</option></a></li> |
|
<li><a href="#"><option value="Middlebury College">Middlebury College</option></a></li> |
|
<li><a href="#"><option value="University of Portland-Seattle">University of Portland-Seattle</option></a></li> |
|
<li><a href="#"><option value="Macalester College">Macalester College</option></a></li> |
|
<li><a href="#"><option value="University of Minnesota Twin Cities">University of Minnesota Twin Cities</option></a></li> |
|
<li><a href="#"><option value="Portland State University">Portland State University</option></a></li> |
|
<li><a href="#"><option value="University of Michigan">University of Michigan</option></a></li> |
|
<li><a href="#"><option value="Middlebury Institute of Int'l Studies at Monterey">Middlebury Institute of Int'l Studies at Monterey</option></a></li> |
|
</ul> |
|
</div></center> |
|
<div class='row-fluid'> |
|
<div id="dc-chart-container2"></div> |
|
<div class='container' id='main-container'> |
|
<div class='col-xs-12 h-scroll-1' id='world-chart3'> |
|
</div> |
|
<div class='row-fluid'> |
|
|
|
<div class="clearfix"></div> |
|
<div class='col-xs-12 h-scroll-2 table-graph' style='font: 16x bold sans-serif;'> |
|
|
|
<table class="table table-hover dc-data-table" id='dc-table-graph' style="white-space:nowrap;"> |
|
|
|
<div class='row-fluid'> |
|
<div class="clearfix"></div> |
|
<thead> |
|
<tr class='header 'col-xs-12 '> |
|
<th>University</th> |
|
<!-- <th style='visibility: hidden;'>lat</th> --> |
|
<th>Size</th> |
|
<!-- <th style='visibility: hidden;'>lon</th> --> |
|
<th>Rank</th> |
|
<th>Volunteers</th> |
|
</tr> |
|
</thead> |
|
<div class='row-fluid' id="imagehere"> |
|
<img src="white3.svg" alt=""/></div> |
|
</table> |
|
<hr> |
|
<div class='row-fluid'> |
|
<div class='col-xs-3' style="width: 300px;" id="large-chart"></div> |
|
<div style="width: 60px;"></div> |
|
<div class='col-xs-3' style="width: 300px;" id="medium-chart"></div> |
|
<div style="width: 60px;"></div> |
|
<div class='col-xs-3' style="width: 300px;" id="small-chart" title="SmallCollege"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</body> |
|
</html> |
