<!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;
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;
}
}
var dataset = {
nodes: [
{ name: "Washington" },
{ name: "Oregon" },
{ name: "California" },
{ name: "New Mexico" },
{ name: "Iowa" },
{ name: "Montana" },
{ name: "Missouri" },
{ name: "Texas" },
{ name: "Florida" },
{ name: "Indiana" }
],
edges: [
{ source: 0, target: 1 },
{ source: 0, target: 2 },
{ source: 0, target: 3 },
{ source: 0, target: 4 },
{ source: 1, target: 5 },
{ source: 2, target: 5 },
{ source: 2, target: 5 },
{ source: 3, target: 4 },
{ source: 5, target: 8 },
{ source: 5, target: 9 },
{ source: 6, target: 7 },
{ source: 7, target: 8 },
{ source: 8, target: 9 }
]
};
//Compares city names alphabetically(using <)
var ar = dataset.nodes.sort(function(a, b)
{
var nA = a.name.toLowerCase();
var nB = b.name.toLowerCase();
if(nA < nB)
return -1;
else if(nA > nB)
return 1;
return 0;
});
var force = d3.layout.force()
.nodes(dataset.nodes)
.links(dataset.edges)
.size([width, height])
.linkDistance([200])
.charge([-100])
.start();
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); }));
//
// }
var colors = d3.scale.category10();
//Create edges as lines
var edges = svg.selectAll("line")
.data(dataset.edges)
.enter()
.append("line")
.style("stroke", "#ccc")
.style("stroke-width", 1);
//Create nodes as circles
var nodes = svg.selectAll("circle")
.data(dataset.nodes)
.enter()
.append("circle")
.attr("r", 10)
.style("fill", function(d, i) {
return colors(i);
})
//.call(force.drag);
//Every time the simulation "ticks", this will be called
force.on("tick", function() {
edges.attr("x1", function(d)
{
return d.source.x;
}
)
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
nodes.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
}
</script>