01 / Open
Clone the repository
Run git clone <your-repo-url>, then choose File → Open Folder in VS Code and open the repository root.
All services
A practical design walkthrough
Claude
Compare infographics. Make thoughtful design decisions.
Use this assignment walkthrough to set up VS Code, compare two infographics with Cairo’s visualization wheel, and develop your own recommendations. AI can help explain the mechanics, while the creative work and judgments remain yours.
Start with the setup
Your workspace
Yes, VS Code works.
There is no build step. You will edit one HTML file, four SVG files and one Markdown submission file, then place your images in the project folder.
02 / Preview
See changes live
Install Microsoft’s Live Preview extension or Live Server. With Live Preview, right-click index.html and choose Show Preview. Keep it open as you edit.
03 / Prepare
Choose your tools
Inkscape is optional for moving SVG nodes visually. Figma, Canva or Photopea can help you prepare annotated images and mockups for Steps 3 and 4.
Step 1 / 25%
Start with a useful comparison.
Choose two multi-element infographics on the same subject. Look for several components, such as charts, text, icons, illustrations and a narrative flow, rather than a single chart. Visibly different styles make the comparison more revealing.
-
Save screenshots as
images/infographic-a.pngandimages/infographic-b.png. -
In
index.html, add the shared subject, both titles and both source URLs. Replace each placeholder link destination as well as its visible text. -
Write 1-2 sentences explaining why each infographic is multi-element. Discuss your candidates with AI, share the conversation and record your own reflection in
SUBMISSION.md. Then commit and push.
A tidy foundation
Put every file in its place.
Keep index.html, SUBMISSION.md and the reference visualization_wheel.svg at the root. Never edit the reference wheel.
Inside the images folder
- Four editable wheels
- wheel-a.svg, wheel-b.svg, wheel-a-after.svg, wheel-b-after.svg
- Original infographics
- infographic-a.png, infographic-b.png
- Recommendation images
- rec-a-seek-depth.png, rec-a-clarity.png, rec-a-boom-effect.png, rec-b-seek-depth.png, rec-b-clarity.png, rec-b-boom-effect.png
- Mockups
- mock-a.png, mock-b.png
A “missing: images/…” placeholder in the preview points you to an image that still needs adding or a path that needs correcting.
Step 2 / 25%
Six axes. Twelve ways to look.
Use Cairo’s poles to describe what each infographic does. Anchor every rating in a visible design choice, not simply whether you like the result.
| Axis | First pole | Second pole |
|---|---|---|
| Abstraction / Figuration | Shapes, charts and symbols | Realistic imagery or illustration |
| Functionality / Decoration | Every element carries data | Ornament that does not encode data |
| Lightness / Density | White space and less data per area | Information packed into the space |
| Unidimensionality / Multidimensionality | One variable or layer | Many variables and layers together |
| Familiarity / Originality | Standard forms, such as bars and pies | Unconventional visual encodings |
| Redundancy / Novelty | Information repeated in different ways | Each element contributes something new |
Translate your judgments into SVG points.
Each wheel’s rating-shape polygon contains 12 coordinate pairs, initially at the centre: 114.01,136.20. The RATING LOOKUP comment gives each pole’s coordinates at levels 0 to 5.
Edit only the points attribute in images/wheel-a.svg and images/wheel-b.svg. Copy your chosen coordinates into the correct slots. In Inkscape, press N and move each node onto the appropriate grey ring.
Keep this clockwise order: Multidimensionality, Originality, Novelty, Figuration, Decoration, Lightness, Unidimensionality, Familiarity, Redundancy, Abstraction, Functionality, Density.
Complete both 12-row tables with matching numbers and pole-specific justifications. Use the assignment’s overlay toggle, then write 2 to 3 sentences about what the wheels show at a glance. Log your AI interaction and reflection, commit and push.
Step 3 / 25%
Move from observation to improvement.
For each infographic, write 1 to 2 sentences on its strengths and 1 to 2 on its weaknesses. Be specific about the reader’s experience: what is easy to understand, and where does the design make interpretation harder?
A useful recommendation connects a visible problem to a deliberate change. Consider whether clearer hierarchy, more helpful context or a stronger focal point would improve communication. Develop the wording, annotations and mockups yourself.
Interested in applying the same attention to clarity to your business website? Explore our website design services or visit the birchspace.co Redesign page.
Before you submit
Keep the work clear and your own.
What should I record about AI use?
In SUBMISSION.md, record the shared conversation link, what you asked, what you learned and your reflection for the relevant step. Have a genuine conversation, then write the record yourself.
Why is an image missing in the preview?
Check that the file is inside the images folder and that its name matches the path used in index.html. The missing-image placeholder identifies the expected path.
Can AI choose my ratings or write my analysis?
No. The repository rules allow explanations, checks and mechanical fixes, not your prose, ratings, polygon placement or mockup design. Use help to understand the task, then make and explain your own decisions.
What should I check before committing Step 2?
Resolve the scale mismatch with course staff. Check the order of all 12 vertices, confirm both tables match the SVG values and tie each justification to the correct pole. Include your comparison and AI-use reflection before committing and pushing.
Alderr & Page / United Arab Emirates
Bring thoughtful design to your website.
We create elegant, mobile-first websites for small businesses, with redesigns, WhatsApp integration, contact forms and ongoing maintenance. Tell us what your business needs, and let’s discuss a clear next step.
Talk about your website