init

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

ASSIGNMENT.md

@@ -0,0 +1,368 @@
+
+# Portfolio Project: Data Visualization Portfolio
+
+**Total Points:** 35 + 5 bonus  
+**Submission:** ZIP archive with index.html, relevant data sources + Video presentation (5-7 minutes)
+Optionally: a website published on github pages (not graded)
+
+
+---
+
+## TL;DR - Quick Overview
+
+**Portfolio with minimum 5 visualizations exploring a unified theme**
+
+**Submit by Week 8:**
+- ZIP file with `index.html`, datasets, and `VIDEO_LINK.txt`
+- 5-7 minute video presentation
+
+**Must demonstrate:**
+- Clear analytical questions (data/task abstraction)
+- Justified chart choices and visual encodings
+- Professional documentation (titles, labels, legends, sources)
+- Sophisticated techniques (interactivity OR layers OR multiple views)
+- Coherent narrative connecting all visualizations
+
+**Grade:** 35 points across 5 categories + optional 5-point live presentation bonus
+
+**Tools:** Any visualization tool (Tableau, Vega-Lite, Python, R, D3.js, etc.)
+
+**Data:** Use your own datasets or public data - NOT instructor-provided assignment datasets
+
+**Key checklist:** Each visualization needs meaningful title, source citation, proper labels, appropriate color use, and at least one sophisticated element (interactive/layered/concatenated)
+
+*📖 Read below for complete requirements, grading rubric, and submission details*
+
+---
+## Assignment Overview
+
+Create a portfolio of data visualizations that demonstrates your mastery of the principles learned throughout this course. Your portfolio should showcase your ability to transform data into clear, effective visual communication.
+
+**Core Philosophy:** We value well-crafted, sophisticated visualizations that clearly convey useful information. Quality and depth matter more than quantity.
+
+---
+
+## What You Need To Do
+
+Create a portfolio containing **minimum 5 visualizations** that demonstrate your understanding of:
+
+- Data and task abstraction (Munzner's framework from Week 2)
+- Visual encoding principles
+- Chart selection and design rationale
+- Color theory and accessibility
+- Technical implementation skills
+
+**Submit:**
+
+1. **ZIP archive** (`Portfolio_[LastName]_[FirstName].zip`) containing:
+    
+    - `index.html` (your portfolio - template provided)
+    - All datasets referenced in your visualizations
+    - AI usage documentation (if applicable - see policy below)
+
+2. **Video presentation** (5-7 minutes):
+    - Walkthrough of your portfolio
+    - Highlight key visualizations and design decisions
+    - Discuss what you learned
+    - Upload to YouTube/Google Drive and **embed link in your index.html**
+
+---
+
+## Technical Requirements
+
+### Dataset Requirements
+
+**❌ Prohibited:**
+
+- Instructor-provided datasets from assignments (Bikeshare, World Energy, OWID Population)
+- Default tutorial datasets (vega-datasets, Tableau samples, Iris, Titanic, etc.)
+
+**✅ Allowed:**
+
+- Datasets YOU brought to previous assignments (reuse is fine)
+- Makeover Monday datasets not used in class
+- Your own research/work data
+- Government open data portals
+- Kaggle datasets (non-tutorial)
+- Domain-specific professional datasets
+
+**You may reuse your own previous assignment work IF you brought your own data.**
+
+**All data sources must be cited with links where possible.**
+
+### Tools & Technologies
+
+**You have complete freedom** to use any visualization tool(s):
+
+- Vega-Lite (learned in class)
+- Tableau Public (learned in class)
+- Python libraries (Altair, Matplotlib, Plotly, etc.)
+- R (ggplot2, etc.)
+- D3.js, Observable notebooks
+- Any other professional visualization tools
+
+**Tool choice does NOT affect grading.** Mastery of one tool is equally valid as using multiple tools. Use what works best for your visualizations.
+
+**Critical requirement:** Source code must be available. For Tableau, visualizations must be published in YOUR Tableau Public account (not mine, not a classmate's).
+
+### Refining Previous Work
+
+You may include enhanced work from Assignments 2-4, IF:
+
+- You brought your own dataset (not instructor-provided data)
+- You've significantly improved it: new analytical question, different chart type, added interactivity/layers, substantially better documentation
+
+Simply resubmitting assignment work with minor label changes will not earn full credit.
+
+---
+
+## Visualization Quality Checklist
+
+**Every visualization must include (or explicitly explain why not applicable):**
+
+✅ **Meaningful title** - Not "Chart 1" but "GDP Growth Rates in Eastern Europe, 2010-2020"
+
+✅ **Source citation** - Where the data came from, with link if possible
+
+✅ **Appropriate labels** - Axis labels, value labels where needed, units specified
+
+✅ **Legends when necessary** - If using color/size/shape encoding, provide legend
+
+✅ **Appropriate use of color** - Color is used meaningfully and corresponds to the data type (categorical / sequential / diverging / highlight)
+
+✅ **At least ONE of these:**
+
+- **Interactive elements** (filters, tooltips, brushing/linking)
+- **Layered marks** (multiple mark types composed together)
+- **Concatenated views** (small multiples, hconcat/vconcat, or dashboard composition)
+
+**If any checklist item doesn't apply to your visualization, you must explain why in your documentation.**
+
+Example: "No legend needed because color encodes the same information shown on the x-axis labels."
+
+---
+
+## Portfolio Structure
+
+We've provided a template HTML file (see course materials). Your portfolio should include:
+
+### Introduction Section (3-5 sentences)
+
+Explain your portfolio theme - the common question or domain you're exploring. This is required for full points.
+
+**A "theme" means:** A common question or domain explored through multiple visualizations.
+
+**Good themes:**
+
+- "Economic inequality in Ukraine" - 5 visualizations exploring different dimensions
+- "My company's user behavior" - 5 visualizations answering related business questions
+- "Climate change impacts" - 5 visualizations showing different evidence
+
+**Not a theme:**
+
+- 5 random visualizations on unrelated topics
+- "Visualizations I made for class" without connecting narrative
+
+### For EACH Visualization:
+
+1. **Context & Question** (1-2 sentences)
+    - What analytical question does this address?
+    - Why is this question important?
+2. **Design Decisions** (2-3 sentences)
+    - Chart type selection and rationale
+    - Visual encoding choices (position, color, size, etc.)
+    - What alternatives did you consider and why did you choose this approach?
+    - What are the strengths and tradeoffs of your choice?
+3. **The Visualization Itself**
+    - Must render and work properly
+    - Must meet quality checklist (or explain exceptions)
+4. **Key Insights** (2-3 sentences)
+    - What patterns, trends, or outliers did you discover?
+    - What should viewers take away from this visualization?
+5. **Data Source Citation**
+    - Where did the data come from?
+    - Include links if possible
+
+---
+
+## Grading Rubric (35 points)
+
+### Technical Execution (10 points)
+
+**All visualizations render correctly, proper tool usage, source code available**
+
+- **10 pts:** Perfect execution, no errors
+- **8 pts:** Minor issues (one viz loads slowly, small formatting glitch)
+- **6 pts:** Multiple problems affecting experience
+- **<6 pts:** Significant technical failures
+
+**Source code requirement:** For Tableau, visualizations must be in YOUR Tableau Public account. For code-based tools, include specifications in your HTML. (you can use LLMs  to aid if not sure about how to format code in HTML)
+
+### Theoretical Understanding (10 points)
+
+**Data/Task Abstraction (5 pts):** Clear analytical questions, appropriate data transformations
+
+**Design Rationale (5 pts):** Justified chart selections, discussion of alternatives and tradeoffs, addresses "why this chart type?"
+
+### Visual Communication (5 points)
+
+**Clarity & professional documentation**
+
+- Visualizations clearly convey useful information
+- Proper titles, labels, legends (per checklist)
+- All sources cited
+- Clean, professional presentation
+
+### Complexity & Polish (5 points)
+
+**Majority of visualizations meet the quality checklist**
+
+- **5 pts:** All 5+ visualizations meet checklist requirements
+- **4 pts:** 4 visualizations meet full checklist
+- **3 pts:** 3 visualizations meet full checklist
+- **<3 pts:** Fewer than 3 meet requirements
+
+### Coherent Portfolio Theme (5 points)
+
+**Portfolio tells a unified story**
+
+- **5 pts:** Clear theme, explicit connections between visualizations, coherent narrative in introduction
+- **3-4 pts:** Weak theme or connections not clearly articulated
+- **0-2 pts:** No discernible theme, random collection of visualizations
+
+---
+
+**Additional Deductions:**
+
+- Video >7 minutes: -2 points
+- Video <4 minutes: -2 points
+- Missing or inaccessible video: -5 points
+- Missing AI documentation (if AI was used): -5 points
+- Fewer than 5 visualizations: Up to -10 points depending on severity
+
+---
+
+## Bonus: Live Portfolio Presentation (+5 points)
+
+**Optional:** Present your portfolio live during Week 8 classes.
+
+**Requirements:**
+
+- 10-minute presentation + 5-minute Q&A
+- Must opt-in by **end of Week 7** via Slack
+- Present live (no pre-recorded videos)
+- Demonstrate your portfolio and discuss design choices
+
+**This is separate from the theme requirement.** The live presentation is a bonus opportunity for students who want to showcase their work and potentially recover points from earlier assignments.
+
+**Limited slots available** - first come, first served after opt-in.
+
+---
+
+## Video Presentation Requirements
+
+**Purpose:** The video serves as documentation of your work and ensures we can evaluate your portfolio even if technical rendering issues occur.
+**Duration:** 5-7 minutes (videos under 4 minutes or over 7 minutes will be penalized)
+
+**Content to cover:**
+
+1. **Introduction** (30-60 seconds): Your portfolio theme and approach
+2. **Visualization walkthrough** (3-5 minutes):
+    - You may highlight 2-3 key visualizations in depth, OR
+    - Briefly cover all 5+ visualizations
+    - Focus on design decisions and key insights
+3. **Reflection** (30-60 seconds): What you learned
+
+**Technical:** Upload to YouTube or Google Drive storage and **include the link prominently in your index.html** (for example, in the Introduction section or create a dedicated "Video Presentation" section at the top). 
+If uploading to Google Drive, **make sure to enable external access to your video!**
+
+
+---
+
+## Deployment to GitHub Pages (Optional)
+
+We provide instructions for deploying your portfolio to GitHub Pages, making it publicly accessible. **This is completely optional and NOT graded** - I recognize this is a data visualization course, not a web development course.
+
+Benefits of deploying:
+
+- Shareable portfolio link for your CV/LinkedIn
+- Professional online presence
+- Easy to show potential employers
+
+You can also run everything locally if you prefer. Deployment guide is provided separately in the repository.
+
+---
+
+## Submission Checklist
+
+Before submitting, verify:
+
+**Portfolio Content:**
+
+- [ ] Minimum 5 visualizations included
+- [ ] All visualizations render and work properly
+- [ ] Each visualization meets quality checklist (or explains why not)
+- [ ] Introduction section explains portfolio theme
+- [ ] Each visualization includes: Context, Design Decisions, Insights, Data Source
+- [ ] All data sources cited with links where possible
+
+**Technical Files:**
+
+- [ ] `index.html` file at root of archive
+- [ ] All referenced datasets included in archive
+- [ ] File named correctly: `Portfolio_[LastName]_[FirstName].zip`
+
+**Video Presentation:**
+
+- [ ] 5-7 minutes duration
+- [ ] Covers portfolio theme, key visualizations, and learnings
+- [ ] Link included in index.html
+
+**Documentation:**
+
+- [ ] AI usage documented if applicable (shared conversation links or PDFs)
+
+**Optional:**
+
+- [ ] Opted in for live presentation (by end of Week 7)
+- [ ] Deployed to GitHub Pages
+
+---
+
+## Academic Integrity & AI Usage
+
+### AI Tools Policy
+
+**All AI usage must be documented:**
+
+- Include links to shared LLM conversations, OR
+- Attach PDF exports of your conversations
+- Create a folder in your ZIP called `AI_Documentation` with these files
+
+**Make it trivial for graders to access your AI usage history.**
+
+**Remember:** AI can help with code syntax or brainstorming, but design decisions and analytical insights must reflect YOUR understanding of visualization principles.
+
+### Originality
+
+- Do not copy visualizations from online sources
+- Do not submit someone else's work
+- If reusing existing visualizations from previous assignments, document this clearly
+- Your analysis and design decisions must be your own
+
+---
+
+## Final Reminder
+
+**The goal isn't to impress with technical wizardry (though that's welcome).**
+
+**The goal is to demonstrate that you can:**
+
+- Transform data into clear, effective visual communication
+- Apply systematic design principles
+- Make justified choices about visual encodings
+- Reveal insights that tell compelling stories with evidence
+
+Your portfolio should show that you understand WHY certain visualizations work better than others, and that you can create professional-quality work that communicates effectively.
+
+Good luck, and we look forward to seeing your portfolios!

PUBLISHING.md

@@ -0,0 +1,113 @@
+# Publishing Your Portfolio Online (Optional)
+
+This guide shows you how to enable **GitHub Pages** to publish your portfolio online for free.
+
+⚠️ **Remember:** Publishing online is **NOT required** and **NOT graded** for the course. You can get full points by submitting the ZIP archive. This is completely optional!
+
+---
+
+## Why Publish Online?
+
+Once your portfolio is live on GitHub Pages, you can:
+- ✅ Share it with potential employers
+- ✅ Add the link to your CV/resume
+- ✅ Include it on your LinkedIn profile
+- ✅ Show it during job interviews
+- ✅ Share with friends and classmates
+
+**Your portfolio will be available at:**
+```
+https://your-username.github.io/repository-name/
+```
+
+---
+
+## Prerequisites
+
+Before enabling GitHub Pages:
+- ✅ Create a GitHub repository with your portfolio by copying this repository
+- ✅ Complete your portfolio (`index.html` and all assets)
+- ✅ Commit and push your changes to GitHub
+- ✅ Your repository must be **Public** (required for free GitHub Pages)
+
+---
+
+## Enabling GitHub Pages
+
+**Time needed:** 2-3 minutes
+
+### Step 1: Go to Your Repository Settings
+
+1. **Go to GitHub** and navigate to your forked repository:
+   ```
+   https://github.com/your-username/repository-name
+   ```
+
+2. **Click** the "Settings" tab (top menu bar)
+
+---
+
+### Step 2: Configure GitHub Pages
+
+1. **In the left sidebar**, click **"Pages"**
+   - Look under the "Code and automation" section
+
+2. **Under "Source":**
+   - Select **"Deploy from a branch"**
+
+3. **Under "Branch":**
+   - Select **`main`** from the dropdown
+   - Select **`/ (root)`** from the folder dropdown
+
+4. **Click "Save"**
+
+---
+
+### Step 3: Wait for Deployment
+
+1. **Wait 1-2 minutes** for GitHub to build and deploy your site
+
+2. **Refresh the page**
+
+3. You'll see a message at the top:
+   ```
+   Your site is live at https://your-username.github.io/repository-name/
+   ```
+
+4. **Click the link** to view your live portfolio!
+
+---
+
+## That's It!
+
+Your portfolio is now published online. Every time you push changes to GitHub, your site will automatically update in 1-2 minutes.
+
+---
+
+## Updating Your Published Portfolio
+
+After you make changes locally:
+
+1. **Commit your changes** in GitHub Desktop or via command line
+2. **Push to GitHub**
+3. **Wait 1-2 minutes** - GitHub Pages will automatically rebuild
+4. **Refresh your portfolio URL** to see the updates
+
+**No need to touch the Pages settings again!** It's all automatic after the initial setup.
+
+---
+
+## ❓ Questions?
+
+If you're having trouble with GitHub Pages:
+
+1. **Ask in course Slack channel** - classmates might have solved the same issue
+2. **Contact instructor:** Oleh Omelchenko
+
+
+---
+
+## 📚 Additional Resources
+
+- [GitHub Pages Documentation](https://docs.github.com/en/pages)
+- [GitHub Pages Deployment Guide](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site)

README.md

@@ -0,0 +1,76 @@
+# Data Visualization Portfolio - Quick Start Guide
+
+This is a quick-start guide to help you get started with the portfolio template.
+
+**📖 For complete requirements, grading rubric, and detailed instructions, see `ASSIGNMENT.md`**
+
+## 📋 Quick Overview
+
+**What to submit by Week 8:**
+- ZIP archive with `index.html`, datasets, and AI documentation (if applicable)
+- 5-7 minute video presentation (link embedded in your portfolio)
+
+**What to create:**
+- Portfolio with minimum 5 visualizations exploring a unified theme
+- Each visualization needs context, design rationale, insights, and source citation
+
+**File naming:** `Portfolio_[LastName]_[FirstName].zip`
+
+---
+
+## 🚀 Quick Start (3 Steps)
+
+### Step 1: Get the Template
+- Download or clone this repository to your computer
+- Open the folder in VS Code (or your preferred editor)
+
+### Step 2: Edit `index.html`
+- Replace all `[placeholders]` with your content
+- Add your visualizations (examples for Vega-Lite, Tableau, and images included)
+- Test by opening `index.html` in your browser
+
+### Step 3: Submit
+- Create ZIP: `Portfolio_[LastName]_[FirstName].zip`
+- Include: `index.html`, all datasets, AI documentation (if applicable)
+- Submit by Week 8
+
+---
+
+## 💡 How to Use the Template
+
+### Adding Visualizations
+
+The template includes **3 examples** you can copy:
+
+1. **Vega-Lite:** Find `<script>` with `var spec1 = {...}`, replace with your spec
+2. **Tableau Public:** Publish to YOUR account, get embed code, paste into HTML
+3. **Python/R/Images:** Export as PNG/SVG, save in same folder, use `<img>` tag
+
+**Add more:** Copy an entire `<article>` block and modify it
+
+### What to Include for Each Visualization
+
+The template has placeholders for:
+- **Context & Question:** What are you exploring and why?
+- **Design Decisions:** Why this chart type? What encodings? What tradeoffs?
+- **Key Insights:** What did you discover?
+- **Data Source:** Where is the data from? (include link)
+
+**See `ASSIGNMENT.md` for detailed requirements and the visualization quality checklist**
+
+---
+
+## 🆘 Need Help?
+
+### Get Support
+**Oleh Omelchenko**
+- Slack (preferred for quick questions)
+- Office Hours: Wednesday 16:00-18:00, KSE Campus
+- Email: o_omelchenko@kse.org.ua
+
+---
+
+## 📚 Additional Resources
+
+- **`ASSIGNMENT.md`** - Complete requirements, grading rubric, and policies
+- **`PUBLISHING.md`** - Optional guide for publishing to GitHub Pages (not graded)

assets/city-population.csv

@@ -0,0 +1,541 @@
+Entity,Year,"population","pop_projected"
+Bangalore,1950,0.745999,
+Bangalore,1955,0.939396,
+Bangalore,1960,1.165978,
+Bangalore,1965,1.377314,
+Bangalore,1970,1.614756,
+Bangalore,1975,2.110599,
+Bangalore,1980,2.812428,
+Bangalore,1985,3.397214,
+Bangalore,1990,4.042598,
+Bangalore,1995,4.754228,
+Bangalore,2000,5.581263,
+Bangalore,2005,6.785901,
+Bangalore,2010,8.295564,
+Bangalore,2015,10.14108,
+Bangalore,2020,,12.326532
+Bangalore,2025,,14.395443
+Bangalore,2030,,16.226826
+Bangalore,2035,,18.065541
+Beijing,1950,1.671365,
+Beijing,1955,2.364625,
+Beijing,1960,3.900441,
+Beijing,1965,4.582017,
+Beijing,1970,4.426045,
+Beijing,1975,4.827973,
+Beijing,1980,5.366372,
+Beijing,1985,6.017488,
+Beijing,1990,6.787737,
+Beijing,1995,8.355148,
+Beijing,2000,10.285091,
+Beijing,2005,12.991292,
+Beijing,2010,16.441252,
+Beijing,2015,18.421198,
+Beijing,2020,,20.46261
+Beijing,2025,,22.596455
+Beijing,2030,,24.281913
+Beijing,2035,,25.36592
+Bogota,1950,0.630315,
+Bogota,1955,0.894187,
+Bogota,1960,1.268645,
+Bogota,1965,1.779758,
+Bogota,1970,2.383425,
+Bogota,1975,3.040465,
+Bogota,1980,3.525154,
+Bogota,1985,4.086775,
+Bogota,1990,4.740448,
+Bogota,1995,5.488071,
+Bogota,2000,6.329384,
+Bogota,2005,7.299095,
+Bogota,2010,8.417705,
+Bogota,2015,9.707746,
+Bogota,2020,,10.97836
+Bogota,2025,,11.795829
+Bogota,2030,,12.343364
+Bogota,2035,,12.753324
+Buenos Aires,1950,5.16614,
+Buenos Aires,1955,5.910271,
+Buenos Aires,1960,6.761837,
+Buenos Aires,1965,7.548511,
+Buenos Aires,1970,8.41617,
+Buenos Aires,1975,9.143219,
+Buenos Aires,1980,9.919781,
+Buenos Aires,1985,10.523442,
+Buenos Aires,1990,11.147566,
+Buenos Aires,1995,11.806407,
+Buenos Aires,2000,12.503871,
+Buenos Aires,2005,13.32954,
+Buenos Aires,2010,14.245871,
+Buenos Aires,2015,14.705533,
+Buenos Aires,2020,,15.153729
+Buenos Aires,2025,,15.752275
+Buenos Aires,2030,,16.456115
+Buenos Aires,2035,,17.127741
+Cairo,1950,2.493514,
+Cairo,1955,3.029198,
+Cairo,1960,3.68016,
+Cairo,1965,4.737968,
+Cairo,1970,5.584507,
+Cairo,1975,6.449922,
+Cairo,1980,7.348778,
+Cairo,1985,8.328255,
+Cairo,1990,9.892143,
+Cairo,1995,11.961986,
+Cairo,2000,13.625565,
+Cairo,2005,15.17405,
+Cairo,2010,16.899015,
+Cairo,2015,18.820072,
+Cairo,2020,,20.900604
+Cairo,2025,,23.074225
+Cairo,2030,,25.516696
+Cairo,2035,,28.504351
+Chongqing,1950,1.566966,
+Chongqing,1955,1.913248,
+Chongqing,1960,2.275158,
+Chongqing,1965,2.188064,
+Chongqing,1970,2.237344,
+Chongqing,1975,2.544566,
+Chongqing,1980,2.9614,
+Chongqing,1985,3.44623,
+Chongqing,1990,4.010602,
+Chongqing,1995,5.615367,
+Chongqing,2000,7.862976,
+Chongqing,2005,9.454076,
+Chongqing,2010,11.243667,
+Chongqing,2015,13.372015,
+Chongqing,2020,,15.872179
+Chongqing,2025,,18.171198
+Chongqing,2030,,19.649097
+Chongqing,2035,,20.531266
+Delhi,1950,1.369369,
+Delhi,1955,1.781624,
+Delhi,1960,2.282962,
+Delhi,1965,2.845042,
+Delhi,1970,3.530693,
+Delhi,1975,4.436385,
+Delhi,1980,5.587014,
+Delhi,1985,7.225758,
+Delhi,1990,9.384209,
+Delhi,1995,12.138233,
+Delhi,2000,15.691899,
+Delhi,2005,18.69133,
+Delhi,2010,21.987895,
+Delhi,2015,25.865875,
+Delhi,2020,,30.290936
+Delhi,2025,,34.665569
+Delhi,2030,,38.938697
+Delhi,2035,,43.345059
+Dhaka,1950,0.33576,
+Dhaka,1955,0.408866,
+Dhaka,1960,0.507921,
+Dhaka,1965,0.82074,
+Dhaka,1970,1.373718,
+Dhaka,1975,2.221055,
+Dhaka,1980,3.265663,
+Dhaka,1985,4.660384,
+Dhaka,1990,6.620697,
+Dhaka,1995,8.332474,
+Dhaka,2000,10.284947,
+Dhaka,2005,12.330879,
+Dhaka,2010,14.730537,
+Dhaka,2015,17.597177,
+Dhaka,2020,,21.00586
+Dhaka,2025,,24.652864
+Dhaka,2030,,28.07566
+Dhaka,2035,,31.233651
+Guangzhou,1950,1.048975,
+Guangzhou,1955,1.155063,
+Guangzhou,1960,1.271914,
+Guangzhou,1965,1.400511,
+Guangzhou,1970,1.542151,
+Guangzhou,1975,1.698116,
+Guangzhou,1980,1.869905,
+Guangzhou,1985,2.355566,
+Guangzhou,1990,3.245991,
+Guangzhou,1995,5.035339,
+Guangzhou,2000,7.812008,
+Guangzhou,2005,9.055056,
+Guangzhou,2010,10.278197,
+Guangzhou,2015,11.694882,
+Guangzhou,2020,,13.301532
+Guangzhou,2025,,14.878691
+Guangzhou,2030,,16.024165
+Guangzhou,2035,,16.740973
+Istanbul,1950,0.967497,
+Istanbul,1955,1.248709,
+Istanbul,1960,1.453353,
+Istanbul,1965,2.001192,
+Istanbul,1970,2.772095,
+Istanbul,1975,3.600332,
+Istanbul,1980,4.397037,
+Istanbul,1985,5.407297,
+Istanbul,1990,6.55216,
+Istanbul,1995,7.665403,
+Istanbul,2000,8.743868,
+Istanbul,2005,10.465694,
+Istanbul,2010,12.584885,
+Istanbul,2015,14.126772,
+Istanbul,2020,,15.190336
+Istanbul,2025,,16.236703
+Istanbul,2030,,17.12424
+Istanbul,2035,,17.986297
+Jakarta,1950,1.452,
+Jakarta,1955,1.972106,
+Jakarta,1960,2.67874,
+Jakarta,1965,3.296964,
+Jakarta,1970,3.915406,
+Jakarta,1975,4.813132,
+Jakarta,1980,5.984256,
+Jakarta,1985,7.00903,
+Jakarta,1990,8.174756,
+Jakarta,1995,8.321858,
+Jakarta,2000,8.389759,
+Jakarta,2005,8.988406,
+Jakarta,2010,9.625579,
+Jakarta,2015,10.173388,
+Jakarta,2020,,10.770487
+Jakarta,2025,,11.634078
+Jakarta,2030,,12.686756
+Jakarta,2035,,13.688321
+Karachi,1950,1.05538,
+Karachi,1955,1.419491,
+Karachi,1960,1.853325,
+Karachi,1965,2.405037,
+Karachi,1970,3.118723,
+Karachi,1975,3.989191,
+Karachi,1980,5.047815,
+Karachi,1985,6.032582,
+Karachi,1990,7.147064,
+Karachi,1995,8.467439,
+Karachi,2000,9.825295,
+Karachi,2005,11.131559,
+Karachi,2010,12.611924,
+Karachi,2015,14.28916,
+Karachi,2020,,16.093786
+Karachi,2025,,18.076794
+Karachi,2030,,20.431848
+Karachi,2035,,23.128137
+Kinshasa,1950,0.201905,
+Kinshasa,1955,0.292398,
+Kinshasa,1960,0.442853,
+Kinshasa,1965,0.717018,
+Kinshasa,1970,1.069714,
+Kinshasa,1975,1.48182,
+Kinshasa,1980,2.052874,
+Kinshasa,1985,2.811896,
+Kinshasa,1990,3.683274,
+Kinshasa,1995,4.824684,
+Kinshasa,2000,6.140419,
+Kinshasa,2005,7.589069,
+Kinshasa,2010,9.381673,
+Kinshasa,2015,11.597706,
+Kinshasa,2020,,14.342439
+Kinshasa,2025,,17.778474
+Kinshasa,2030,,21.914342
+Kinshasa,2035,,26.681825
+Kolkata,1950,4.604143,
+Kolkata,1955,5.219086,
+Kolkata,1960,5.91021,
+Kolkata,1965,6.589384,
+Kolkata,1970,7.329372,
+Kolkata,1975,8.165629,
+Kolkata,1980,9.100166,
+Kolkata,1985,10.003665,
+Kolkata,1990,10.974177,
+Kolkata,1995,11.992194,
+Kolkata,2000,13.097153,
+Kolkata,2005,13.595152,
+Kolkata,2010,14.002798,
+Kolkata,2015,14.42267,
+Kolkata,2020,,14.850066
+Kolkata,2025,,15.845219
+Kolkata,2030,,17.583604
+Kolkata,2035,,19.56417
+Lagos,1950,0.325218,
+Lagos,1955,0.46846,
+Lagos,1960,0.762418,
+Lagos,1965,1.135439,
+Lagos,1970,1.413528,
+Lagos,1975,1.889802,
+Lagos,1980,2.572218,
+Lagos,1985,3.500464,
+Lagos,1990,4.764093,
+Lagos,1995,5.98268,
+Lagos,2000,7.280706,
+Lagos,2005,8.859399,
+Lagos,2010,10.441182,
+Lagos,2015,12.239206,
+Lagos,2020,,14.368332
+Lagos,2025,,17.156393
+Lagos,2030,,20.600156
+Lagos,2035,,24.418768
+Lahore,1950,0.835769,
+Lahore,1955,1.021679,
+Lahore,1960,1.264277,
+Lahore,1965,1.574981,
+Lahore,1970,1.963951,
+Lahore,1975,2.398576,
+Lahore,1980,2.881596,
+Lahore,1985,3.387873,
+Lahore,1990,3.970161,
+Lahore,1995,4.652529,
+Lahore,2000,5.576372,
+Lahore,2005,6.856969,
+Lahore,2010,8.432132,
+Lahore,2015,10.369137,
+Lahore,2020,,12.642423
+Lahore,2025,,14.825828
+Lahore,2030,,16.883085
+Lahore,2035,,19.116605
+Los Angeles,1950,4.045514,
+Los Angeles,1955,5.154301,
+Los Angeles,1960,6.529638,
+Los Angeles,1965,7.407634,
+Los Angeles,1970,8.377685,
+Los Angeles,1975,8.925518,
+Los Angeles,1980,9.511568,
+Los Angeles,1985,10.181172,
+Los Angeles,1990,10.883429,
+Los Angeles,1995,11.33889,
+Los Angeles,2000,11.798345,
+Los Angeles,2005,11.977857,
+Los Angeles,2010,12.160151,
+Los Angeles,2015,12.345219,
+Los Angeles,2020,,12.446597
+Los Angeles,2025,,12.677559
+Los Angeles,2030,,13.209244
+Los Angeles,2035,,13.778153
+Manila,1950,1.543666,
+Manila,1955,1.871605,
+Manila,1960,2.273734,
+Manila,1965,2.828883,
+Manila,1970,3.534309,
+Manila,1975,4.999303,
+Manila,1980,5.954719,
+Manila,1985,6.88792,
+Manila,1990,7.972799,
+Manila,1995,9.401255,
+Manila,2000,9.957962,
+Manila,2005,10.750752,
+Manila,2010,11.887189,
+Manila,2015,12.860058,
+Manila,2020,,13.923452
+Manila,2025,,15.230559
+Manila,2030,,16.84134
+Manila,2035,,18.649422
+Mexico City,1950,3.365081,
+Mexico City,1955,4.293878,
+Mexico City,1960,5.479184,
+Mexico City,1965,6.969157,
+Mexico City,1970,8.830947,
+Mexico City,1975,10.73386,
+Mexico City,1980,13.02762,
+Mexico City,1985,14.278216,
+Mexico City,1990,15.642318,
+Mexico City,1995,17.017469,
+Mexico City,2000,18.457027,
+Mexico City,2005,19.276065,
+Mexico City,2010,20.136681,
+Mexico City,2015,21.339781,
+Mexico City,2020,,21.782378
+Mexico City,2025,,22.752414
+Mexico City,2030,,24.110599
+Mexico City,2035,,25.414624
+Moscow,1950,5.356392,
+Moscow,1955,5.748746,
+Moscow,1960,6.169961,
+Moscow,1965,6.62178,
+Moscow,1970,7.106457,
+Moscow,1975,7.622703,
+Moscow,1980,8.136141,
+Moscow,1985,8.57992,
+Moscow,1990,8.986631,
+Moscow,1995,9.200994,
+Moscow,2000,10.004523,
+Moscow,2005,10.751428,
+Moscow,2010,11.461264,
+Moscow,2015,12.049135,
+Moscow,2020,,12.537954
+Moscow,2025,,12.737356
+Moscow,2030,,12.795712
+Moscow,2035,,12.822748
+Mumbai,1950,3.088811,
+Mumbai,1955,3.72621,
+Mumbai,1960,4.414904,
+Mumbai,1965,5.3143,
+Mumbai,1970,6.412876,
+Mumbai,1975,7.685346,
+Mumbai,1980,9.199543,
+Mumbai,1985,10.68553,
+Mumbai,1990,12.35509,
+Mumbai,1995,14.135363,
+Mumbai,2000,16.146527,
+Mumbai,2005,17.257072,
+Mumbai,2010,18.257413,
+Mumbai,2015,19.315737,
+Mumbai,2020,,20.411274
+Mumbai,2025,,22.088953
+Mumbai,2030,,24.57245
+Mumbai,2035,,27.342819
+New York,1950,12.338471,
+New York,1955,13.219362,
+New York,1960,14.163521,
+New York,1965,15.176758,
+New York,1970,16.19118,
+New York,1975,15.880271,
+New York,1980,15.601401,
+New York,1985,15.826788,
+New York,1990,16.085599,
+New York,1995,16.94277,
+New York,2000,17.813371,
+New York,2005,18.087174,
+New York,2010,18.365262,
+New York,2015,18.647626,
+New York,2020,,18.803552
+New York,2025,,19.154024
+New York,2030,,19.957605
+New York,2035,,20.81717
+Osaka,1950,7.005284,
+Osaka,1955,8.622976,
+Osaka,1960,10.614841,
+Osaka,1965,13.065322,
+Osaka,1970,15.27151,
+Osaka,1975,16.298124,
+Osaka,1980,17.027547,
+Osaka,1985,17.582632,
+Osaka,1990,18.388783,
+Osaka,1995,18.939588,
+Osaka,2000,18.660022,
+Osaka,2005,18.762099,
+Osaka,2010,19.312646,
+Osaka,2015,19.304722,
+Osaka,2020,,19.16534
+Osaka,2025,,18.921632
+Osaka,2030,,18.658055
+Osaka,2035,,18.345611
+Paris,1950,6.283018,
+Paris,1955,6.796437,
+Paris,1960,7.410735,
+Paris,1965,7.855185,
+Paris,1970,8.208121,
+Paris,1975,8.557844,
+Paris,1980,8.669349,
+Paris,1985,8.956222,
+Paris,1990,9.330327,
+Paris,1995,9.510103,
+Paris,2000,9.736538,
+Paris,2005,10.091795,
+Paris,2010,10.460118,
+Paris,2015,10.733502,
+Paris,2020,,11.01723
+Paris,2025,,11.346802
+Paris,2030,,11.709788
+Paris,2035,,12.064575
+Rio de Janeiro,1950,3.026195,
+Rio de Janeiro,1955,3.687344,
+Rio de Janeiro,1960,4.493182,
+Rio de Janeiro,1965,5.522674,
+Rio de Janeiro,1970,6.790519,
+Rio de Janeiro,1975,7.733429,
+Rio de Janeiro,1980,8.78387,
+Rio de Janeiro,1985,9.241709,
+Rio de Janeiro,1990,9.697487,
+Rio de Janeiro,1995,10.431518,
+Rio de Janeiro,2000,11.306768,
+Rio de Janeiro,2005,11.831807,
+Rio de Janeiro,2010,12.373884,
+Rio de Janeiro,2015,12.940796,
+Rio de Janeiro,2020,,13.458075
+Rio de Janeiro,2025,,13.923245
+Rio de Janeiro,2030,,14.408259
+Rio de Janeiro,2035,,14.81018
+Sao Paulo,1950,2.334038,
+Sao Paulo,1955,3.043828,
+Sao Paulo,1960,3.969759,
+Sao Paulo,1965,5.49415,
+Sao Paulo,1970,7.62049,
+Sao Paulo,1975,9.614016,
+Sao Paulo,1980,12.089454,
+Sao Paulo,1985,13.394815,
+Sao Paulo,1990,14.77584,
+Sao Paulo,1995,15.913473,
+Sao Paulo,2000,17.014078,
+Sao Paulo,2005,18.288134,
+Sao Paulo,2010,19.659808,
+Sao Paulo,2015,20.883046,
+Sao Paulo,2020,,22.043028
+Sao Paulo,2025,,22.990007
+Sao Paulo,2030,,23.824223
+Sao Paulo,2035,,24.490136
+Shanghai,1950,4.288091,
+Shanghai,1955,5.712858,
+Shanghai,1960,6.865312,
+Shanghai,1965,6.428131,
+Shanghai,1970,6.052468,
+Shanghai,1975,5.658129,
+Shanghai,1980,5.927898,
+Shanghai,1985,7.09628,
+Shanghai,1990,8.605812,
+Shanghai,1995,11.072063,
+Shanghai,2000,14.246541,
+Shanghai,2005,17.055788,
+Shanghai,2010,20.314309,
+Shanghai,2015,23.482181,
+Shanghai,2020,,27.058479
+Shanghai,2025,,30.48214
+Shanghai,2030,,32.869265
+Shanghai,2035,,34.341242
+Shenzhen,1950,0.003148,
+Shenzhen,1955,0.005112,
+Shenzhen,1960,0.008302,
+Shenzhen,1965,0.01348,
+Shenzhen,1970,0.02189,
+Shenzhen,1975,0.035547,
+Shenzhen,1980,0.058983,
+Shenzhen,1985,0.193113,
+Shenzhen,1990,0.875,
+Shenzhen,1995,2.393747,
+Shenzhen,2000,6.550414,
+Shenzhen,2005,8.409066,
+Shenzhen,2010,10.222916,
+Shenzhen,2015,11.275391,
+Shenzhen,2020,,12.35682
+Shenzhen,2025,,13.545445
+Shenzhen,2030,,14.537252
+Shenzhen,2035,,15.185481
+Tianjin,1950,2.467096,
+Tianjin,1955,2.760676,
+Tianjin,1960,2.935185,
+Tianjin,1965,3.12062,
+Tianjin,1970,3.317826,
+Tianjin,1975,3.527495,
+Tianjin,1980,3.750476,
+Tianjin,1985,4.097324,
+Tianjin,1990,4.558206,
+Tianjin,1995,5.643951,
+Tianjin,2000,6.988727,
+Tianjin,2005,8.430065,
+Tianjin,2010,10.150076,
+Tianjin,2015,12.516041,
+Tianjin,2020,,13.589078
+Tianjin,2025,,14.70408
+Tianjin,2030,,15.74524
+Tianjin,2035,,16.445898
+Tokyo,1950,11.274641,
+Tokyo,1955,13.712679,
+Tokyo,1960,16.678821,
+Tokyo,1965,20.284371,
+Tokyo,1970,23.297503,
+Tokyo,1975,26.614733,
+Tokyo,1980,28.548512,
+Tokyo,1985,30.303794,
+Tokyo,1990,32.530003,
+Tokyo,1995,33.586573,
+Tokyo,2000,34.449908,
+Tokyo,2005,35.621544,
+Tokyo,2010,36.859626,
+Tokyo,2015,37.256109,
+Tokyo,2020,,37.393129
+Tokyo,2025,,37.036204
+Tokyo,2030,,36.573799
+Tokyo,2035,,36.01403

index.html

@@ -0,0 +1,403 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Data Visualization Portfolio - [Your Name]</title>
+
+    <!-- Pico.css for clean, minimal styling -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
+
+    <!-- Vega-Lite library for interactive visualizations -->
+    <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
+
+    <style>
+        /* KSE Brand: Override Pico.css with official colors */
+        :root {
+            --pico-primary: rgb(0, 57, 100); /* KSE Dark Midnight Blue */
+            --pico-primary-hover: rgb(0, 77, 130);
+        }
+
+        /* KSE Typography */
+        body { line-height: 1.3; }
+        h1, h2, h3, h4, h5, h6 { line-height: 1.15; }
+
+        /* Visualization containers */
+        article > div { width: 100%; min-height: 400px; }
+    </style>
+</head>
+
+<body>
+    <main class="container">
+        
+        <!-- ============================================
+             GETTING STARTED - READ THIS FIRST!
+             ============================================
+
+             HOW TO USE THIS TEMPLATE:
+             1. Replace all [placeholder text] in square brackets with your content
+             2. Copy visualization sections to add more (you need minimum 5)
+             3. Test by opening this file in your browser
+             4. Delete instructional comments before submitting
+
+             📖 FOR COMPLETE REQUIREMENTS: See ASSIGNMENT.md
+
+             Quick checklist:
+             - Replace [Your Name], video link, and introduction theme
+             - Add 5+ visualizations with context, design decisions, insights, sources
+             - Include unified theme connecting all visualizations
+             - Embed your 5-7 minute video presentation link
+
+             ============================================ -->
+
+        <!-- ============================================
+             HEADER SECTION - Replace with your information
+             ============================================ -->
+        <hgroup>
+            <h1>[Your Full Name]</h1>
+            <p>Data Visualization Portfolio</p>
+            <p>Principles of Data Visualization | KSE | Fall 2025</p>
+        </hgroup>
+
+        <!-- ============================================
+             VIDEO PRESENTATION - Add your video link
+             Required: 5-7 minutes, covers theme + key visualizations
+             See ASSIGNMENT.md for detailed video requirements
+             ============================================ -->
+        <article>
+            <header>
+                <h2>📹 Video Presentation</h2>
+            </header>
+            <p>
+                <strong>Watch my portfolio walkthrough (5-7 minutes):</strong><br>
+                <a href="[YOUR VIDEO LINK HERE]" target="_blank" role="button">
+                    ▶️ View Video Presentation
+                </a>
+            </p>
+            <p>
+                <small>
+                    <em>Note: If using Google Drive, make sure to enable external access to your video!</em>
+                </small>
+            </p>
+        </article>
+
+        <!-- ============================================
+             INTRODUCTION - Explain your unified THEME (3-5 sentences)
+
+             Your theme should connect all visualizations around a common
+             question or domain. See ASSIGNMENT.md for examples.
+             ============================================ -->
+        <article>
+            <header>
+                <h2>Introduction</h2>
+            </header>
+            <p>
+                [Write your portfolio theme here (3-5 sentences). Explain what unifying theme connects your visualizations.
+                What overarching question are you exploring? Why did you choose
+                this topic? How do your 5+ visualizations work together to tell
+                a complete story?]
+            </p>
+        </article>
+
+        <!-- ============================================
+             VISUALIZATION 1: VEGA-LITE EXAMPLE
+
+             Copy this <article> block to add more visualizations.
+             For other viz types, see examples below (Tableau, images).
+             See ASSIGNMENT.md for quality checklist requirements.
+             ============================================ -->
+        <article>
+            <header>
+                <h2>1. [Descriptive Title of Your Visualization]</h2>
+            </header>
+
+            <!-- CONTEXT & QUESTION (1-2 sentences) -->
+            <h3>Context & Question</h3>
+            <p>
+                [What analytical question does this address? Why is it important?]
+            </p>
+
+            <!-- DESIGN DECISIONS (2-3 sentences) -->
+            <h3>Design Decisions</h3>
+            <p>
+                [Chart type rationale, visual encodings, alternatives considered, tradeoffs]
+            </p>
+
+            <!-- THE VISUALIZATION -->
+            <div id="vis1"></div>
+
+            <script type="text/javascript">
+                /* ==========================================
+                   VEGA-LITE SPECIFICATION
+
+                   Replace the spec below with your Vega-Lite JSON.
+                   Set "width": "container" and "height": 400
+
+                   For CSV data: "data": {"url": "your-file.csv"}
+                   (Include CSV file in your ZIP!)
+                   ========================================== */
+                
+                var spec1 = {
+                    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+                    "description": "city population",
+                    "width": "container",
+                    "height": 400,
+                    "data": {
+                        // OPTION 1: Inline data (small datasets)
+                        // "values": [
+                        //     { "category": "A", "value": 28 },
+                        //     { "category": "B", "value": 55 },
+                        //     { "category": "C", "value": 43 },
+                        //     { "category": "D", "value": 91 },
+                        //     { "category": "E", "value": 81 }
+                        // ]
+                        // OPTION 2: External file (larger datasets)
+                        "url": "assets/city-population.csv"
+                    },
+                    "mark": "line",
+                    "encoding": {
+                        "x": { 
+                            "field": "Year", 
+                            "type": "ordinal", 
+                            "axis": { "title": "Year" }
+                        },
+                        "y": {
+                            "field": "population", 
+                            "type": "quantitative", 
+                            "axis": { "title": "Population" } 
+                        },
+                        "color": {
+                            "field": "Entity"
+                        }
+                    }
+                };
+
+                // This line embeds the visualization - don't change this
+                vegaEmbed('#vis1', spec1, { actions: false });
+            </script>
+
+            <!-- KEY INSIGHTS (2-3 sentences) -->
+            <h3>Key Insights</h3>
+            <p>
+                [Patterns, trends, outliers discovered. What viewers should take away.]
+            </p>
+
+            <!-- DATA SOURCE -->
+            <footer>
+                <strong>Data Source:</strong>
+                [Dataset name, organization, year. Include URL if available]
+            </footer>
+        </article>
+
+        <!-- ============================================
+             VISUALIZATION 2: TABLEAU PUBLIC EXAMPLE
+
+             Publish to YOUR Tableau Public account (required).
+             Get embed code and paste below.
+             ============================================ -->
+        <article>
+            <header>
+                <h2>2. [Title of Your Second Visualization]</h2>
+            </header>
+
+            <h3>Context & Question</h3>
+            <p>
+                [What question does this visualization address?]
+            </p>
+
+            <h3>Design Decisions</h3>
+            <p>
+                [Explain your design choices. Why did you choose this chart type?
+                What visual encodings did you use? What interactive features
+                did you include and why?]
+            </p>
+
+            <!-- TABLEAU EMBED CODE -->
+            <!-- ==========================================
+                 Paste your Tableau Public embed code here.
+                 Must be published in YOUR account (not instructor's).
+                 Delete the placeholder div below.
+                 ========================================== -->
+
+            <div style="border: 2px dashed #ccc; padding: 20px; text-align: center; margin: 20px 0;">
+                <p><strong>⚠️ REPLACE THIS SECTION</strong></p>
+                <p>Paste your Tableau Public embed code here</p>
+                <p><small>Delete this placeholder div entirely and replace with your embed code</small></p>
+            </div>
+
+            <h3>Key Insights</h3>
+            <p>
+                [What did you discover?]
+            </p>
+
+            <footer>
+                <strong>Data Source:</strong> [Dataset information and URL]
+            </footer>
+        </article>
+
+        <!-- ============================================
+             VISUALIZATION 3: STATIC IMAGE EXAMPLE
+             For Python/R/other tools - export as image
+             ============================================ -->
+        <article>
+            <header>
+                <h2>3. [Title of Your Third Visualization]</h2>
+            </header>
+
+            <h3>Context & Question</h3>
+            <p>
+                [What question does this visualization address?]
+            </p>
+
+            <h3>Design Decisions</h3>
+            <p>
+                [Explain your design choices. What tool did you use
+                to create this? Why this visualization approach?]
+            </p>
+
+            <!-- STATIC IMAGE -->
+            <!-- ==========================================
+                 Export as PNG/SVG, save in same folder.
+                 Include image file in your ZIP.
+                 ========================================== -->
+
+            <img src="[your-image-filename.png]"
+                 alt="[Brief description of visualization]"
+                 style="max-width: 100%; height: auto; border: 1px solid #ddd;">
+
+            <h3>Key Insights</h3>
+            <p>
+                [What did you discover?]
+            </p>
+
+            <footer>
+                <strong>Data Source:</strong> [Dataset information and URL]
+            </footer>
+        </article>
+
+        <!-- ============================================
+             VISUALIZATION 4 - Copy a template above
+             Minimum 5 visualizations required!
+             ============================================ -->
+        <article>
+            <header>
+                <h2>4. [Title of Your Fourth Visualization]</h2>
+            </header>
+
+            <h3>Context & Question</h3>
+            <p>[Your text here]</p>
+
+            <h3>Design Decisions</h3>
+            <p>[Your text here]</p>
+
+            <!-- Add your visualization here (copy from examples above) -->
+            <div style="border: 2px dashed #ccc; padding: 40px; text-align: center;">
+                <p><strong>Add your visualization here</strong></p>
+                <p>Copy one of the templates above (Vega-Lite, Tableau, or Image)</p>
+            </div>
+
+            <h3>Key Insights</h3>
+            <p>[Your text here]</p>
+
+            <footer>
+                <strong>Data Source:</strong> [Dataset information]
+            </footer>
+        </article>
+
+        <!-- ============================================
+             VISUALIZATION 5 - Copy a template above
+             This is the minimum. You can add more!
+             ============================================ -->
+        <article>
+            <header>
+                <h2>5. [Title of Your Fifth Visualization]</h2>
+            </header>
+
+            <h3>Context & Question</h3>
+            <p>[Your text here]</p>
+
+            <h3>Design Decisions</h3>
+            <p>[Your text here]</p>
+
+            <!-- Add your visualization here -->
+            <div style="border: 2px dashed #ccc; padding: 40px; text-align: center;">
+                <p><strong>Add your visualization here</strong></p>
+            </div>
+
+            <h3>Key Insights</h3>
+            <p>[Your text here]</p>
+
+            <footer>
+                <strong>Data Source:</strong> [Dataset information]
+            </footer>
+        </article>
+
+        <!-- ============================================
+             ADD MORE VISUALIZATIONS: Copy an <article> block above
+             ============================================ -->
+
+        <!-- ============================================
+             REFLECTION (Optional but recommended)
+             ============================================ -->
+        <article>
+            <header>
+                <h2>Reflection</h2>
+            </header>
+            <p>
+                [OPTIONAL: What did you learn through creating this portfolio?
+                How did your understanding of data visualization principles evolve?
+                What challenges did you face and how did you overcome them? What
+                would you do differently next time?]
+            </p>
+        </article>
+
+        <!-- ============================================
+             AI USAGE DOCUMENTATION (If applicable)
+             See ASSIGNMENT.md for AI policy requirements
+             ============================================ -->
+        <article>
+            <header>
+                <h2>AI Usage Documentation</h2>
+            </header>
+            <p>
+                [IF YOU USED AI: Document what you used it for and include shared conversation links or PDFs.
+                Create an AI_Documentation folder in your ZIP with these files.
+                IF YOU DID NOT USE AI: Delete this entire AI Usage Documentation section.]
+            </p>
+            <p>
+                <small><em>Remember: All AI usage must be documented. Include links to shared conversations
+                or PDF exports in a folder called AI_Documentation in your ZIP archive.</em></small>
+            </p>
+        </article>
+
+        <!-- ============================================
+             FOOTER
+             ============================================ -->
+        <footer style="margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #ddd;">
+            <p>Created by [Your Name] | Principles of Data Visualization | KSE Fall 2025</p>
+            <p>Last updated: [Date]</p>
+        </footer>
+
+    </main>
+
+    <!-- ============================================
+         BEFORE SUBMITTING:
+
+         ✓ All [placeholders] replaced with your content
+         ✓ Minimum 5 visualizations included
+         ✓ Video link working and embedded
+         ✓ Introduction explains unified theme (3-5 sentences)
+         ✓ Each viz has: Context, Design, Insights, Source
+         ✓ ZIP named: Portfolio_[LastName]_[FirstName].zip
+         ✓ All datasets and AI documentation included in ZIP
+
+         📋 Complete checklist in ASSIGNMENT.md
+
+         DELETE THIS COMMENT BLOCK BEFORE SUBMITTING!
+         ============================================ -->
+
+</body>
+</html>