|
|
|
// move elements to front |
|
// http://tributary.io/tributary/3922684 |
|
d3.selection.prototype.moveToFront = function() { |
|
return this.each(function(){ |
|
this.parentNode.appendChild(this); |
|
}); |
|
}; |
|
|
|
var width = 960, |
|
height = 500, |
|
active = d3.select(null); //zoom |
|
|
|
// set projection and map position |
|
// tweek these settings for a nice display |
|
var projection = d3.geo.albers() // popular alternative is geo.mercator() |
|
.center([0, 40.0]) //[30, 45.0] |
|
.scale(900) // 275 |
|
.rotate([97.8717, 0]) |
|
.translate([width / 2, height / 2]) |
|
.precision(.1); |
|
|
|
var path = d3.geo.path() |
|
.projection(projection); |
|
|
|
var svg = d3.select("body").append("svg") |
|
.attr("width", width) |
|
.attr("height", height) |
|
.attr("class", "chart"); |
|
|
|
var graticule = d3.geo.graticule(); |
|
|
|
var dataset; |
|
|
|
var destination = [-75.1667 , 39.9500]; // Philly lat lon |
|
|
|
var map = svg.append("g") |
|
.attr("class", "map"); |
|
|
|
var |
|
vizGroup = svg.append("g").attr("class", "viz"), |
|
countryGroup = map.append("g"), |
|
stateGroup = map.append("g") |
|
; |
|
|
|
// plot world, states, and people data |
|
queue() |
|
.defer(d3.json, "world-50m.json") |
|
.defer(d3.json, "us.json") |
|
.defer(d3.csv, "people.csv") |
|
.await(visualize); |
|
|
|
function visualize(error, world, us, people){ |
|
if (error) return console.log(error); |
|
|
|
dataset = people; |
|
|
|
// draw backgound to for reset function |
|
map.append("rect") |
|
.attr("class", "background") |
|
.attr("width", width) |
|
.attr("height", height) |
|
.on("click", reset); |
|
|
|
// draw graticules |
|
map.append("path") |
|
.datum(graticule) |
|
.attr("class", "graticule") |
|
.attr("d", path); |
|
|
|
// draw world |
|
countryGroup |
|
.selectAll("path") |
|
.data(topojson.feature(world, world.objects.countries).features) |
|
.enter().insert("path", ".graticule") |
|
.attr("class", "boundary") |
|
.attr("d", path); |
|
|
|
// draw states |
|
stateGroup |
|
.selectAll("path") |
|
.data(topojson.feature(us, us.objects.states).features) |
|
.enter().append("path") |
|
// .attr("d", path) |
|
.attr("class", "state-boundary") |
|
.attr("d", path); |
|
|
|
// create a group for each person record |
|
var groups = vizGroup.selectAll("g") |
|
.data(dataset) |
|
.enter() |
|
.append("g") |
|
.attr("class", function (d) { |
|
return d.name; |
|
}) |
|
.on("mouseover", function() { |
|
d3.select(this).attr("class", "highlight"); |
|
// move to front |
|
var sel = d3.select(this); |
|
sel.moveToFront(); |
|
}) |
|
.on("mouseout", function (d) { |
|
d3.select(this).attr("class", function () { |
|
return d.name;}); |
|
}) |
|
; |
|
// draw arcs from each record origin to destination |
|
groups.append("path") |
|
.attr("class", "arc") |
|
.attr("d", function (d) { |
|
var coordDepart = [ d.longitude, d.latitude ]; |
|
var coordArrive = destination; |
|
return path({ |
|
type: "LineString", |
|
coordinates: [coordDepart,coordArrive] |
|
}); |
|
}) |
|
.call(d3.helper.tooltip(function(d, i){ |
|
return "<IMG SRC=" + "'" +d.avatar+ "'" + ">"+ |
|
"<div class='name'>" + d.name + "</div>"+ |
|
"<div class = 'org'>" + d.org + "</div>"+ |
|
"<div class = 'place'>" + d.place + "</div>" |
|
} |
|
)); |
|
// draw circles for each record origin |
|
groups.append("circle") |
|
.attr("cx", function(d) { |
|
return projection([d.longitude, d.latitude])[0]; |
|
}) |
|
.attr("cy", function(d) { |
|
return projection([d.longitude, d.latitude])[1]; |
|
}) |
|
.attr("r", function(d) { return 4 + (d.count * 2); }) |
|
.attr("class", "origin") |
|
.call(d3.helper.tooltip(function(d, i){ |
|
return "<IMG SRC=" + "'" +d.avatar+ "'" + ">"+ |
|
"<div class='name'>" + d.name + "</div>"+ |
|
"<div class = 'org'>" + d.org + "</div>"+ |
|
"<div class = 'place'>" + d.place + "</div>" |
|
} |
|
)) |
|
.on("click", clicked); // zoom |
|
|
|
function clicked(d) { |
|
if (active.node() === this) return reset(); |
|
active.classed("active", false); |
|
active = d3.select(this).classed("active", true); |
|
|
|
var |
|
cx = projection([d.longitude, d.latitude])[0], |
|
cy = projection([d.longitude, d.latitude])[1], |
|
scale = 3.75, |
|
translate = [width / 2 - scale * cx, height / 2 - scale * cy]; |
|
|
|
// TODO how to link this to main.css? |
|
d3.selectAll(".chart circle").transition() |
|
.duration(1000) //750 |
|
.style("stroke-width", 1 / scale *1.5 + "px") // *1.5 is just a fudge |
|
.attr("r", 6 / scale *1.5 ) |
|
.attr("transform", "translate(" + translate + ")scale(" + scale + ")"); |
|
|
|
d3.selectAll(".chart path").transition() |
|
.duration(1000) //750 |
|
.style("stroke-width", 2 / scale *1.5 + "px") // *1.5 is just a fudge |
|
.attr("transform", "translate(" + translate + ")scale(" + scale + ")"); |
|
} |
|
|
|
// TODO how to link this to main.css? |
|
function reset() { |
|
active.classed("active", false); |
|
active = d3.select(null); |
|
|
|
d3.selectAll(".chart path, circle").transition() |
|
.duration(1000) //750 |
|
.style("stroke-width", "1.5px") // this is a fudge |
|
.attr("r", 6 ) |
|
.attr("transform", ""); |
|
} |
|
|
|
// backgound for sidebar |
|
groups.append("rect") |
|
.attr("class", "side-menu") |
|
.attr("y", function(d, i) { return (0 + (20 * i)); }) |
|
.attr("x", "0") |
|
.attr("width", "150") |
|
.attr("height", "20") |
|
.call(d3.helper.tooltip(function(d, i){ |
|
return "<IMG SRC=" + "'" +d.avatar+ "'" + ">" |
|
+"<div class='name'>" + d.name + "</div>" |
|
+"<div class = 'org'>" + d.org + "</div>" |
|
} |
|
)) |
|
.on("click", clicked); |
|
; |
|
|
|
// add sidebar list of names for each person record |
|
groups.append("text") |
|
.attr("class", "speaker-list") |
|
.attr("y", function(d, i) { return (15 + (20 * i)); }) |
|
.attr("x", "10") |
|
.text(function(d) {return d.name;}) |
|
.call(d3.helper.tooltip(function(d, i){ |
|
return "<IMG SRC=" + "'" +d.avatar+ "'" + ">"+ |
|
"<div class='name'>" + d.name + "</div>"+ |
|
"<div class = 'org'>" + d.org + "</div>"+ |
|
"<div class = 'place'>" + d.place + "</div>" |
|
} |
|
)) |
|
.on("click", clicked); |
|
; |
|
|
|
}; |
|
|
|
d3.select(self.frameElement).style("height", height + "px"); |
|
|
|
// universal zoom and pan listener, disabled |
|
// http://bl.ocks.org/d3noob/5189284 |
|
// var zoom = d3.behavior.zoom() |
|
// .on("zoom",function() { |
|
// d3.selectAll(".chart path, circle").attr("transform","translate("+ |
|
// d3.event.translate.join(",")+")scale("+d3.event.scale+")"); |
|
// d3.selectAll(".chart path, circle").selectAll("path") |
|
// .attr("d", path.projection(projection)); |
|
// }); |
|
// svg.call(zoom) |
