<!DOCTYPE html>
<meta charset="utf-8">
<style>
.states {
stroke: #000;
fill-opacity: .7;
}
.symbol {
fill: steelblue;
fill-opacity: .8;
stroke: #fff;
}
#tooltip-container {
position: absolute;
background-color: #fff;
color: #000;
padding: 10px;
border: 1px solid;
display: none;
}
.tooltip_key {
font-weight: bold;
}
.tooltip_value {
margin-left: 20px;
float: right;
}
</style>
<body>
<a href="a3.html"><h2>Back to main page.</h2></a>
<div id="tooltip-container"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script>
var width = 960,
height = 500;
var radius = d3.scale.sqrt()
.domain([0, 1e6])
.range([0, 10]);
var path = d3.geo.path();
var color = d3.scale.category20();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var visits_map = {},
states_ids = {},
states_names = {};
queue()
.defer(d3.json, "us.json")
//.defer(d3.json, "us-state-centroids.json")
.defer(d3.json, "us-states.json")
.defer(d3.json, "trips.json")
.await(ready);
function ready(error, us, us_states, trips) {
var countries = topojson.feature(us, us.objects.states).features,
neighbors = topojson.neighbors(us.objects.states.geometries),
state_id_arr = us_states.features,
trips_data = trips.results;
//ten cities where candidates made the most stops
var most_stops={};
var j=0;
for(var i=0;i<trips_data.length;i++)
{
if(trips_data[i].stops.length>16)
{
most_stops[j]=trips_data[i];
j++;
}
}
console.log(most_stops);
for(var j=0; j< state_id_arr.length; j++){
var itm = state_id_arr[j];
states_ids[itm.properties.abbrv] = parseInt(itm.id);
states_names[parseInt(itm.id)] = itm.properties.name;
}
for(var i=0; i< trips_data.length; i++){
var itm = trips_data[i],
s_id = states_ids[itm.state],
cunt = visits_map[s_id],
stops = itm.stops;
if(stops){
stop_count = stops.length;
}else{
stop_count = 0;
}
if(cunt){
visits_map[s_id] = cunt+stop_count;
}else{
visits_map[s_id] = stop_count;
}
}
svg.selectAll("states")
.data(countries)
.enter().insert("path", ".graticule")
.attr("class", "states")
.attr("d", path)
.style("fill", function(d, i) {
return color(d.color = d3.max(neighbors[i], function(n) {
return countries[n].color; }) + 1 | 0);
})
.on('mouseover', function(d, i) {
//var currentState = this;
//d3.select(this).style('fill-opacity', 1);
// console.log(JSON.stringify(d));
var html = "";
if(visits_map[d.id] == undefined)
visits_map[d.id] = 0;
html += "<div class=\"tooltip_kv\">";
html += "<span class=\"tooltip_key\">";
html += states_names[d.id];
html += "</span>";
html += "<span class=\"tooltip_value\">";
html += visits_map[d.id]
html += "";
html += "</span>";
html += "</div>";
$("#tooltip-container").html(html);
$(this).attr("fill-opacity", "0.8");
$("#tooltip-container").show();
var coordinates = d3.mouse(this);
var map_width = $('.states')[0].getBoundingClientRect().width;
if (d3.event.layerX < map_width / 2) {
d3.select("#tooltip-container")
.style("top", (d3.event.layerY + 15) + "px")
.style("left", (d3.event.layerX + 15) + "px");
} else {
var tooltip_width = $("#tooltip-container").width();
d3.select("#tooltip-container")
.style("top", (d3.event.layerY + 15) + "px")
.style("left", (d3.event.layerX - tooltip_width - 30) + "px");
}
// var thoseStates = d3
// .selectAll('path')[0]
// .filter(function(state) {
// return state !== currentState;
// });
// d3.selectAll(thoseStates)
// .style({
// 'fill-opacity':.5
// });
// })
})
.on('mouseout', function(d, i) {
/*d3.selectAll('path')
.style({
'fill-opacity':.7
});*/
$(this).attr("fill-opacity", "1.0");
$("#tooltip-container").hide();
});
// var paths = svg.append("path")
// .attr("class", "states")
// .datum(topojson.feature(us, us.objects.states))
// .attr("d", path)
// .style("fill", function(d, i) { return color(d.color = d3.max(neighbors[i], function(n) { return countries[n].color; }) + 1 | 0); })
// .on('mouseover', function(d, i) {
//
// var currentState = this;
// var thoseStates = d3
// .selectAll('path')[0]
// .filter(function(state) {
// return state !== currentState;
// });
//
// d3.selectAll(thoseStates)
// .transition()
// .duration(300)
// .style({
// 'stroke-opacity': 1,
// 'stroke': '#f00'
// });
//
// });
// svg.selectAll(".symbol")
// .data(centroid.features.sort(function(a, b) { return b.properties.population - a.properties.population; }))
// .enter().append("path")
// .attr("class", "symbol")
// .attr("d", path.pointRadius(function(d) { return radius(d.properties.population); }));
//
// }
}
</script>