Carlos deArtola monogramCARLOS DE ARTOLA
APPENDIX D

Mark

Draw only what the study can stand behind. Adjacent figures do not share a form unless the data repeats.

HANDLE
mark
LIVES IN
src/components/OutcomeMarks.jsx (Mark)
USED ON
Inside every Figure
PROPS
kind: slope · scale · tiles · steps · rank · compare · status · fanout · swatches · fraction · state · zoom · months · hub · glyph · timeline · groups
EXAMPLE
LIVE

As it renders.

  1. SLOPE
    10062BEFOREAFTER-38
  2. SCALE
    90 s
    0306090120
  3. TILES
  4. STEPS
  5. RANK
  6. COMPARE
  7. STATUS
  8. FANOUT
  9. SWATCHES
  10. FRACTION
  11. STATE
  12. ZOOM
  13. MONTHS
  14. HUB
  15. GLYPH
  16. TIMELINE
    Independent2003
    In-house2013
    200320132026
  17. GROUPS
CODE
COPY AND PASTE

How it is called.

JSX
import Mark from '../components/OutcomeMarks.jsx'

<Mark mark={{ kind: 'slope', after: 62 }} />
<Mark mark={{ kind: 'scale', value: 90, max: 120, unit: 's', ticks: [0, 30, 60, 90, 120] }} />
<Mark mark={{ kind: 'tiles', items: ['Landing', 'Account', 'Draw'] }} />
<Mark mark={{ kind: 'steps', items: ['Build', 'Widen', 'Hold still'] }} />
<Mark mark={{ kind: 'rank', n: 7 }} />
<Mark mark={{ kind: 'compare', items: [['Sourcing', 6], ['RFQ', 12]] }} />
<Mark mark={{ kind: 'fraction', n: 6, filled: [4] }} />
<Mark mark={{ kind: 'timeline', start: 2003, end: 2026, rows: [['Independent', 2003]], ticks: [2003, 2026] }} />
<Mark mark={{ kind: 'groups', items: [['Cane Bay', 3, 'DESIGNERS']] }} />
{/* also: status · fanout · swatches · state · zoom · months · hub · glyph */}
RULES

What must stay true.

Draw only what the study can stand behind. Adjacent figures do not share a form unless the data repeats.