tools-only Learning Graph Color Test
Overview
This interactive visualization tests the effectiveness of 17 pastel web-safe colors for differentiating nodes in a learning graph. The simulation displays 50 nodes distributed across 17 color groups, each with 1-3 random connections to other nodes.
Open Full Screen Version{ target="_blank" }
Purpose
The goal is to evaluate whether the selected pastel color palette provides sufficient visual distinction between different taxonomy groups in a learning graph visualization. This helps ensure that users can easily identify and distinguish between different concept categories.
Interactive Features
- 50 Nodes: Numbered 1-50, distributed evenly across 17 color groups
- Random Connections: Each node has 1-3 edges to other nodes (black color)
- Ellipse Shape: All nodes use the ellipse shape for consistency
- Interactive: Hover over nodes to highlight, drag to rearrange
- Physics Simulation: Nodes arrange themselves automatically using force-directed layout
Color Palette
The visualization uses 17 web-safe pastel colors:
- MistyRose - Soft pink/rose
- PeachPuff - Light peach
- LightYellow - Pale yellow
- Honeydew - Light green
- PaleTurquoise - Soft cyan
- AliceBlue - Very light blue
- Lavender - Light purple
- LavenderBlush - Pink lavender
- Thistle - Soft mauve/purple
- MintCream - Very light mint
- LightCoral - Soft coral
- Plum - Medium purple
- Gainsboro - Light gray
- PowderBlue - Soft blue
- PaleGreen - Soft green
- Aquamarine - Blue-green
- LightPink - Soft pink
How to Use
- Observe Color Differentiation: Can you easily distinguish between different color groups?
- Identify Patterns: Notice how nodes of the same color group are numbered (1, 18, 35... are all Group 1)
- Interact: Drag nodes around to see connections more clearly
- Check the Legend: The color legend at the bottom shows all 17 colors with their names
Technical Details
- Library: vis-network.js
- Node Distribution: Nodes are distributed round-robin across groups (Node 1 → Group 1, Node 2 → Group 2, ..., Node 18 → Group 1, etc.)
- Edge Generation: Random connections ensure realistic graph structure
- Font Color: Black text on light backgrounds, white text on darker colors (Plum, LightCoral)
Design Considerations
This color palette was chosen for:
- Accessibility: All colors are light pastels with good contrast
- Web-Safe: Named CSS colors that work across all browsers
- Distinctiveness: Colors span the spectrum (reds, oranges, yellows, greens, blues, purples, grays)
- No Hex Codes: Uses only named web-safe colors for simplicity
View Source
- main.html - Standalone visualization file
- Learning Graph Generator Skill - Uses these colors