NYC 311 Calls by Complaint Type

Built with blockbuilder.org

<!DOCTYPE html>
<html>
<head>
<title>NYC 311 Calls by Complaint Type</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("ComplaintType_Ungrouped.json", function(error, data) {
	if (error) throw error;

data.forEach(function(d) {
        d.Complaint = d.Complaint;
        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.Complaint;
                     });

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>Complaint Type:</b>"+ (d.Complaint) + "<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.Complaint;});

// sort Complaint 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 Complaint
  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 Complaint Type</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>

<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"> Based on this graph, noise and parking-related issues are complained about the most. Just like the previous chart, you can use the sorting options on the top to sort the bar chart.</p>
<p style = "font: 13px Arial"> <a href = "https://bl.ocks.org/Qnassiri/raw/ee878b45448f9bdd50f71a66273b634d/199ca0444c6632e12845269388f3efa3576bc1d4/"> Back to the previous plot</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