NYC 311 Calls by Responsible Agency

Built with blockbuilder.org

<!DOCTYPE html>
<html>
<head>
<title>NYC 311 Calls by Responsible Agency</title>

table, th, td{
	border: 1px solid black;
	text-align: center;
	border-collapse: collapse;
	font: 13px Arial
}

.chart rect {
  fill: #CD5C5C;
}

.chart text {
  fill: #00306c;
  font: 11px sans-serif;
  font-weight: bold
}

.toolTip {
  position: absolute;
  text-align: left;
  color: #00306c;
  min-width: auto;
  height: auto;
  padding: 7px;
  font: 12px sans-serif;		
  display: none;
  background: #FCD727;
  border: 0px;
  border-radius: 8px;			
  pointer-events: none;	
}
</style>

d3.json("Agency_ungrouped.json", function(error, data) {
	if (error) throw error;

data.forEach(function(d) {
        d.Agency = d.Agency;
        d.Count = d.Count;
    });

var width = window.innerWidth,
	barHeight = 20,
	margin = { top: 40, right: 100, bottom: 20, left: 40 };

var tooltip = d3.select("body").append("div").attr("class", "toolTip");
var scaleFunctionx = d3.scale.linear().range([0, width-margin.right]);
	scaleFunctionx.domain([0, d3.max(data, function(d) { return d.Count; })]);

// the main function that uses d3 to both create and update the bar chart
function updateBarChart() {
  var chart = d3.select("#d3chart"); // select the chart itself

var binding = chart.selectAll("g")
                     .data(data, function(d) {
                       return d.Agency;
                     });

var enterG = binding.enter()
                      .append("g")

enterG.append("rect")
     .attr("width", function(d) {
       return scaleFunctionx(d.Count);
     })
     .attr("height", barHeight-1)
	  .on("mousemove", function(d){
            tooltip
              .style("left", d3.event.pageX  + "px")
              .style("top", d3.event.pageY  + "px")
              .style("display", "inline-block")
              .html("<b>Agency:</b>"+ (d.Agency) + "<br>" + "<b> Complaints Count:	</b>" +(d.Count));})
	.on("mouseout", function(d){ tooltip.style("display", "none");});

enterG.append("text")
     .attr("x", 3)
     .attr("y", barHeight / 2 + 3)
     .text(function(d) {return d.Agency;});

// sort Agency by Count and update the chart
function sortAndUpdate(isAscending) {
  data.sort(function(a, b) {
    if (isAscending) {
      return d3.ascending(a.Count, b.Count);
    }
    else {
      return d3.descending(a.Count, b.Count);
    }
  });

// update the EXISTING bar chart with the newly-sorted Agency
  updateBarChart();
}

// run this code after your page loads
$(function() {
  // set the initial dimensions for the SVG container
  // (very important or else the entire chart won't display)
  d3.select("#d3chart")
    .attr("width", width)
    .attr("height", barHeight*data.length);

// create the bar chart for the first time
  updateBarChart();

// set button click handlers
  $("#sortAscButton").click(function() {sortAndUpdate(true);});
  $("#sortDescButton").click(function() {sortAndUpdate(false);});
});
});

</script>
</head>

<body>

<h1 style="color:#00306c;font: 25px Helvetica Neue">NYC 311 Calls by Responsible Agency</h1>

<div style="margin-bottom: 10px;">
  <button id="sortAscButton" style="font: 14px Helvetica Neue;
  background-color: #222;
  background-image: -moz-linear-gradient(top, rgba(255,255,255,.25), rgba(255,255,255,.11));
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,.25)),color-stop(1, rgba(255,255,255,.11)));
  background-image: -webkit-linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.11));
  color: #fff;
  text-rendering: optimizeLegibility;
  text-shadow: 0 -1px 1px #222;
  padding: 6px 10px 6px 10px;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid #222;
  margin: 0;
  -moz-box-shadow: 0 1px 3px #999;
  -webkit-box-shadow: 0 1px 3px #999;">Sort Ascending</button>
  
  <button id="sortDescButton" style="font: 14px Helvetica Neue;
  background-color: #222;
  background-image: -moz-linear-gradient(top, rgba(255,255,255,.25), rgba(255,255,255,.11));
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,.25)),color-stop(1, rgba(255,255,255,.11)));
  background-image: -webkit-linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.11));
  color: #fff;
  text-rendering: optimizeLegibility;
  text-shadow: 0 -1px 1px #222;
  padding: 6px 10px 6px 10px;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid #222;
  margin: 0;
  -moz-box-shadow: 0 1px 3px #999;
  -webkit-box-shadow: 0 1px 3px #999;">Sort Descending</button>
</div>

<div>
  <svg class="chart" id="d3chart"></svg>
</div>
<p style = "font: 11px Arial"> *Please note that the numbers on the right are rounded. You may hover over the bars to see the exact numbers.</p>
<p style = "font: 13px Arial"> This graph shows the top 10 agencies that are responsible for resolving complaints filed on 311 calls. As can be seen, <a href="https://www1.nyc.gov/site/nypd/index.page" target="_blank"> New York Police Department (NYPD)</a> is the responsible agancy for responding to most of these Complaints. You can use the sorting options on the top to sort the bar chart and see how different departments rank in terms of being responsible for 311 complaints.</p>
<p style = "font: 13px Arial"> You can get more information about each of these departments by visiting their websites:</p>

<table style = "width:45%" align="center">
	<tr>
		<th> Agency Name
		<th> Acronym
	</tr>
	<tr>
		<td> <a href= "https://www.nyc.gov/html/dep/html/home/home.shtml" target="_blank"> Department of Environmental Protection
		<td> DEP
	</tr>
	<tr>
		<td> <a href= "https://www1.nyc.gov/site/dhs/index.page" target="_blank"> Department of Homeless Services
		<td> DHS
	</tr>
	<tr>
		<td> <a href= "https://www1.nyc.gov/site/buildings/index.page" target="_blank"> Department of Buildings
		<td> DOB
	</tr>
	<tr>
		<td> <a href= "https://www1.nyc.gov/site/finance/index.page" target="_blank"> Department of Finance
		<td> DOF
	</tr>
	<tr>
		<td> <a href= "https://www.nyc.gov/html/dot/html/home/home.shtml" target="_blank"> Department of Transportation
		<td> DOT
	</tr>
	<tr>
		<td> <a href= "https://www.nycgovparks.org/" target="_blank"> Department of Parks and Recreation
		<td> DPR
	</tr>
	<tr>
		<td> <a href= "https://www1.nyc.gov/assets/dsny/site/home" target="_blank"> Department of Sanitation
		<td> DSNY
	</tr>
	<tr>
		<td> <a href= "https://www1.nyc.gov/site/hpd/index.page" target="_blank"> Department of Housing Preservation and Development
		<td> HPD
	</tr>
	<tr>
		<td> <a href= "https://www1.nyc.gov/nyc-resources/service/6644/access-hra" target="_blank"> Department of Social Services (Human Resources Administration)
		<td> HRA
	</tr>
	<tr>
		<td> <a href= "https://www1.nyc.gov/site/nypd/index.page" target="_blank"> The City of New York Police Department
		<td> NYPD
	</tr>
	
</table>	
<p style = "font: 13px Arial"> Now, you might ask, what type of complaints are expressed the most in 311 calls. Let's see what the top 20 <strong><em>categories of complaints</em></strong> are:<br><a href="https://bl.ocks.org/Qnassiri/raw/9688ac71c4a96ec683e6b77938266cd3/">Click here to get redirected to the corresponding chart</a></p>
<p style = "font: 13px Arial">To get more information about this visualization, please refer to <a href = "https://bl.ocks.org/Qnassiri/raw/70df0a1c5bfabc84051a53587dadbbdf/e85bdb33b4024d902d40dcb6d3074693208c0c12/" target = "_blank_">the essay</a>.</p>

</body>
</html>

Modified http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js to a secure url

Modified http://d3js.org/d3.v3.min.js to a secure url

https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

https://d3js.org/d3.v3.min.js