https://github.com/mehassanhmood/johnsnow-cholerascrolly

Scrolly Telling and Significance of data oriented approach
https://github.com/mehassanhmood/johnsnow-cholerascrolly

chakra-ui framer-motion python react vite

Last synced: 12 days ago
JSON representation

Scrolly Telling and Significance of data oriented approach

• Host: GitHub
• URL: https://github.com/mehassanhmood/johnsnow-cholerascrolly
• Owner: mehassanhmood
• Created: 2024-10-22T06:58:22.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-11-12T22:36:26.000Z (3 months ago)
• Last Synced: 2024-12-05T16:18:13.677Z (2 months ago)
• Topics: chakra-ui, framer-motion, python, react, vite
• Language: JavaScript
• Homepage: https://mehassanhmood.github.io/JohnSnow-CholeraScrolly/
• Size: 2.76 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# John Snow Cholera Map: Scrolly-Telling Project

A data-driven storytelling project recreating John Snow’s famous cholera map, built using scrolly-telling techniques. This project brings to life the historical data of London's 1854 cholera outbreak, providing an interactive experience to explore the impact of Snow's work. 

## Table of Contents

- [Overview](#overview)

- [Demo](#demo)

- [Features](#features)

- [Tech Stack](#tech-stack)

- [Setup & Installation](#setup--installation)

---

## Overview

This project is a modern, interactive tribute to John Snow's pioneering work in epidemiology. By utilizing data storytelling, animations, and visualizations, users can scroll through an interactive timeline, observing how Snow's meticulous data collection and visualization helped pinpoint the source of the cholera outbreak in Soho, London.

## Demo

Check out the live version of the project [here](https://mehassanhmood.github.io/JohnSnow-CholeraScrolly/).

## Features

- **Scrolly-telling Experience:** As users scroll, key events and data points from the 1854 cholera outbreak are revealed in sequence, guiding the user through Snow's discoveries.

- **Animated Map Visualizations:** An interactive map highlights areas affected by cholera, with animations showing water pump locations and case clusters.

- **Responsive Design:** Ensures an optimal experience on both desktop and mobile devices.

- **Historical Data Wrangling:** Python scripts are used for cleaning and structuring historical cholera outbreak data.

## Tech Stack

- **Frontend:** React, Chakra UI for component styling, Framer Motion for animations

- **Backend Data Processing:** Python for data wrangling and preparation

- **Deployment:** GitHub Pages for hosting

## Setup & Installation

### Prerequisites

- Node.js

- Python 3.x (for data wrangling)

### Installation

1. **Clone the repository**

```bash

    git clone https://github.com/mehassanhmood/JohnSnow-CholeraScrolly.git

    cd JohnSnow-CholeraScrolly

```

2. **Install Dependencies**

```bash

    npm install

```

3. **Run the app**

```bash

    npm run dev

```