eclipse-cdt-cloud / eclipse-cdt-cloud/theia-trace-extension

Create chart style guidelines

Open
#152 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Theia UI UX
Dominant language
TypeScript
Stars
50
Forks
60
PR merge metrics
No merged PRs in 30d

Description

Creating chart style guidelines would encourage the use of best practices for clear, effective graphs and help standardize the visuals produced.

  • Starting with a short, concrete checklist is one way to quickly cultivate good data visualisation reflexes.
  • Guidelines can be adapted and improved as the project evolves and expertise is honed.

Content

Style guidelines could be structured as:

  • Checklist: Start with a short checklist of some basics (~10 items). Concise, well structured, quick to refer to. The main working tool for people who are familiar with the guidelines.
  • Accompanying document: Example pictures and more detailed explanation of some checklist items (context, theoretical background, etc). Read by those new to the guidelines or for reference as needed.

guidelines-structure

Include pictures of good (and bad) examples to illustrate the guidelines (and make them easier to remember). These could be images of the specific graph component discussed and/or more general annotated examples of graphs:

good-bad-chart-example2
Image source: Data Visualisation Checklist, Stephanie Evergreen, Ann Emery

Inspiration

The chart guidelines could be a subset of a more complete graph checklist:

  • Data Visualisation Checklist, Stephanie Evergreen, Ann Emery (website, pdf)

Example checklist items:

  • Text is horizontal
  • Data are labeled directly
  • Axis labels are equidistant
  • Color is used to highlight key patterns
  • Gridlines, if present, are muted

Introduction to good dataviz practice:

  • The Wall Street Journal Guide to Information Graphics, Donna M. Wong (BAnQ Montréal) - Great book of quick tips
  • Before and After: Refining three charts about fuel economy, Erica Bugden (blog post) - Some mostly basic tips, examples

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No file, test, or documentation entry point is named in the issue. Begin by locating the trace viewer's chart documentation and existing examples, then use the requested checklist, accompanying explanations, and good/bad chart illustrations as the completion criteria.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization, documentation
Issue type
Documentation
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.