cis4301-project-university-of-florida / u.s.-gun-crime Goto Github PK

• 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).

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.

• Add incident characteristics
• Display information/fields more cleanly

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)

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)

• Data visualizations page (+ Google Maps widget)

• Rankings page

• Data deep-dive tool

Get css/jsx working

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:

• Form with information dynamically populated from the DB for various selections:
  • Incident
  • Location
  • Gun
  • Participant
• Aggregate statistics at a glance section (e.g., average/max number killed, etc.)
• Gun crime results section
  • Display material cards with information pulled from the DB
  • Optimize list rendering using Ant Design's List component with pagination.

-add spinners
-add (additional, not included in deliverable) area graph
-allow users to customize graphs

Relevant tutorials and documentation:

• https://expressjs.com/en/guide/database-integration.html#oracle

• https://www.freecodecamp.org/news/how-to-make-create-react-app-work-with-a-node-backend-api-7c5c48acb1b0/

Required server packages (install with yarn):

• oracledb

• @types/oracledb

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:

• CISE Oracle username
• CISE Oracle password
• Database connect string (oracle.cise.ufl.edu/orcl)

And of course, be sure to copy them over to your actual env/ folder (gitignored).

Mockup:

Note: The data in the table above are not accurate. They are merely placeholders.

Charts/graphs with various data visualizations. Here are the corresponding mockups from Deliverable 2:

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.

-let users pick which graphs they want to see
-finish rankings page
-update colors

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)