cis4301-project-university-of-florida / u.s.-gun-crime Goto Github PK
View Code? Open in Web Editor NEWA database-driven web app that allows you to visualize U.S. gun crime statistics and trends for the period of 2013–2018.
License: MIT License
A database-driven web app that allows you to visualize U.S. gun crime statistics and trends for the period of 2013–2018.
License: MIT License
Allow pages to specify their own h1 content; don't force it to be the same as the title prop.
Use React fragments to get rid of useless divs and other wrapper elements.
Consider using React Hooks for simpler state management (not necessary, though).
Maybe add tests (though we admittedly don't have much time left for this project).
Relevant tutorials and documentation:
Required server
packages (install with yarn
):
I tested this with a toy app and was able to connect to the UF CISE Oracle database and query data (both inserts and deletions).
Additional considerations
We'll need to add environment variables to server/env_template/development.env
for the following information:
oracle.cise.ufl.edu/orcl
)And of course, be sure to copy them over to your actual env/
folder (gitignored).
Write scripts to extract the following entities out of the main CSV:
Incident(id: integer, i_date: date, latitude: number, longitude: number, n_killed: integer, n_injured: integer, n_guns_involved: int, source_url: string, notes: string)
IncidentCharacteristic(characteristic: string, incident_id: integer)
Gun(id: integer, type: string, stolen: boolean, incident_id: integer)
Location(latitude: double, longitude: double, city_or_county: string, state: string, state_house_district: integer, state_senate_district: integer, congressional_district: integer)
Participant(id: integer, name: string, age: integer, gender: string, type: string, relationship: string, status: string, incident_id: integer)
-add spinners
-add (additional, not included in deliverable) area graph
-allow users to customize graphs
Data visualizations page (+ Google Maps widget)
Rankings page
Data deep-dive tool
Should have a form the user can fill out to request data from the DB, which should then render a list of "cards" with info about each gun crime.
Mockups:
Requirements:
List
component with pagination.Write scripts to extract the following entities out of the main CSV:
Incident(id: integer, i_date: date, latitude: number, longitude: number, n_killed: integer, n_injured: integer, n_guns_involved: int, source_url: string, notes: string)
IncidentCharacteristic(characteristic: string, incident_id: integer)
Gun(id: integer, type: string, stolen: boolean, incident_id: integer)
Location(latitude: double, longitude: double, city_or_county: string, state: string, state_house_district: integer, state_senate_district: integer, congressional_district: integer)
Participant(id: integer, name: string, age: integer, gender: string, type: string, relationship: string, status: string, incident_id: integer)
Get css/jsx working
When you click a card in the deep dive tool, it opens a modal that loads specific information for that crime. This is for performance reasons since it's not realistic to retrieve that information as part of one big query.
The boilerplate is there, but I'll need to clean things up and make sure the information is displaying nicely in the modal.
This is the last remaining task for the deep dive tool.
Feature: An integrated Google Maps widget that allows the user to select a year; it should plot icons on the map for all gun crimes that occurred within that year. This can be done using a Slider component:
https://ant.design/components/slider/#components-slider-demo-show-tooltip
Mockup:
Related package: https://www.npmjs.com/package/google-map-react
Notes: It works like a charm in a toy app. Only concern is that this might get laggy in our app. I guess we'll see.
See the existing boilerplate in server/
for a User
entity.
Incident(id: integer, details_url: string, location_id: integer, date: date, n_killed: integer, n_injured: integer)
IncidentCharacteristic(characteristic: string, incident_id: integer)
Gun(id: integer, type: string, stolen: boolean, incident_id: integer)
Location(latitude: double, longitude: double, city_or_county: string, state: string, state_house_district: integer, state_senate_district: integer)
Participant(id: integer, name: string, age: integer, gender: string, type: string, relationship: string, status: string, incident_id: integer)
-let users pick which graphs they want to see
-finish rankings page
-update colors
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.