creates a departmental visualization based on d3.js and support for o…

[tomx4096]

…fficer supervisor numbers which can be displayed in the graph. for issue #527

Status

Ready for review / in progress

Description of Changes

Fixes #527 , supersedes PR #541 which got too out of date

Changes proposed in this pull request:

• create supervisor id field in assignment table
• put supervisor id in web forms
• create an interactive d3.js visualization based on this example https://bl.ocks.org/mbostock/4062045

Notes for Deployment

To setup a demo, clear out (most of) the randomly generated data to make room for @dismantl 's Baltimore dataset, as the supervisor information makes it more interesting to look at. download it here and save it as baltimore_processed.csv. then set NUM_OFFICERS from 15000 to 10 in OpenOversight/app/config.py. (setting it to 0 breaks the mock dataset and keeping all of the random data in the visualization makes it too slow).

Then rebuild; the visualizations will be available from the Browse page.

make clean_all && make dev
cd OpenOversight
flask bulk-add-officers baltimore_processed.csv
flask run

Notes

Performance is much better on a less huge dataset, maybe a loading animation can be a later PR. Another potential PR is to randomly generate supervisor relationships in test_data.py, instead of the bulk upload procedure I use below. Unit information could also be incorporated.

Screenshots (if appropriate)

Tests and linting

• I have rebased my changes on current develop

• pytests pass in the development environment on my local machine

• flake8 checks pass

[ghost]

Looks good to me. Needs another review and then merge. The slowness/ potential loading screen can be addressed in another issue.

[dismantl]

This is super cool! Being able to visually illustrate department connections is really useful. I was able to run it just fine, but it definitely had performance slowness, especially trying to move and navigate the graph. It's a great start though! Here's some things I think would be ideal for a feature like this:

• Given the high processor load for the visualization, a more static graph would be good, without so much of the CPU-intenstive physics modeling (especially bc departments like chicago have 10x the number of cops as baltimore). I don't know if this would mean using another d3 module or just tweaking some settings.
• Instead of dots maybe we could use little police icons, and color them according to rank? And a legend to show what the colors/icons mean.
• A responsive container for the visualization, so users with a larger screen can see more of it at once
• Some explainer text above the visualization describing what it signifies and instructing users how to zoom in and out