Sketching in Code 1

Lesson 8: Skill Lab 3

Sketching in code.

Objective

Use code to draw graphics as guided by recent concepts from class including preattentive features, introducing Skills Lab 3 with a focus on drawing glyphs through code.

Outline

This lecture bridges theoretical concepts from previous lessons (Gestalt Principles, preattentive features, color theory) with practical coding skills for drawing custom visualizations. Students work through tutorials at their own pace using a flipped classroom model, focusing on hands-on practice with Sketchingpy. The lecture prepares students to build artistic graphics that explore Gestalt Principles and preattentive features, setting the foundation for more complex interactive visualizations.

Drawing glyphs with code

Using programming to create custom visual elements (glyphs) that can be repeated, modified, and arranged to visualize data.

• Tutorial goal: Complete through Tutorial 7 in Skills Lab 3.
• Learning to draw basic shapes programmatically.
• Combining shapes to create meaningful visual elements.
• Applying preattentive features through code.
• Provides flexibility beyond standard chart types while applying principles learned in earlier lectures.

Practical application of previous concepts

Students learn to implement the perceptual principles covered in Lecture 7 through code.

• Gestalt Principles in code: proximity (grouping elements by distance), similarity (grouping by color, size, shape), continuity (creating visual flow), closure (implied shapes), and figure-ground relationships.
• Preattentive features in code: implementing visual features that are processed rapidly by the human visual system including color variations, size differences, orientation changes, position encoding, and shape distinctions.

Flipped classroom learning model

Asynchronous tutorial work through the Skills Labs with peer support and community learning opportunities.

• Self-paced progression through tutorials.
• Hands-on experimentation encouraged.
• Building up complexity gradually.
• Office hours for individual guidance.
• Portfolio development through assignments.

Creative coding assignment

Build an artistic graphic drawn using code that explores at least one Gestalt Principle and at least one preattentive feature.

• Sketchingpy editor recommended for submission.
• Must include instructions on how to run the code.
• Must specify open source license (e.g., BSD-3-Clause License).
• Alternative tools require prior discussion with instructor.
• No interactivity required (yet), will be refined in follow-up assignment.
• Practice for building highly customized visualizations bridging art and data visualization.
• Foundation for data-driven graphics and portfolio piece development.
• Inspiration sources: Sketchingpy examples gallery, OpenProcessing trending projects, Genuary creative coding prompts.

Take Aways

This lecture transitions from theory to practice, using coding to implement perceptual principles learned in earlier lectures while establishing a foundation for customized data visualizations.

• Code provides flexibility to create custom visual elements beyond standard chart types.
• Gestalt Principles and preattentive features can be programmatically implemented.
• Flipped classroom model enables self-paced learning with community support.
• Creative coding assignment builds foundation for future interactive visualizations.
• First step in portfolio development toward more complex data-driven graphics.

Citations

[1] B. Adhikari, "Marey's train schedule," University of Missouri Saint Louis, 2021. Available: https://badriadhikari.github.io/data-viz-workshop-2021/minards/

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

[3] OpenProcessing, "Discover Trending Projects," OpenProcessing, 2025. Available: https://openprocessing.org/discover/#/trending

[4] Genuary, "Genuary Creative Coding Prompts," Genuary, 2025. Available: https://genuary.art

License

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