Violations 2012 calendar view

A calendar visualization of the 2012 housing violations dataset. An alternate presentation of this beeswarm visualization. This one takes advantage of the fact that our data is mostly focused on the year 2012. I used emoji's in the selections to draw more attention to different violations in a long list.

Select different sorts of violations from the drop down menu. Hold your mouse over a rectangle to reveal more details.

Original exploded calendar is here. Emoji reference from here.

forked from BBischof's block: Calendar Alternate Orientation v4 update

<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<html>
  <head>
    <style>

body {
        font: 1.1em sans-serif;
      }

#chart{
        width: 800px;
        margin: 0 auto;
      }
      .background {
        fill: #eee;
      }

line {
        stroke: #fff;
      }

text.active {
        fill: red;
      }

.container1{
        padding-top: 10px;
        position: relative;
        left: 6%;
        top: 0%;
      }
      .container2{
        padding-top: 10px;
        position: relative;
        left: 6%;
        top: 0%;
      }
      
      .day {
        fill: #fff;
        stroke: #ccc;
      }

.month {
        fill: none;
        stroke: #fff;
        stroke-width: 4px;
      }
      .year-title {
        font-size: 1.5em;
      }

/* color ranges */
      .RdYlGn .q0-11{fill:rgb(165,0,38)}
      .RdYlGn .q1-11{fill:rgb(215,48,39)}
      .RdYlGn .q2-11{fill:rgb(244,109,67)}
      .RdYlGn .q3-11{fill:rgb(253,174,97)}
      .RdYlGn .q4-11{fill:rgb(254,224,139)}
      .RdYlGn .q5-11{fill:rgb(255,255,191)}
      .RdYlGn .q6-11{fill:rgb(217,239,139)}
      .RdYlGn .q7-11{fill:rgb(166,217,106)}
      .RdYlGn .q8-11{fill:rgb(102,189,99)}
      .RdYlGn .q9-11{fill:rgb(26,152,80)}
      .RdYlGn .q10-11{fill:rgb(0,104,55)}

polylinear_color = d3.scale.linear()
        .domain([0, 3, 10])
        .range(['rgb(255,0,0)','rgb(255,255,255)','rgb(0,255,0)'])

/* hover info */
      #tooltip {
        background-color: #fff;
        border: 2px solid #ccc;
        padding: 10px;
      }

</style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  </head>
    <body>
			<div class="container2"></div>
  <div class="container1">
    <div class="dropdown">
      Violation Type:   <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" id="source">Overgrown Vegetation:🌿🌿🌿
      <span class="caret"></span></button>
      <ul class="dropdown-menu" id="source">
        <li><a href="#">Animals, Prohibited number:🐕🐈#⃣</a></li>
        <li><a href="#">Animals and Pests, not specified:🐕🐈🐜</a></li>
        <li><a href="#">Damaged or defective walls, floors or ceilings:💥</a></li>
        <li><a href="#">Insects, not specified:🐜</a></li>
        <li><a href="#">Rodents, not specified:🐀🐁</a></li>
        <li><a href="#">Unsanitary conditions, not specified:💩</a></li>
        <li><a href="#">Abandoned Vehicle:🚗</a></li>
        <li><a href="#">Animal Feces:🐕🐈💩</a></li>
        <li><a href="#">Animal Urine:🐕🐈💦</a></li>
        <li><a href="#">Barrier to Emergency Ingress or Egress:🚨⛔</a></li>
        <li><a href="#">Bed Bugs:💤🐜</a></li>
        <li><a href="#">Building Dampness or Water Intrusion:💦</a></li>
        <li><a href="#">Cockroaches:🐞</a></li>
        <li><a href="#">Dogs:🐕</a></li>
        <li><a href="#">Flies:🐝</a></li>
        <li><a href="#">Human Feces:🚶💩</a></li>
        <li><a href="#">Human Urine:🚶💦</a></li>
        <li><a href="#">Improper Refuse Storage:♨</a></li>
        <li><a href="#">Inadequate Heating:🔥</a></li>
        <li><a href="#">Inadequate Lighting:💡</a></li>
        <li><a href="#">Inadequate Pest Exclusion:🐜</a></li>
        <li><a href="#">Inadequate Ventilation:♨💨</a></li>
        <li><a href="#">Inadequate or Improper Kitchen Facilities:🍴</a></li>
        <li><a href="#">Inoperable Windows:🖼⬇</a></li>
        <li><a href="#">Lead Hazard:🔩</a></li>
        <li><a href="#">Mice:🐁</a></li>
        <li><a href="#">Moderate risk food holding temperature:🍲🔥</a></li>
        <li><a href="#">Mold or Mildew:🍄</a></li>
        <li><a href="#">Mosquitos:🐜💉</a></li>
        <li><a href="#">No or inadequate hot or cold water:💦</a></li>
        <li><a href="#">Non-functioning Smoke Detector:🚬</a></li>
        <li><a href="#">Nuisance Odors:😷♨</a></li>
        <li><a href="#">Overgrown Vegetation:🌿🌿🌿</a></li>
        <li><a href="#">Pidgeons:🐦</a></li>
        <li><a href="#">Poison Ivy or Poison Oak:🌿</a></li>
        <li><a href="#">Rats:🐀</a></li>
        <li><a href="#">Refuse Accumulation:♨♨♨</a></li>
        <li><a href="#">Refuse Not Properly Stored:♨</a></li>
        <li><a href="#">Sewage Hazard:💩⚠</a></li>
        <li><a href="#">Standing Water:🌊</a></li>
        <li><a href="#">Unsanitary Floors or Walls:💩🏠</a></li>
        <li><a href="#">Unsanitary Public Areas:💩🏰</a></li>
        <li><a href="#">Unsanitary Toilets or Bathrooms:💩🛁</a></li>
      </ul>
    </div>
  </div>

///////////////////////////
function plot(name){    
  
  d3.select("svg").remove();
  
      var width = 960,
        height = 750,
        cellSize = 25; // cell size

var no_months_in_a_row = Math.floor(width / (cellSize * 7 + 50));
    var shift_up = cellSize * 3;

var day = d3.timeFormat("%w"), // day of the week
        day_of_month = d3.timeFormat("%e") // day of the month
        day_of_year = d3.timeFormat("%j")
        week = d3.timeFormat("%U"), // week number of the year
        month = d3.timeFormat("%m"), // month number
        year = d3.timeFormat("%Y"),
        percent = d3.format(".1%"),
        format = d3.timeFormat("%Y-%m-%d");
    
    var parseDate = d3.timeParse("%Y-%m-%d");

var color = d3.scaleQuantize()
        .domain([0, 10])
        .range(d3.range(11).map(function(d) { return "q" + d + "-11"; }));

var svg = d3.select("#chart").selectAll("svg")
        .data(d3.range(2012, 2013)) //years included in the viz
      .enter().append("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("class", "RdYlGn")
      .append("g")

//  Tooltip Object
    var tooltip = d3.select("body")
      .append("div").attr("id", "tooltip")
      .style("position", "absolute")
      .style("z-index", "10")
      .style("visibility", "hidden")
      .text("a simple tooltip");
    
    function dayTitle (t0) {
      return t0.toString().split(" ")[2];
    }
    function monthTitle (t0) {
      return t0.toLocaleString("en-us", { month: "long" });
    }
    function yearTitle (t0) {
      return t0.toString().split(" ")[3];
    }
  d3.csv("Violations-2012.csv", function(error, data) {
  if (error) throw error;
  
      var vio_by_type = d3.nest().key(function(d) {return d.violation_type}).entries(data);
      
      var new_data = d3.nest()
      	.key(function(d) {return d.violation_type})
        .key(function(d) {return (d.violation_date.split(" ")[0])})
        .rollup(function(v) { return v.length; })
      	.map(data);

//  Tooltip
      rect.on("mouseover", mouseover);
      rect.on("mouseout", mouseout);
      function mouseover(d) {
        tooltip.style("visibility", "visible");
        var factlet_num = (new_data.get(name).get(d) !== undefined) ? new_data.get(name).get(d) : 0;
        var purchase_text = d + ": " + factlet_num + " violations";

tooltip.transition()        
                    .duration(200)      
                    .style("opacity", .9);      
        tooltip.html(purchase_text)  
                    .style("left", (d3.event.pageX)+30 + "px")     
                    .style("top", (d3.event.pageY) + "px"); 
      }
      function mouseout (d) {
        tooltip.transition()        
                .duration(500)      
                .style("opacity", 0); 
        var $tooltip = $("#tooltip");
        $tooltip.empty();
      }
    });

}
    
$("#source li a").click(function(){
 	violation_type = $(this).text();
  $("#source:first-child").text(violation_type);
  plot(violation_type.split(":")[0]);
});   
    
plot("Overgrown Vegetation");
</script>

</body>
</html>

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

Modified http://code.jquery.com/jquery-latest.min.js to a secure url

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

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js

https://d3js.org/d3.v4.js

https://code.jquery.com/jquery-latest.min.js