Skills and Final Project

Lesson 25: Final Project

Skills labs for the final project.

Objective

Synthesize all course concepts and skills to create a portfolio-quality capstone interactive data visualization project demonstrating mastery of representation, task, message, and dialogue perspectives.

Outline

This final lesson focuses on applying everything learned throughout the course in a comprehensive final project, drawing from all four perspectives on data visualization. Also, providing resources for advanced skill development through optional JavaScript tutorials.

Course completion

Throughout this course, you have explored data visualization through multiple lenses.

• Hello (Lectures 1-4): Introduction to the four perspectives and creative coding with Python.
• Primitives (Lectures 5-11): Perception science, cognitive principles, Gestalt principles, color theory, pre-attentive features, and Cleveland and McGill's hierarchy of elementary perceptual tasks.
• Combination (Lectures 12-15): Common chart types, data formats, geospatial visualization, What/Why/How framework, and design research methods including user interviews and think-aloud protocols.
• Conversation (Lectures 16-20): HCI paradigms, Stuart Hall's reception theory, game design concepts including affordances, kinesthetic projection, ludonarrative, environmental storytelling, and level design.
• Context (Lectures 21-24): Thinking toys, diegesis, explorable explanations, accessibility standards (WCAG 2), ethics in data visualization, and inquiry-based design.

Final project requirements

As outlined in the Course Manual, your final project should demonstrate comprehensive mastery of course concepts.

• Demonstrate mastery of visual encoding principles.
• Apply appropriate chart types and visualization patterns.
• Incorporate user-centered design thinking.
• Include meaningful interactivity that serves a purpose.
• Consider accessibility from the start (WCAG 2 guidelines).
• Address ethical considerations in data representation.
• Tell a compelling story or enable users to find their own narratives.

Technical implementation

You have multiple technology options for your final project.

• Python with Sketchingpy: Great for custom visualizations with full control.
• JavaScript with D3.js: Industry-standard library for web-based data visualization.
• JavaScript with P5.js: Excellent for creative coding and interactive graphics.
• Other technologies may be acceptable (consult the Course Manual).

Design considerations

Consider how your final project incorporates elements from each perspective.

• Data Visualization as Representation: Use appropriate visual encoding devices, consider the Cleveland and McGill hierarchy, leverage pre-attentive features, and ensure color schemes work for colorblind users.
• Data Visualization as Task: Identify your user and their goals, consider the domain, determine what questions your visualization helps answer, and map the user's journey.
• Data Visualization as Message: Tell a story with the data, consider how your visualization makes users feel, balance logos and pathos, and support or challenge user expectations.
• Data Visualization as Dialogue: Provide agency for users to explore, enable users to find their own narratives, ensure interaction feels intuitive and purposeful, and apply level design principles for teaching users.

Advanced skills

For those considering web technologies, optional JavaScript tutorial available.

• Tutorial 12 introduces JavaScript for interactive data visualization.
• Most interactive data visualizations on the web use JavaScript.
• D3.js is the industry standard for data visualization.
• P5.js offers powerful creative coding capabilities.
• Web-based visualizations are easily shareable.

Accessibility and ethics

Technical excellence must be paired with responsible design. We will check for:

• Color contrast ratios (WCAG 2.0 AA or AAA).
• Keyboard navigation support.
• Screen reader compatibility.
• Alternative text for visual elements.
• Consideration of who is represented and how.
• Acknowledgment of data sources and limitations.
• Awareness of potential biases in data or representation.

Take Aways

This course has provided a comprehensive toolkit for creating meaningful, accessible, and impactful data visualizations by integrating perception science, user-centered design, narrative craft, and interaction design.

• Apply comprehensive data visualization techniques learned throughout the course.
• Create a portfolio-quality interactive data visualization project.
• Integrate accessibility and ethical considerations into your work.
• Showcase your ability to tell stories with data while empowering users to explore.
• Skills extend beyond charts: communicate complex information visually, design for users with different needs, think critically about power and responsibility, create engaging interactive experiences, and bring together technical skills and design thinking.

Citations

[1] A. Pottinger and Sketchingpy Contributors, "Sketchingpy," Sketchingpy Project, 2025. Available: https://sketchingpy.org/

[2] A. Pottinger, "Interactive Data Science," 2024. Available: https://mooc.interactivedatascience.courses/

[3] D. Shiffman, The Nature of Code, No Starch Press, 2024. Available: https://natureofcode.com/

[4] Eyeo Festival, "Eyeo Festival," Eyeo Festival. Available: https://eyeofestival.com/

[5] M. Brown, "Game Maker's Toolkit," Game Maker's Toolkit. Available: https://gamemakerstoolkit.com/

[6] Extra Credits, "Extra Credits," Extra Credits. Available: https://www.youtube.com/@extracredits

[7] H. Horst and D. Miller, Digital Anthropology, Routledge, 2012.

[8] A. Shvets, "Refactoring Guru," Refactoring Guru. Available: https://refactoring.guru/

[9] Y. Holtz and C. Healy, "From Data to Viz," 2018. Available: https://www.data-to-viz.com

[10] A. Kirk, Data Visualisation: A Handbook for Data Driven Design. SAGE Publications, 2024.

[11] T. Munzner, Visualization Analysis and Design. CRC Press, Taylor & Francis Group, 2015.

[12] C. Ware, Information Visualization: Perception for Design (4th ed.). Morgan Kaufmann, 2021.

[13] J. Schell, The Art of Game Design: A Book of Lenses (3rd ed.). CRC Press/Taylor & Francis Group, 2020.

[14] A. Pottinger, "Income Gaps," 2023. Available: https://incomegaps.com/

[15] A. Pottinger, R. Geyer, N. Biyani, C. Martinez, N. Nathan, M. Morse, M. de Bruyn, C. Boettiger, E. Baker, K. Koy, and D. McCauley, "Global Plastics AI Policy Tool," University of California, 2024. Available: https://global-plastics-tool.org/

[16] A. Pottinger, R. Geyer, N. Biyani, C. Martinez, N. Nathan, M. Morse, C. Liu, S. Hu, M. de Bruyn, C. Boettiger, E. Baker, and D. McCauley, "Pathways to reduce global plastic waste mismanagement and greenhouse gas emissions by 2050," Science, 2024. doi: 10.1126/science.adr3837

[17] V. Hart and N. Case, "Parable of the Polygons," Nicky Case, 2022. Available: https://ncase.me/polygons/

[18] K. Rees and Periscopic, "U.S. Gun Deaths," Periscopic, 2018. Available: https://guns.periscopic.com/

[19] J. Harris and S. Kamvar, "We Feel Fine," We Feel Fine, 2006. Available: http://www.wefeelfine.org

[20] S. D. Kamvar and J. Harris, "We feel fine and searching the emotional web," in Proceedings of the fourth ACM international conference on Web search and data mining, Hong Kong China: ACM, Feb. 2011, pp. 117–126. doi: 10.1145/1935826.1935854.

[21] J. N. Rooney-Varga, F. Kapmeier, J. D. Sterman, A. P. Jones, M. Putko, and K. Rath, "The Climate Action Simulation," Simulation & Gaming, vol. 51, no. 2, pp. 114–140, Apr. 2020, doi: 10.1177/1046878119890643.

[22] A. Pottinger, "FoodSim: San Francisco," 2023. Available: https://foodsimsf.com/

[23] WAI, "WCAG 2 Overview," W3C, 2025. Available: https://www.w3.org/WAI/standards-guidelines/wcag/

[24] WebAIM, "Contrast Checker," Utah State University. Available: https://webaim.org/resources/contrastchecker/

[25] Design Justice Network, "Design Justice Network Principles," Design Justice Network, 2018. Available: https://designjustice.org/read-the-principles

[26] C. Brewer, M. Harrower, and The Pennsylvania State University, "Colorbrewer 2.0," The Pennsylvania State University, 2013. Available: https://colorbrewer2.org/

[27] W. S. Cleveland and R. McGill, "Graphical Perception: Theory, Experimentation, and Application to the Development of Graphical Methods," Journal of the American Statistical Association, vol. 79, no. 387, pp. 531–554, Sep. 1984, doi: 10.1080/01621459.1984.10478080.

[28] T. Munzner, "A Nested Model for Visualization Design and Validation," IEEE Trans. Visual. Comput. Graphics, vol. 15, no. 6, pp. 921–928, Nov. 2009, doi: 10.1109/TVCG.2009.111.

[29] A. Pottinger, L. Connor, B. Guzder-Williams, M. Weltman-Fahs, N. Gondek, and T. Bowles, "Climate-driven doubling of U.S. maize loss probability: Interactive simulation with neural network Monte Carlo," JDSSV, 2025. doi: 10.52933/jdssv.v5i3.134

[30] A. S. Pottinger and G. Zarpellon, "Pyafscgap.org: Open source multi-modal Python-based tools for NOAA AFSC RACE GAP," JOSS, vol. 8, no. 86, p. 5593, Jun. 2023, doi: 10.21105/joss.05593.

License

This lesson is part of Interactive Data Science and Visualization and is released under a CC-BY-NC 4.0 license.