{"id":15760466,"url":"https://github.com/ezrahsieh/narrativevisualization","last_synced_at":"2026-04-28T20:03:30.646Z","repository":{"id":250424917,"uuid":"834412642","full_name":"EzraHsieh/NarrativeVisualization","owner":"EzraHsieh","description":"This project is an interactive narrative visualization designed to illustrate the impact of the COVID-19 pandemic on global life expectancy. The visualization is implemented using D3.js and follows the Martini glass narrative structure. This serves as the final project for CS416 at UIUC.","archived":false,"fork":false,"pushed_at":"2024-07-29T23:50:52.000Z","size":150,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-31T09:18:50.568Z","etag":null,"topics":["d3","data-visualization","interactive-visualizations","javascript","narrative-visualization"],"latest_commit_sha":null,"homepage":"https://ezrahsieh.github.io/NarrativeVisualization/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/EzraHsieh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-27T07:32:20.000Z","updated_at":"2024-07-29T23:50:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"6bcb7250-141c-4513-a5ba-61d3acaa4fa1","html_url":"https://github.com/EzraHsieh/NarrativeVisualization","commit_stats":null,"previous_names":["ezrahsieh/narrativevisualization"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/EzraHsieh/NarrativeVisualization","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EzraHsieh%2FNarrativeVisualization","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EzraHsieh%2FNarrativeVisualization/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EzraHsieh%2FNarrativeVisualization/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EzraHsieh%2FNarrativeVisualization/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EzraHsieh","download_url":"https://codeload.github.com/EzraHsieh/NarrativeVisualization/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EzraHsieh%2FNarrativeVisualization/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32396781,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-28T19:38:08.556Z","status":"ssl_error","status_checked_at":"2026-04-28T19:37:55.688Z","response_time":56,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["d3","data-visualization","interactive-visualizations","javascript","narrative-visualization"],"created_at":"2024-10-04T10:58:23.082Z","updated_at":"2026-04-28T20:03:30.616Z","avatar_url":"https://github.com/EzraHsieh.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# COVID-19 and Life Expectancy\n\nThis project, [\"COVID-19 and Life Expectancy,\"](https://ezrahsieh.github.io/NarrativeVisualization/) is an interactive narrative visualization designed to illustrate the impact of the COVID-19 pandemic on global life expectancy. The visualization is implemented using D3.js and follows the Martini glass narrative structure to guide the audience through a focused story before allowing them to explore the data further.\n\n## Overview\n\nThe visualization consists of three main scenes:\n1. **Global Life Expectancy Over Time:** This scene shows the general trend of life expectancy across the world, highlighting the increase over the years and the slight drop following the COVID-19 pandemic.\n2. **Decrease in Life Expectancy by Region (2019-2020):** This scene focuses on the impact of COVID-19 on different regions, displaying the decrease in life expectancy between 2019 and 2020.\n3. **Life Expectancy over Time by Country:** This interactive scene allows users to explore life expectancy trends for specific countries, providing a detailed view of the data.\n\n## Narrative Visualization Techniques\n\n### 1. Messaging\n\nThe primary message of this visualization is to convey the significant impact of COVID-19 on life expectancy globally and regionally. It shows both the overall increasing trend in life expectancy and the disruptions caused by the pandemic.\n\n### 2. Narrative Structure\n\nThis project follows the **Martini glass** narrative structure:\n- **Guided Narrative:** The first two scenes present a guided story, leading the viewer through key points with minimal interaction.\n- **Exploration:** The final scene allows users to explore the data more deeply, selecting specific countries to view detailed trends.\n\n### 3. Visual Structure\n\nEach scene maintains a consistent visual structure for clarity:\n- **Line and Bar Charts:** Used to represent data trends and regional comparisons effectively.\n- **Annotations:** Key data points are annotated to highlight significant events, such as the start of the COVID-19 pandemic.\n\n### 4. Scenes\n\nThe visualization is divided into three scenes:\n- **Scene 1:** A line graph of global life expectancy over time.\n- **Scene 2:** A bar chart showing the decrease in life expectancy by region from 2019 to 2020.\n- **Scene 3:** A line graph of life expectancy over time for selected countries.\n\n### 5. Annotations\n\nAnnotations are used to emphasize critical points in the data:\n- **Scene 1:** Highlights the start of the COVID-19 pandemic in 2019.\n- **Scene 3:** Similar annotations are used for each country to maintain consistency.\n\n### 6. Parameters\n\nThe key parameters include:\n- **Selected Year Range:** Defines the years displayed in the charts.\n- **Selected Country:** Determines which country's data is shown in the third scene.\n- **Current Scene:** Tracks the currently displayed scene.\n\n### 7. Triggers\n\nUser interactions drive changes in the visualization:\n- **Next/Previous Buttons:** Navigate between scenes.\n- **Country Dropdown:** Filters data for the selected country in the third scene.\n\n## Usage\n\n- **Go to Website**: https://ezrahsieh.github.io/NarrativeVisualization/\n\n- **Next/Previous Buttons:** Use these buttons to navigate through the scenes.\n- **Country Dropdown:** Select a country to view its life expectancy trends in the third scene.\n\n## Dependencies\n\n- **D3.js:** For creating the visualizations.\n- **d3-annotation:** For adding annotations to the charts.\n\n## License\n\nThis project is licensed under the MIT License.\n\n## Acknowledgements\n\n- The data used in this project is sourced from the World Health Organization (WHO).\n- Inspiration and guidance were drawn from various D3.js tutorials and examples.\n\n---\n\nBy following this README, users should be able to understand the purpose and structure of the project, as well as how to set it up and interact with the visualizations.\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fezrahsieh%2Fnarrativevisualization","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fezrahsieh%2Fnarrativevisualization","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fezrahsieh%2Fnarrativevisualization/lists"}