This project visualizes CSV data on a map using Leaflet and D3.js to create comparative charts. The data includes gun violence incidents, bike racks, and car crashes in Chicago wards.

• Interactive Map: Displays data points for bike racks, gun violence incidents, and car crashes on a map of Chicago using Leaflet.
• Clustered Markers: Uses marker clustering for better visualization of densely populated data points.
• Popup Information: Each data point on the map displays detailed information in a popup when clicked.
• Comparative Charts: Creates bar charts comparing the number of incidents, bike racks, and car crashes per ward using D3.js.

1. Include Dependencies:

   • Leaflet CSS and JS for interactive maps.
   • Leaflet MarkerCluster for clustering markers on the map.
   • PapaParse for parsing CSV data.
   • D3.js for creating charts.

2. HTML Structure:

   • A div with id map to display the map.
   • A div with id chart to display the charts.

3. JavaScript Functionality:

   • Initialize the map centered on Chicago with Leaflet.
   • Define custom icons for bike racks, gun violence, and car crashes.
   • Create marker clusters for each data type.
   • Fetch and parse CSV data for bike racks, gun violence incidents, and car crashes using PapaParse.
   • Plot the data on the map and aggregate data for each ward.
   • Create bar charts comparing the number of incidents, bike racks, and car crashes per ward using D3.js.

1. Load CSV Data:

   • Ensure CSV files (bike-racks.csv, Gun_Violence_Data_with_Wards.csv, and filtered_car_crash_data_2019_cleaned_v2.csv) are placed in the CSV directory.

2. Run the HTML File:

   • Open the HTML file in a web browser. The map will load with clustered markers, and the charts will be generated below the map.

3. Interacting with the Map:

   • Click on any marker to view detailed information about the data point.
   • The clusters will expand to show individual markers on zooming in.

You can access the project hosted on GitHub here.