xxxxxxxxxx
<meta charset='utf-8'>
<title>US Counties</title>
<svg width="1200" height="2000" fill="none" stroke="#000" stroke-linejoin="round" stroke-linecap="round"></svg>
<style>
.tooltip {
position: absolute;
visibility: visible;
background-color: #aaa;
padding: 5px;
}
/* This style is used when dragging the dot */
.active {
stroke: #000;
stroke-width: 2px;
}
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script>
var svg = d3.select("svg");
var layer1 = svg.append("g");
var layer2 = svg.append("g");
var projection = d3.geoAlbersUsa();
var path = d3.geoPath();
var info = d3.select("body").append("div")
.attr("class", "info");
var x = d3.scaleLinear()
.domain([0, 10000])
.rangeRound([650, 1000]);
var width;
var text = svg.append('text')
.attr('width', width)
.attr('x', "19em" )
.attr('y', "1em")
.style('font-size', '1.5em')
.style('text-anchor', 'middle')
.text('US Population Estimate 2016')
.style("fill", "black")
var color = d3.scaleThreshold()
.domain(d3.range(2,10).map(function(d) { return d * 1000; }))
.range(d3.schemeReds[9]);
// 3. NEW: Add a draggable circle to the map
layer1.append("g")
.attr("class", "key")
.attr("transform", "translate(0,0)");
layer1.selectAll("rect")
.data(color.range().map(function(d) {
d = color.invertExtent(d);
if (d[0] == null) d[0] = x.domain()[0];
if (d[1] == null) d[1] = x.domain()[1];
return d;
}))
.enter().append("rect")
.attr("height", 8)
.attr("x", function(d) { return x(d[0]); })
.attr("width", 100)
.attr("fill", function(d) { return color(d[0]); });
layer1.append("text")
.attr("class", "caption")
.attr("x", x.range()[0])
.attr("y", 35)
.attr("fill", "#000")
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text("Population Estimate (persons)");
layer1.call(d3.axisBottom(x)
.tickSize(13)
.tickFormat(function(x, i) { return i ? x : x ; })
.tickValues(color.domain()))
.select(".domain")
.remove();
layer2.append("circle")
.attr("class", "dc")
// .attr("cx", projection(dc)[0])
//.attr("cy", projection(dc)[1])
.attr("r", 10)
.style("fill", "yellow") // Make the dot yellow
.call(d3.drag() // Add the drag behavior
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
var filename = "https://raw.githubusercontent.com/sabeehtaqi/FINAL-PROJECT/master/PopulationData.csv";
d3.queue()
.defer(d3.json,"https://unpkg.com/us-atlas@1/us/10m.json")
.defer(d3.csv, filename)
.await(ready);
function ready(error, us, csv) {
if (error) throw error;
console.log('here is one of the csv data rows:', csv[0]);
// Get the data for one year -- reformat the string value into a number
var data = d3.map();
csv.forEach(function(d) { data.set(d.id, +d.rate2016.replace(',','')); });
console.log('here is how the data map works', data.get(27069));
var counties = topojson.feature(us, us.objects.counties).features;
// Inspect one of the county features in the developer console.
// The "id" attribute is a 5-digit GEOID (state + county).
// See: https://www.census.gov/geo/reference/geoidentifiers.html
console.log('here is a county:', counties[0]);
layer1.selectAll('path.county')
.data( counties )
.enter().append("path")
.attr("d", path)
.attr("stroke", "#aaa")
.attr("stroke-width", 0.5)
.attr("fill", function(d) { return color(data.get(d.id)); });
layer1.append("path")
.attr('class', 'county')
.attr("stroke", "#aaa")
.attr("stroke-width", 0.5)
.attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })));
layer1.append("path")
.attr("d", path(topojson.feature(us, us.objects.nation)));
}
// 2. NEW: Add an HTML <div> element that will function as the tooltip
var tooltip = d3.select('body').append('div')
.attr('class', 'tooltip')
// .text('Hello, world!')
// NEW: The following 3 functions define what happens during drag events
function dragstarted(d) {
// Highlight the circle that's being dragged
d3.select(this).classed("active", true);
// Make the tooltip visible during drag events
tooltip.style("visibility", "visible");
}
function dragged(d) {
// Reposition the circle to follow the mouse during drag
d3.select(this).attr("cx", d3.event.x).attr("cy", d3.event.y);
// Reposition the tooltip too
tooltip.style("left", (d3.event.x - 30) + "px").style("top", (d3.event.y - 50) + "px");
// Add the name of the county to the tooltip
layer1.selectAll('path.county')
.each(function(d) {tooltip.html(name); })
}
function dragended(d) {
// Eliminate the highlight when dragging ends
d3.select(this).classed("active", false);
// Hide the tooltip
tooltip.style("visibility", "hidden");
}
</script>
https://d3js.org/d3.v4.min.js
https://unpkg.com/topojson-client@3
https://d3js.org/d3-scale-chromatic.v1.min.js