Skip to content

Instantly share code, notes, and snippets.

@qaisarmehmood
Created May 26, 2017 13:45
Show Gist options
  • Save qaisarmehmood/4a8b618753d845694774aeb7b62a71ff to your computer and use it in GitHub Desktop.
Save qaisarmehmood/4a8b618753d845694774aeb7b62a71ff to your computer and use it in GitHub Desktop.
My Final project
<!DOCTYPE html>
<meta charset='utf-8'>
<title>Class Project</title>
<style>
body {
margin: 0;
background-color: #eee;
}
.info {
position: absolute;
top: 50px;
left: 50px;
}
</style>
<div class="info"></div>
<svg width="960" height="500" fill="none" stroke="#000" stroke-linejoin="round" stroke-linecap="round">
<defs>
<filter id="blur">
<feGaussianBlur stdDeviation="5"></feGaussianBlur>
</filter>
</defs>
</svg>
<div class="info" style="position: absolute; top: 50px; left: 50px"></div> <!-- NEW -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script src="//d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script>
// add title
var svg = d3.select("svg");
var layer1 = svg.append("g");
var path = d3.geoPath();
var width;
var text = svg.append('text')
.attr('width', width)
.attr('x', "14em" )
.attr('y', "1em")
.style('font-size', '1.5em')
.style('text-anchor', 'middle')
.text('Population of Newyork under 5 years')
.style("fill", "black")
// New York central state plane, EPSG: 2829
// (central meridian = - 76.5833..., latitute of origin = 40)
var projection = d3.geoTransverseMercator()
.rotate([76 + 35 / 60, - 40]);
var path = d3.geoPath()
.projection(projection);
var threshold = d3.scaleThreshold()
.domain([1, 2, 4, 5, 6, 8, 10 ])
.range(d3.schemeOrRd[8]);
// This demo modified slightly from https://bl.ocks.org/mbostock/4108203
var svg = d3.select("svg").append("g")
.attr('transform', 'scale(4)translate(-700, -100)');
var path = d3.geoPath();
var filename = "https://raw.githubusercontent.com/qaisarmehmood/umbcvis/master/Newyork.population%20Data.csv"
d3.queue()
.defer(d3.json,"https://unpkg.com/us-atlas@1/us/10m.json")
.defer(d3.csv, filename)
.await(ready);
addLegend();
function ready(error, us, csv) {
if (error) throw error;
console.log('here is the csv data:', csv);
var counties = topojson.feature(us, us.objects.counties).features;
// Examine 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(counties[0]);
// NEW: Create a d3.map() so we can query CSV data by "id" = FIPS code
var data = d3.map();
csv.forEach(function(d) { data.set(d.FIPS, d)})
newyork = counties.filter(function(d) { return d.id.slice(0,2) === "36"; })
svg.append("g").selectAll("path")
.data(newyork)
.enter().append ("path")
.attr("d", path)
.style("fill", function(d) { return threshold(data.get(d.id) ? data.get(d.id).Percent : null); })
// Get New York counties
// Get New York counties
//newyork = counties.filter(function(d) { return d.id.slice(0,2) === "36"; })
svg.selectAll('path.county')
.data( newyork )
.enter().append("path")
.attr("d", path)
.attr("class", "county")
.attr("stroke", "#aaa")
.attr("stroke-width", 1)
// .attr("fill", function(d) { return threshold(d.county); })
.on('mouseover', function(d, i) {
d3.select(this).attr('stroke-width', 2).raise()
console.log(d.id, data.get(d.id));
d3.select(".info").html(data.get(d.id)["County Name"] +
"<br>Percent: "
+ d3.format(",d")(data.get(d.id).Percent))
})
.on('mouseout', function(d) {
//d3.select(this).attr('fill', '#fff');
d3.select(".info").html("")
d3.select(this).attr('stroke-width', 0.5)
});
svg.append("path")
.attr("stroke-width", 0.5)
.attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })));
svg.append("path")
.attr("d", path(topojson.feature(us, us.objects.nation)));
projection.fitExtent([[10,10],[960 - 20, 500 - 20]], { type: "FeatureCollection", features: newyork });
// Drop-shadow styling (this is blurred shadow)
svg.append("use")
.attr("xlink:href", "#nation")
.attr("fill-opacity", 0.2)
.attr("filter", "url(#blur)");
// Drop-shadow styling (this is white overlay)
svg.append("use")
.attr("xlink:href", "#nation")
.attr("fill", "#fff");
}
function addLegend() {
var formatNumber = d3.format("d");
var x = d3.scalePow().exponent('.15')
.domain([1, 10])
.range([0, 300]);
var xAxis = d3.axisBottom(x)
.tickSize(13)
.tickValues(threshold.domain())
.tickFormat(formatNumber)
var g = d3.select('svg').append('g')
.attr('transform', 'translate(50, 120)')
.call(xAxis);
g.select(".domain")
.remove();
g.selectAll("rect")
.data(threshold.range().map(function(color) {
var d = threshold.invertExtent(color);
if (d[0] == null) d[0] = x.domain()[0];
if (d[1] == null) d[1] = x.domain()[1];
return d;
}))
.enter().insert("rect", ".tick")
.attr("height", 8)
.attr("x", function(d) { return x(d[0]); })
.attr("width", function(d) { return x(d[1]) - x(d[0]); })
.attr("fill", function(d) { return threshold(d[0]); });
g.append("text")
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "start")
.attr("y", -6)
.text("Percentage of under 5 in a county");
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment