Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="//d3js.org/d3-scale-chromatic.v0.3.min.js"></script>
</head>
<body>
<div id="map-container"></div>
<script>
var generateMap = function(error,nyc,counts) {
if (error) throw error;
var width = "800";
var height = "800";
//size of the container div
d3.select("#map-container")
.style("width", "400px")
.style("height", "400px");
highestCount = 0;
for(i in counts){
if (counts[i] > highestCount){
highestCount = counts[i];
}
}
var color = d3.scaleSequential(d3.interpolateRdYlGn)
.domain([highestCount,0]);
const margin = {top: 10, right: 10, bottom: 10, left: 10}
var svg = d3.select("#map-container")
.append('div')
.classed('svg-container', true)
.append('svg')
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 800 800")
.classed('svg-content-responsive', true);
//highest count below the top count
var linearDivider = 181;
svg.style('background-image', "url('bg_fw.jpg')");
var defs = svg.append("defs");
//gradient for legend
var linearGradient = defs.append("linearGradient")
.attr("id", "legend-gradient");
linearGradient
.attr("x1", "0%")
.attr("y1", "0%")
.attr("x2", "0%")
.attr("y2", "100%");
linearGradient.append("stop")
.attr("offset", "0%")
.attr("stop-color", color(0));
linearGradient.append("stop")
.attr("offset", "25%")
.attr("stop-color", color(linearDivider/4));
linearGradient.append("stop")
.attr("offset", "50%")
.attr("stop-color", color(linearDivider/2));
linearGradient.append("stop")
.attr("offset", "75%")
.attr("stop-color", color(.75*linearDivider));
linearGradient.append("stop")
.attr("offset", "100%")
.attr("stop-color", color(linearDivider));
var nycMap = svg.append("g")
.attr("class", "nyc-map")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var projection = d3.geoConicConformal();
var path = d3.geoPath()
.projection(projection
.parallels([33, 45])
.rotate([96, -39])
.fitSize([width, height], nyc));
nycMap.selectAll("path")
.data(nyc.features)
.enter().append("path")
.attr("d", path)
.attr("class", "neighborhood-lines")
.attr("stroke", "#000")
.attr("stroke-width" ,.5)
.attr("fill", function(d){
if(counts.hasOwnProperty(d.properties.ZIPCODE)){
cts = counts[d.properties.ZIPCODE];
return color(cts);
}
else{
return color(0);
}
});
var legend = svg
.append("g")
.attr("class","color-legend")
.attr("width", 100)
.attr("height", 100);
legend
.append("rect")
.attr("class","color-legend")
.attr("x",150)
.attr("y",100)
.attr("width", 20)
.attr("height", 200)
.style("fill", "url(#legend-gradient)");
var legendAxisScale = d3.scaleLinear()
.range([0,200])
.domain([0,1]);
var legendAxis = d3.axisLeft()
.scale(legendAxisScale)
.ticks(4);
var legendAxis = svg.append("g")
.attr("class","legend-axis")
.attr("transform","translate(" + 150 + ", " + 100 + ")")
.call(legendAxis)
.attr("stroke", "#fff");
legendAxis.selectAll('.domain').remove();
legendAxis.selectAll('line')
.attr("stroke","transparent");
legendAxis.selectAll("text")
.style("font-size", "1.5em")
.attr("fill","#ffffff")
.text(function(d,i){console.log(i);return Math.floor((i*linearDivider)/5);});
legend
.append("rect")
.attr("class","color-legend")
.attr("x",150)
.attr("y",353)
.attr("width", 20)
.attr("height", 20)
.style("fill", color(highestCount));
legend
.append("text")
.attr("x", 115)
.attr("y", 370)
.text(highestCount)
.style("font-family", "helvetica")
.style("font-size", "1em")
.attr("stroke", "#fff")
.attr("fill", "#ffffff");
var title = svg.append("g");
title
.append("text")
.attr("y", height-150)
.attr("x", 350)
.text("NYC Fireworks Complaints")
.style("font-size", "2.2em")
.style("font-family", "helvetica")
.style("fill", "#fff");
title
.append("text")
.attr("y", height-110)
.attr("x", 350)
.text("May 15, 2020 to June 18, 2020")
.style("font-size", "1.3em")
.style("font-family", "helvetica")
.style("fill", "#fff");
title
.append("text")
.attr("y", height-10)
.attr("x", 730)
.text("@LVNGD")
.style("font-size", "0.8em")
.style("font-family", "helvetica")
.style("fill", "#fff");
title
.append("text")
.attr("y", height-10)
.attr("x", 450)
.text("Source: NYC Open Data | 311 Complaints")
.style("font-size", "0.8em")
.style("font-family", "helvetica")
.style("fill", "#fff");
title
.append("text")
.attr("y", height + 20)
.attr("x", 0)
.text("* hour starts with 0 for midnight.")
.style("font-size", ".65em")
.style("font-family", "helvetica")
.style("fill", "#fff");
}
d3.queue()
.defer(d3.json, "zipcodes_nyc.json")
.defer(d3.json, "firework_counts.json")
.await(generateMap)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.