D3 Examples - NYC 311 Calls by Complaint Type

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<title>NYC 311 Calls by Complaint Type</title>
​
<style>
body {
  margin: 15px;
  background-color: #F1F3F3    
}
​
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>
​
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
​
<script>
​
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;});
​
     function kFormatter(num) {
    return num > 600 ? (num/1000).toFixed(1) + 'k' : num
};
     
    enterG.append("text")
     .attr("x", width-margin.right)
     .attr("y", barHeight / 2 + 3)
     .text(function(d) {return "~"+kFormatter(d.Count)+"*";});
    
  binding.transition()
        .delay(function(d, i) {
                return i * 40;
        })
         .duration(1500)
         .attr("transform", function(d, i) {
           return "translate(0," + i * barHeight + ")";
         });
}
​
// 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>
​
<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"> 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>
    