From 5c4a4e86896b2c770dbb68995fd1ed065693c4f9 Mon Sep 17 00:00:00 2001 From: Oleh Omelchenko Date: Tue, 2 Dec 2025 16:25:01 +0200 Subject: [PATCH] init --- .vscode/settings.json | 3 + ASSIGNMENT.md | 368 +++++++++++++++++++++++++ PUBLISHING.md | 113 ++++++++ README.md | 76 ++++++ assets/city-population.csv | 541 +++++++++++++++++++++++++++++++++++++ index.html | 403 +++++++++++++++++++++++++++ 6 files changed, 1504 insertions(+) create mode 100644 .vscode/settings.json create mode 100644 ASSIGNMENT.md create mode 100644 PUBLISHING.md create mode 100644 README.md create mode 100644 assets/city-population.csv create mode 100644 index.html diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/ASSIGNMENT.md b/ASSIGNMENT.md new file mode 100644 index 0000000..db09f25 --- /dev/null +++ b/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! diff --git a/PUBLISHING.md b/PUBLISHING.md new file mode 100644 index 0000000..1ff9401 --- /dev/null +++ b/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) diff --git a/README.md b/README.md new file mode 100644 index 0000000..18c7d78 --- /dev/null +++ b/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 ` + + + + + + + +
+ + + + +
+

[Your Full Name]

+

Data Visualization Portfolio

+

Principles of Data Visualization | KSE | Fall 2025

+
+ + +
+
+

📹 Video Presentation

+
+

+ Watch my portfolio walkthrough (5-7 minutes):
+ + ▶️ View Video Presentation + +

+

+ + Note: If using Google Drive, make sure to enable external access to your video! + +

+
+ + +
+
+

Introduction

+
+

+ [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?] +

+
+ + +
+
+

1. [Descriptive Title of Your Visualization]

+
+ + +

Context & Question

+

+ [What analytical question does this address? Why is it important?] +

+ + +

Design Decisions

+

+ [Chart type rationale, visual encodings, alternatives considered, tradeoffs] +

+ + +
+ + + + +

Key Insights

+

+ [Patterns, trends, outliers discovered. What viewers should take away.] +

+ + +
+ Data Source: + [Dataset name, organization, year. Include URL if available] +
+
+ + +
+
+

2. [Title of Your Second Visualization]

+
+ +

Context & Question

+

+ [What question does this visualization address?] +

+ +

Design Decisions

+

+ [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?] +

+ + + + +
+

⚠️ REPLACE THIS SECTION

+

Paste your Tableau Public embed code here

+

Delete this placeholder div entirely and replace with your embed code

+
+ +

Key Insights

+

+ [What did you discover?] +

+ +
+ Data Source: [Dataset information and URL] +
+
+ + +
+
+

3. [Title of Your Third Visualization]

+
+ +

Context & Question

+

+ [What question does this visualization address?] +

+ +

Design Decisions

+

+ [Explain your design choices. What tool did you use + to create this? Why this visualization approach?] +

+ + + + + [Brief description of visualization] + +

Key Insights

+

+ [What did you discover?] +

+ +
+ Data Source: [Dataset information and URL] +
+
+ + +
+
+

4. [Title of Your Fourth Visualization]

+
+ +

Context & Question

+

[Your text here]

+ +

Design Decisions

+

[Your text here]

+ + +
+

Add your visualization here

+

Copy one of the templates above (Vega-Lite, Tableau, or Image)

+
+ +

Key Insights

+

[Your text here]

+ +
+ Data Source: [Dataset information] +
+
+ + +
+
+

5. [Title of Your Fifth Visualization]

+
+ +

Context & Question

+

[Your text here]

+ +

Design Decisions

+

[Your text here]

+ + +
+

Add your visualization here

+
+ +

Key Insights

+

[Your text here]

+ +
+ Data Source: [Dataset information] +
+
+ + + + +
+
+

Reflection

+
+

+ [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?] +

+
+ + +
+
+

AI Usage Documentation

+
+

+ [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.] +

+

+ 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. +

+
+ + +
+

Created by [Your Name] | Principles of Data Visualization | KSE Fall 2025

+

Last updated: [Date]

+
+ +
+ + + + + \ No newline at end of file