jalbertbowden · April 1, 2021 17:55
diff --git a/Calendar of Police Killings b/Calendar of Police Killings
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="utf-8" />
 	<title>Calendar of Police Killings</title>

  <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">

 	<style>
 	  body { font-family: 'Fira Sans'; text-align: center; }
 	  td.month { font-size: 20px; height: 30px; }
 	   table { width: 250px; display:inline-block; height: 250px; margin-right: 3%;}
 	  .date { background-color: #eee; position: relative; height: 30px; width: 30px; }
 	  .date-number { font-size: .5rem; vertical-align: super; position: absolute; top: 5px; right: 5px; color: #666; }
 	  .color0 { background-color: #eee; }
 	  .color1 { background-color: #fff580; }
 	  .color2 { background-color: #ffbf5e; }
 	  .color3 { background-color: #ff6555; }	 

 	  #key {
 	    clear: both; 
 	    line-height: 32px;
 	    margin: 1rem auto;
 	  }
 	  #legend {
 	    text-align: left;
    }
 	  #legend span {
 	    text-align: center;
 	    display: inline-block;
 	    height: 32px;
 	    width: 32px;
 	  }
 	  #source {
 	    color: #999;
 	    font-style: italic;
 	  }
 	  #sourcelink,
 	  #updated {
 	    margin-left: 2rem;
 	    white-space: nowrap;
 	  }
 	</style>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/global/luxon.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>

 </head>
 <body>


 <h1 id="title"></h1>
 <div id="output"></div>

 <div id="key">
    <span id="legend">
      <span class="color0">0</span>
      <span class="color1">1</span>
      <span class="color2">2</span>
      <span class="color3">3+</span> &nbsp; killings by police
    </span>
    <span id="source">
        <span id="sourcelink">Source: MappingPoliceViolence.org</span>
        <span id="updated"></span>
    </span>
 </div>


 <script language="javascript">

 function renderData(data) {

      var DateTime = luxon.DateTime;

      var year = DateTime.fromFormat(data[1][4], "M/d/yy").toFormat('yyyy');
      var yr = DateTime.fromFormat(data[1][4], "M/d/yy").toFormat('yy');
      var start = '';


      // count incidents
      var incidents = {};            
      for (var d = 0; d < data.length; d++) {  
        incidents[ data[d][4] ] = incidents[ data[d][4] ] + 1 || 1;
        var isStart = new Date( data[d][4] );
        if (isStart != 'Invalid Date') {
          start = new Date( data[d][4] );
        }
      }

      
      var end = new Date( data[ 1 ][4] );
      var zero_days = 0;

      function addDays(date, days) {
        const copy = new Date(Number(date))
        copy.setDate(date.getDate() + days)
        return copy
      }

      for (var d = start; d.getTime() <= end.getTime(); d = addDays(d, 1) ) {      
        var testDate = d.getMonth() + 1 + '/' + d.getDate() + '/' + yr;
        if (typeof incidents[testDate] == 'undefined') {
          zero_days++;
        }
      }

      //console.log(incidents);

      function getKilled(month_number,day) {
        return incidents [ month_number + '/' + day + '/' + yr ] || 0;
      }

      function getClass(month_number,day) {
        let thisKilled = incidents [ month_number + '/' + day + '/' + yr ] || 0;
        if (thisKilled > 3) { return 'color3'; } else { return 'color' + thisKilled; }
      }


      // fills the month table with numbers
      function fill_table(month, month_length, month_number) { 

        var output = '';

        var today= new Date(month + " 1, "+year)
        var start_day = today.getDay() + 1;

        day=1
        // begin the new month table
        output += "<table><tr>";
        output += "<td colspan='7' align='center' class='month'><B>"+month+"</B></TR>";

        for (var i=1;i<start_day;i++){
            output += ("<td>")
        }
        // fill the first week of days
        for (var i=start_day;i<8;i++){
            output += "<td align='center' class='date "+getClass(month_number,day)+"'><div class='killed'>"+getKilled(month_number,day)+"</div><div class='date-number'>"+day+"</div></TD>";
            day++;            
        }

        output += ("<tr>")
        // fill the remaining weeks
        while (day <= month_length) {
           for (var i=1;i<=7 && day<=month_length;i++){
              output += "<td align='center' class='date "+getClass(month_number,day)+"'><div class='killed'>"+getKilled(month_number,day)+"</div><div class='date-number'>"+day+"</div></TD>";
              day++;
           }
           output += "</tr><tr>";
        }
        output += "</tr></table>";
        return output;
      }

      

      for (var n=0;n < 12; n++) {
        let start = new Date(year, n , 1);
        let monthName = start.toLocaleString('default', { month: 'long' });
        let startDate = DateTime.fromObject({'year':year, 'month': n + 1, 'day':1})
        let days = startDate.plus({ months: 1 }).diff(startDate, 'days').values.days;
        document.getElementById('output').innerHTML += fill_table( monthName, days, n + 1) ;
      }
      
      var plural = 's';
      if (zero_days == 1) { plural = '' };
      
      document.getElementById('title').innerHTML += 'There have only been '+zero_days+' day'+plural+' in '+ year +' where police did not kill someone';
      document.getElementById('updated').innerHTML += 'Updated: ' + end.toLocaleString('en-US',{ year: 'numeric', month: 'long', day: 'numeric' });
      
 }



 window.onload = function() {


  $.ajax({
    type: "GET",  
    url: "data/MPVDatasetDownload.csv",
    dataType: "text",       
    success: function(response) {
      var data = $.csv.toArrays(response);
      renderData(data);
    }   
  });
 }

 </script>
 </body>
 </html>
diff --git a/MPVDatasetDownload.csv b/MPVDatasetDownload.csv
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Calendar of Police Killings</title>

	<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">

	<style>
	body { font-family: 'Fira Sans'; text-align: center; }
	td.month { font-size: 20px; height: 30px; }
	table { width: 250px; display:inline-block; height: 250px; margin-right: 3%;}
	.date { background-color: #eee; position: relative; height: 30px; width: 30px; }
	.date-number { font-size: .5rem; vertical-align: super; position: absolute; top: 5px; right: 5px; color: #666; }
	.color0 { background-color: #eee; }
	.color1 { background-color: #fff580; }
	.color2 { background-color: #ffbf5e; }
	.color3 { background-color: #ff6555; }

	#key {
	clear: both;
	line-height: 32px;
	margin: 1rem auto;
	}
	#legend {
	text-align: left;
	}
	#legend span {
	text-align: center;
	display: inline-block;
	height: 32px;
	width: 32px;
	}
	#source {
	color: #999;
	font-style: italic;
	}
	#sourcelink,
	#updated {
	margin-left: 2rem;
	white-space: nowrap;
	}
	</style>

	<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/global/luxon.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>

	</head>
	<body>


	<h1 id="title"></h1>
	<div id="output"></div>

	<div id="key">
	<span id="legend">
	<span class="color0">0</span>
	<span class="color1">1</span>
	<span class="color2">2</span>
	<span class="color3">3+</span>   killings by police
	</span>
	<span id="source">
	<span id="sourcelink">Source: MappingPoliceViolence.org</span>
	<span id="updated"></span>
	</span>
	</div>


	<script language="javascript">

	function renderData(data) {

	var DateTime = luxon.DateTime;

	var year = DateTime.fromFormat(data[1][4], "M/d/yy").toFormat('yyyy');
	var yr = DateTime.fromFormat(data[1][4], "M/d/yy").toFormat('yy');
	var start = '';


	// count incidents
	var incidents = {};
	for (var d = 0; d < data.length; d++) {
	incidents[ data[d][4] ] = incidents[ data[d][4] ] + 1 \|\| 1;
	var isStart = new Date( data[d][4] );
	if (isStart != 'Invalid Date') {
	start = new Date( data[d][4] );
	}
	}


	var end = new Date( data[ 1 ][4] );
	var zero_days = 0;

	function addDays(date, days) {
	const copy = new Date(Number(date))
	copy.setDate(date.getDate() + days)
	return copy
	}

	for (var d = start; d.getTime() <= end.getTime(); d = addDays(d, 1) ) {
	var testDate = d.getMonth() + 1 + '/' + d.getDate() + '/' + yr;
	if (typeof incidents[testDate] == 'undefined') {
	zero_days++;
	}
	}

	//console.log(incidents);

	function getKilled(month_number,day) {
	return incidents [ month_number + '/' + day + '/' + yr ] \|\| 0;
	}

	function getClass(month_number,day) {
	let thisKilled = incidents [ month_number + '/' + day + '/' + yr ] \|\| 0;
	if (thisKilled > 3) { return 'color3'; } else { return 'color' + thisKilled; }
	}


	// fills the month table with numbers
	function fill_table(month, month_length, month_number) {

	var output = '';

	var today= new Date(month + " 1, "+year)
	var start_day = today.getDay() + 1;

	day=1
	// begin the new month table
	output += "<table><tr>";
	output += "<td colspan='7' align='center' class='month'><B>"+month+"</B></TR>";

	for (var i=1;i<start_day;i++){
	output += ("<td>")
	}
	// fill the first week of days
	for (var i=start_day;i<8;i++){
	output += "<td align='center' class='date "+getClass(month_number,day)+"'><div class='killed'>"+getKilled(month_number,day)+"</div><div class='date-number'>"+day+"</div></TD>";
	day++;
	}

	output += ("<tr>")
	// fill the remaining weeks
	while (day <= month_length) {
	for (var i=1;i<=7 && day<=month_length;i++){
	output += "<td align='center' class='date "+getClass(month_number,day)+"'><div class='killed'>"+getKilled(month_number,day)+"</div><div class='date-number'>"+day+"</div></TD>";
	day++;
	}
	output += "</tr><tr>";
	}
	output += "</tr></table>";
	return output;
	}



	for (var n=0;n < 12; n++) {
	let start = new Date(year, n , 1);
	let monthName = start.toLocaleString('default', { month: 'long' });
	let startDate = DateTime.fromObject({'year':year, 'month': n + 1, 'day':1})
	let days = startDate.plus({ months: 1 }).diff(startDate, 'days').values.days;
	document.getElementById('output').innerHTML += fill_table( monthName, days, n + 1) ;
	}

	var plural = 's';
	if (zero_days == 1) { plural = '' };

	document.getElementById('title').innerHTML += 'There have only been '+zero_days+' day'+plural+' in '+ year +' where police did not kill someone';
	document.getElementById('updated').innerHTML += 'Updated: ' + end.toLocaleString('en-US',{ year: 'numeric', month: 'long', day: 'numeric' });

	}



	window.onload = function() {


	$.ajax({
	type: "GET",
	url: "data/MPVDatasetDownload.csv",
	dataType: "text",
	success: function(response) {
	var data = $.csv.toArrays(response);
	renderData(data);
	}
	});
	}

	</script>
	</body>
	</html>