Skip to content
An application visualizing the spatial distribution of police involved shootings in the U.S. Built using React, Redux, redux-saga, redux-little-router, Victory, and Sass.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
public
python
src
.gitignore
.prettierignore
.prettierrc
.travis.yml
README.md
package.json
yarn.lock

README.md

d3-react-map

Build Status code style: prettier Coverage Status

Demo

Check out the app live here. This app is currently undergoing rapid development changes, some of them breaking. The app deployed to the demo is (mostly) functional, but if you catch an error please open an issue.

Context

This repo is an attempt to expand upon a previous project of mine exploring police involved shootings in the United States. The previous iteration of this project was built using vanilla JavaScript and D3. While I think it accomplished some things well, it is not designed with responsive principles in mind, employs no framework to manage the application, and suffers from some inelegant design. It was a while ago, I've learned a lot.

This revamped project is built using React, Redux, redux-saga, and Sass. It employs mobile-first design, working well across desktop, tablet, and mobile devices. It handles data elegantly, keeping application state in Redux and moving asynchoronous tasks and route-based data changes to sagas. Components are designed with reusability and extensibility in mind. Finally, the project - as it's name might imply - serves to demonstrate how D3 and React can play nicely together. As a developer who specializes in React and builds geospatial apps for a living, this is my dream. Read more about my thoughts on working with D3 and React here.

Running the App

npm install | yarn install
npm run start | yarn run start

Building the App

npm run build | yarn run build

Config

The app pulls in data on load from several APIs, including the U.S. Census Bureau. To get census data, you'll need to obtain a Census API key of your own. Once obtained, store your key in a file called config.js in the root of src. The file should look something like this:

export const CENSUS_API_KEY = '<Your actual key goes here!>';

Caveats

This app is still in the works and is undergoing constant change. If you like what you see, please star! If you think I'm seriously missing the mark, please issue a PR or open an issue. Or better yet, get in touch on my website.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.