Overview

The city of Los Angeles is one of the most populous and diverse in the United States. It is the entertainment capital of the world, but with it comes crimes of various natures.

In this analysis, we want to highlight crimes in various districts of LA and how it changes over the years. Click on a district on the map to check the crimes within that district. Move the slider to see how crime changes in that district from the year you chose to 2017.

Instructions


Default selection is: the entire LA area, year 2010
The following graph can be filtered in different ways:
  • Clicking on a district will focus the graph on chosen district
  • Moving the year slider will focus on the chosen year
  • Clicking on the crime bar will focus on chosen crime
    • "Play the overall crime viz" will play how crime changes in chosen district from chosen year to 2017
    "Clear" button will default all selection to default (no district, no crime, year 2010)
    Hover over the district to see district name and total crime in that area (or a certain crime if a crime is chosen)

    Los Angeles Crime Report 2010 - 2017

    Overall Crime Distribution in

    Los Angeles

    • Clear

    Year

    2010

    Distribution of Crimes in Los Angeles year 2010

    Analysis

    About Us

    This project was created for the course CSE442: Data Visualization, at the Paul G. Allen School of Computer Science & Engineering within the University of Washington

    Yin Yin Low

    yinlow63@uw.edu

    Sherry Prawiro

    sherrp@uw.edu

    Chenghao Zhu

    chengz27@uw.edu

    Jonathan Jusuf

    jusufj@uw.edu

    Aditya Jhamb

    aditya97@uw.edu

    Writeup

    Rationale for design decisions


    • At the start of the project, we were deciding whether to highlight crimes in Los Angeles or gun violence in the United States. We eventually settled for crimes in LA because it is a dataset that one of the members used before for a previous assignment and it is more focused in scope.
    • We want to show a map in our graph because that would more clearly display LA and viewers would have a better understanding of the difference of crime rates between various districts. We also decided to make a heatmap to show how many crimes occurred in that district in shades of colors (this is in-line with our belief that lighter shade signals "safety" and deeper shade signals "danger"). Each district would also have a tooltip that shows the total number of crimes in that district.
    • When deciding a graph for the various crime types in each district, we were deciding between a pie chart and a bar chart. In the end, we chose the bar chart because we want to show the number of crimes in each district instead of the percentages of crime relative to the district. In this case, the bar chart would make more sense. Each bar in the bar chart would also have a tooltip showing the exact number of times this crime happened.
    • When deciding the bar chart x-xis, we chose to dynamically use both fixed and flexible axis in different scenarios. We adjust the axis accordingly to year filter for comparison convenience within the specific year. If choose division filter, we fix the axis because it is easier to show the severity of a certain crime type. However, we fix the legend scale for map to have fair comparison accordingly.
    • We decided to make a slider. This is the most interactive part of our project. The user would put the slider in a certain year. Depending on whether a district is chosen, it would show the evolution of crimes in the whole LA (if no district is chosen) or a certain district (if a district is chosen) The bar would move around: the crime with the highest number of occurrences would float to the very top and crimes that are too small to show within the current scale would be deleted for visual aesthetics.

    Overview of development process


    • We first brainstormed ideas for the project and what datasets to use.
    • We then decided on the story we want to tell, the types of graphs we want to show, and division of work.
    • We made basic functionalities work using a template available online.
    • We parsed and cleaned our data, with the data team supplying data forms (which columns to use to include, ...) that the front end team needs.
    • We connected the d3.js with our data and made basic functionalities work.
    • We refined details of our work (making sure objects doesn't overlap with each other, clear out visual bugs, choose better coloring and placement).
    • We prototyped testing with friends and fixed details which they were confused about.

    Work Division


    • Yin Yin Low : Team Lead and Front End & Back End work (CSS, GeoJSON Map, Chrolopleth Map)
    • Sherry Prawiro : Front end & Back End work (Data parsing and connecting within D3, bar chart, html positioning, general debugging)
    • Jessica Zhu : Front end (Slider, Tooltips, Bar Chart draft and revise, Work-log)
    • Jonathan Jusuf : Back end (Data parsing and cleaning)
    • Aditya Jhamb : Front end (Clear)
    Total Hour: 20 hours

    Commentary


    Back End


    • Hardest part was deciding which program is easier to parse our data. We tried Tableau Prep and MySQL and ended up with Pandas. After that, it was studying and figuring out Pandas to clean our data.
    • Connecting the data to the chart was tricky, reshaping and preparing the data
    • Since the two charts are connected along with the year slider, it was tricky to filter the data based on many conditions and filters

    Front End


    • We experienced a hard dedugging time in adding tooltips on the bar chart because the bar chart is animated.
    • A lot of bugs and edge cases with display (with coloring, size of bars, title, tooltips, etc), since many of them are connected to each other.