Iterating dataviz

with designers in the loop

Lucia Kocincova

/_lucyia

/lucyia

Iterations in hindsight

Iterations more realistically

Iterations realistically

Iterations realistically (part colours)

What's the problem?!

○ hard to develop and progress the ideas further

○ hard to draw conclusions to overall visual problem

○ hard to share versions during development

○ very hard to go back to a specific version

Does the process really matter?

○ NO

○ ..but also YES

○ NO

○ ..but also YES

○ hard to develop and progress the ideas further

○ hard to draw conclusions to overall visual problem

○ hard to share versions during development

○ very hard to go back to a specific version

Does the process really matter?

○ state main goal/question

Collaborating

Make possibilities visible

○ list data (with type/ranges)

○ indicate current mappings

○ sort into categories

○ state main goal/question

○ list data (with type/ranges)

○ indicate current mappings

○ sort into categories

Make possibilities visible

What are the main drivers of the issue?

time

name

sumValue

avgValue

level

type

[2015, 2018]

(unique)

[200, 25k]

[1k, 17.5k]

[1, 2, 3]

[R, B, K, I, A]

-

(label)

circle area

-

shape (3)

position

fill color

circle (outer)

sumValue

level

type

[200, 25k]

[1, 2, 3]

[R, B, K, I, A]

circle area

shape (2)

position

circle (inner)

-

-

type

form

color

position

circle (2) | circle (3)

type (3)

type + hierarchy

motion

---

Looks familiar...

Preattentive attributes

(picture from

Interactive Visualization

by Bill Ferster)

(selected)

Preattentive attributes

(selected)

○ v1

Name

Semantic versioning

○ v2.0.0-beta

Doesn't have to include just numbers

○ v1.3.20

○ v12_flow_diagram_color_options

○ vDonut-chart-with-jam

_final

_final_final_really

v1.3.4
new idea/mapping
 developing same idea
minor change
<INSERT ANYTHING>
<THAT WORKS>
<FOR YOU>

○ v1

○ v1.3.20

Semantic versioning

○ create a tag

○ publish tags

○ see other tags

Tag

Git 101

○ repeat

(aka the slide with code)

○ git tag v1.0
○ git tag -a v1.0 -m "Pizza chart"
○ git push origin : v1.0
○ git tag
○ git push origin --tags

○ create a tag

○ publish tags

○ see other tags

○ repeat

Git 101

Tag

GitHub tags

GitHub tags

○ version

○ image

○ discussed ideas

Document

README

○ reasoning

○ ...

○ version

○ image

○ discussed ideas

○ reasoning

○ ...

README

Document

GitHub README

GitHub README

Name    Tag    Document

Benefits of combining

○ single source of truth

○ easier to share and discuss

○ easier to come back

            +         +

○ designers can contribute to Git

○ without necessarily

   opening a command line

○ single source of truth

○ easier to share and discuss

○ easier to come back

○ designers can contribute to Git

○ without necessarily

   opening a command line

Benefits of combining

the iteration                    the code             the steps

Name + Tag + Document

Check the repository:

Branches

Independent in this approach

○ you can apply it

   into your Git workflow

○ ideally branches are used

   throughout development

○ you can apply it

   into your Git workflow

○ ideally branches are used

   throughout development

Independent in this approach

Secret tips

○ there isn't one solution for all

○ experiment and bend the tools

○ the cake is a lie

○ share your ideas & experiments

○ the cake is a lie

○ there isn't one solution for all

○ experiment and bend the tools

○ share your ideas & experiments

About that...

About that...

Thank you

& fight climate breakdown!

 

Links

○ Git tags

○ Markdown for Readme

○ Illustrative GitHub repo

○ Gitflow Workflow

Image credits:

○ Semantic versioning

○ Git tags

○ Preattentive attributes  (interactive examples)

Iterating dataviz with designers in the loop

By Lucia Kocincova

Iterating dataviz with designers in the loop

Talk at Data visualization meetup | Microsoft Reactor London

  • 1,165