Feedback

.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+*.xlsx

README.md

@@ -1 +1,33 @@
-# final-project-starter-code
+Project Page: List title, team members, summary image, abstract, link to the paper, video, running instructions for the software, and other optional materials. Preferrably host the page with Github Pages.
+
+Readme File: In the repository’s readme.md, include a breakdown of how the work was split among the group members and a commentary on the project process.
+
+## Project
+### Title: Police Brutality in the United States
+#### Team Members: Allan Garcia-Zych, Jodi Huang, Tanya Yang
+
+![alt text](https://github.com/6859-sp21/final-project-police-brutality/blob/main/img/summary.png)
+
+Abstract:
+The authors employ scrollytelling over a map of the United States with a red marker at the location of every fatal police shooting since 2015 to walk the user through various layers of police brutality. Sub-visualizations are provided to support the exploration and case studies are presented as a connection to fatal police shootings that the user might be familiar with. Recognizing that the user likely understands that police brutality is a serious issue, the authors aim to broaden and deepen this understanding by exploring main facets such as marginalized communities and police militarization.
+
+Link to paper: The paper is within the project, at final/FinalPaper.pdf.
+
+The video can be found [here](https://www.loom.com/share/9ea3c7949bd44d97bdadd98e91ec6724).
+
+Running instructions: Simply download this Github repo and open up index.html.
+
+
+## Project Details
+### Commentary on Project Process
+The project initially started as an exploration into voter turnout, but the authors shifted to the topic of police brutality because they wanted to tackle an issue more present in the news and understand the relationship that visualizations might have with such an issue. The authors were first focused on the few intense cases that had been the driving force of most police reform conversations throughout the past year, with the killings of George Floyd, Breonna Taylor, Adam Toledo, and countless more. 
+
+From these cases, the authors quickly realized that police brutality was a much more multidimensional issue than they had once perceived. They spent a significant amount of time determining the particular case studies for the project, eventually deciding with impact on marginalized communities, militarization on police, legislation rates,and finally missing data. However, there are still so many facets of police brutality to encompass – these only serve as a starting point.
+
+The project proceeded with detailed examination on relevant datasets, and the availability and depth of the data informed the types of visualizations to employ. The authors decided on a multitude of visualizations instead of one large detailed one to further highlight the different parts of the probblem. The various visualizations emphasize breadth over depth but are fundamentally anchored by the background map.
+
+Finally, the last part of the process was comprised of styling and formatting.
+
+### Breakdown of Work
+
+All three authors contributed to the outlining of the narrative. Allan worked on the visualizations for legislation, militarization, and the calendar view, as well as some of their corresponding writing sections. Jodi worked on an accountabiltiy section (which we unfortunately could not fit at the end) as well as the missing data choropleth. She also contributed heavily to the formatting of the scrollytelling. Tanya worked on the marginalized community pie charts as well as the specific case studies accompanying many of the visualiations, with connections to the very current cases of Breonna Taylor and Adam Toledo. She also worked on the overall styling of the piece, with color and font selections.

calendar.js

@@ -0,0 +1,144 @@
+function drawCalendar(myData) {
+
+  var calendarRows = function(month) {
+    var m = d3.timeMonth.floor(month);
+    return d3.timeWeeks(d3.timeWeek.floor(m), d3.timeMonth.offset(m,1)).length;
+  }
+
+  var minDate = new Date(2021, 0, 1);
+  var maxDate = new Date(2021, 3, 21);
+
+  var cellMargin = 2,
+      cellSize = 20;
+
+  var day = d3.timeFormat("%w"),
+      week = d3.timeFormat("%U"),
+      format = d3.timeFormat("%Y-%m-%d"),
+      titleFormat = d3.utcFormat("%a, %d-%b"),
+      monthName = d3.timeFormat("%B"),
+      months= d3.timeMonth.range(d3.timeMonth.floor(minDate), maxDate);
+
+  var color = d3.scaleOrdinal()
+    .domain([0, 10])
+    .range(["#a6cee3","#fb9a99","#b2df8a", "#fdbf6f","#cab2d6","#ffff99"])
+
+  var svg = d3.select("#d3-calendar").selectAll("svg")
+    .data(months)
+    .enter().append("svg")
+      .attr("class", "month")
+      .attr("width", (cellSize * 7) + (cellMargin * 8) )
+      .attr("height", function(d) {
+        var rows = calendarRows(d);
+        return (cellSize * rows) + (cellMargin * (rows + 1)) + 20; // the 20 is for the month labels
+      })
+    .append("g")
+
+  svg.append("text")
+    .attr("class", "month-name")
+    .attr("x", ((cellSize * 7) + (cellMargin * 8)) / 2 )
+    .attr("y", 15)
+    .attr("text-anchor", "middle")
+    .text(function(d) { return monthName(d); })
+    .attr('font-family', 'Crimson Text')
+
+  var scale = d3.scaleLinear()
+    .domain(d3.extent(myData, function(d) { return d.count; }))
+    .range([0.4,1]); // the interpolate used for color expects a number in the range [0,1] but i don't want the lightest part of the color scheme
+
+  var rect = svg.selectAll("rect.day")
+    .data(function(d, i) {
+      return d3.timeDays(d, new Date(d.getFullYear(), d.getMonth()+1, 1));
+    })
+    .enter().append("rect")
+      .attr("class", "day")
+      .attr("width", cellSize)
+      .attr("height", cellSize)
+      .attr("rx", 3).attr("ry", 3) // rounded corners
+      .attr("fill", d => '#eaeaea') // default light grey fill
+      .attr("x", function(d) {
+        return (day(d) * cellSize) + (day(d) * cellMargin) + cellMargin;
+      })
+      .attr("y", function(d) {
+        return ((week(d) - week(new Date(d.getFullYear(),d.getMonth(),1))) * cellSize) +
+               ((week(d) - week(new Date(d.getFullYear(),d.getMonth(),1))) * cellMargin) +
+               cellMargin + 20;
+       })
+      .attr("margin-top", "10px")
+      .on("mouseover", function(d) {
+        d3.select(this).classed('hover', true);
+      })
+      .on("mouseout", function(d) {
+        d3.select(this).classed('hover', false);
+      })
+      .datum(format);
+
+  rect.append("title")
+    .text(function(d) {
+
+      return titleFormat(new Date(d)); });
+
+  let countsByDate = d3.group(myData, d => (new Date(d.date)).toDateString());
+
+
+  rect.filter(function(d) { return d; })
+    .style("fill", function(d) {
+      let dayBefore = new Date(d);
+      let result = new Date(dayBefore);
+      result.setDate(result.getDate() + 1);
+      let dayResult = countsByDate.get(result.toDateString());
+      let count = 0;
+      if (typeof dayResult != "undefined"){
+        count = dayResult[0].count;
+        if (count === 0){
+          console.log( dayResult );
+          console.log((new Date(d)).toDateString())
+        }
+      }
+      if (count === 0){
+        return "eaeaea";
+      }
+      return d3.interpolateReds(scale(count)); })
+    .select("title")
+      .text(function(d) {
+        let dayBefore = new Date(d);
+        let result = new Date(dayBefore);
+        result.setDate(result.getDate() + 1);
+        let dayResult = countsByDate.get(result.toDateString());
+        let count = 0;
+        if (typeof dayResult != "undefined"){
+          count = dayResult[0].count;
+          if (count === 0){
+            console.log( dayResult );
+            console.log((new Date(d)).toDateString())
+          }
+        }
+        return titleFormat(new Date(d)) + ":  " + count; });
+
+}
+
+d3.csv("https://raw.githubusercontent.com/6859-sp21/final-project-police-brutality/main/data/MPVDatasetDownload-csv.csv").then((data) => {
+  thisYearData = data.filter(d => d["Date of Incident (month/day/year)"].slice(-2) === "21");
+  counted2021Date = {}
+  thisYearData.forEach(d => {
+    let date = new Date(d["Date of Incident (month/day/year)"]);
+    counted2021Date[date] = (counted2021Date[date] || 0) + 1;
+  })
+
+  // convert object to array of objects
+  let allDates = []
+  Object.keys(counted2021Date).forEach(d => {
+    allDates.push({date: d, count: counted2021Date[d]})
+  })
+
+  let missingDates = [new Date(2021, 0, 16), new Date(2021, 0, 23), new Date(2021, 2, 2)]
+  missingDates.forEach(d => {
+    allDates.push({date: d, count: 0})})
+
+  let allDatesSorted = allDates.slice().sort((a, b) => b.date-a.date)
+
+  drawCalendar(allDatesSorted)
+
+
+
+
+});