H517 Project 1: Replication of Dr. John Snow's Cholera Epidemic Map

Relevant/Useful Links:

1. https://khreda.com/teaching/2020/H517/project1/
2. https://en.wikipedia.org/wiki/1854_Broad_Street_cholera_outbreak
3. https://dev.to/yuribenjamin/how-to-deploy-react-app-in-github-pages-2a1f

Purpose:

As per Dr. Rada: In this project, you will recreate Dr. John Snow's map using today's tools of trade (D3, to be specific). In addition to recreating the original map in an interactive version, you will add additional charts to the side of the map, as well as interface elements to make the data more interactive.

Deliverables:

Documentation and deliverables For your project deliverables, you will create a set of public web pages:

• 1 page for the visualization itself: This should be a live, interactive version of the visualization you created. It is important that the visualization works in the Chrome web browser - this is the platform that we will be using for evaluating your work.
• 1 documentation page that describes your work and documents the following:
  • Your design process: How did you go about designing the visualization? What are some of the initial designs / ideas you attempted in the beginning? A good way to document your design process is to scan your sketches and include them in the documentation page.
  • Rationale of your design choices: This should be a rigorous explanation of the design choices you made. For example, why did you use color to encode a particular variable? Why did you arrange your charts in a particular way?
  • Describe how you used your visualizations to discover facts or answer questions you had. Include evidence to support your findings as screenshots from the visualization. In this case, we have a clear hypothesis to start with, but are there other nuggets of insights one can uncover?
• A 2-4 minutes YouTube video showing the use of your visualization with narration. This video should be embedded in your documentation page. The video should be created using a screen-capture tool while interacting with the visualization. It should ideally be similar in style to the videos that accompany papers at the IEEE VIS or ACM CHI conferences. Here are a couple of good examples: https://www.youtube.com/watch?v=-IfF2wGw7Qk, and https://www.youtube.com/watch?v=AtbIeCvB-E0

The web pages should be live online, and your submission should consist of a single URL. The URL should open with the visualization itself. However, there should be a clearly visible link to the documentation page and the YouTube video.

Toolset:

• React JS
• D3
• React-Markdown
• gh-pages
• node-sass
• ReactPlayer

Key Commands

1. npm start
   • launches development server
2. npm run deploy
   • deploys to github pages