SF Eviction Analysis

A look at San Francisco evictions from 1998 to 2018. heroku link & backup heroku link

Inspired by analysis at pudding.cool, SF Eviction Analysis is a look at evictions in the city across neighborhoods, months, and years made possible by DataSF.

Architecture and Technologies

Vanilla JavaScript, CSS for styling and interactivity
HTML for structure
D3 on SVG for graphs

Functionality and MVP List

Users will land on an attention grabbing page and scroll down for 4 interactive graphs and analysis.

Bubble chart of total evictions, x-axis is number of evictions and bubbles represent 1 year
Horizontal bar graph sorted by neighborhoods that can be filtered by year
Vertical bar graph tracking evictions per year against median home price, SFH vs !SFH
Pie charts focusing on eviction types

Reuseable code for generating pie charts that also filters extra keys from data source keeps code and data duplication to a minimum.

function makePieChart(year) {
  let yearsData = years.find(obj => obj.year === year);
  let yearData = Object.keys(yearsData).map(key => {
    let obj = {};
    obj[key] = yearsData[key];
    return obj;
  });

  let pieChart = d3.pie().value(d => {
                        switch (Object.keys(d)[0]) {
                          case ("count" || "leadRemediation" || "year"):
                            return null;
                          default:
                            return d[Object.keys(d)[0]];
                        }
                      })(yearData);
...
  let update = d3.select('.chart')
                  .selectAll('.arc')
                  .data(pieChart);

  update.exit()
        .remove();

  update
    .enter()
    .append('path')
      .classed('arc', true)
    .merge(update)
      .attr('fill', d => {
        let key = "";
        key = Object.keys(d.data)[0];
        return colorScale(key);
      })
      .attr('stroke', 'black')
      .attr('d', path);

  d3.select(".title")
    .text("Eviction by type as a whole for " + year + ", in San Francisco.");
}

Implementaion Timeline

Over the weekend:

Find inspiration and research visually appealing ways to display data

Day 1:

Decide on backend (postgresql or mongodb)
Import CSV's

Day 2:

Learn how to use D3

Day 3:

Build graphs with D3

Day 4:

Styling and Analysis

Wireframes

Each image is a graph which will take up the entire screen

Bonus Features

Add a second layer to evictions by neighborhood with median price of neighborhood
Find Oakland's eviction data and pair resulting analysis to glean possible relationship
Same as above for San Jose

yukichikawada/sf-evictions-analysis