Skip to content

Latest commit

 

History

History
63 lines (40 loc) · 2.66 KB

README.md

File metadata and controls

63 lines (40 loc) · 2.66 KB
Raw

USA Crime Rate Visualization Project

This project visualizes crime rates across the USA using a React component with Vite for the build setup. The map displays state-level crime data with interactive features, including tooltips, dynamic category selection, and animated markers.

Features

  • Interactive Map: Hover over states to view detailed crime rate information via tooltips.
  • Dynamic Data Filtering: Filter crime data by category and limits.
  • Animated Markers: Pulsing dots and connecting lines represent crime data visually.
  • Responsive Design: The map and dashboard adapt to different screen sizes using Tailwind CSS.

Technologies Used

  • React: For building the user interface.
  • Vite: For fast build and development setup with Hot Module Replacement (HMR).
  • Tailwind CSS: For styling the application with a modern and responsive layout.
  • D3.js: For creating data-driven visualizations.
  • Material-UI (MUI): For additional UI components like tooltips.
  • Framer Motion: For adding animations to the markers.

Usage

  • View Crime Data: Hover over states to see crime rates in tooltips.
  • Filter Data: Use the dropdown to select different crime categories.
  • Adjust Limits: Click on the limit buttons to adjust the data visualization based on predefined crime rate limits.

Project Structure

  • src/components: Contains the main React components for the map and dashboard.
  • src/icons: Custom icons for fixed sections.
  • src/.json: JSON files with crime data and GeoJSON for the map.
  • src/pages: Main pages of application.

Customization

  • Tailwind CSS: Modify tailwind.config.js to adjust the styling.
  • Crime Data: Update the JSON files in src/.json with new or additional data.
  • Map Features: Adjust the D3.js code in the map component for custom visualizations.

Contributing

Contributions are welcome! Please fork the repository and submit a pull request with your changes.

License

This project is licensed under the MIT License. See the LICENSE file for details.

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

Author

Metin Isakhanli - LinkedIn

Feel free to reach out if you have any questions or need further assistance!