Visualization:

Free and open source options for communicating data

What we’re doing today

Data visualization & infographics

Examples of both

8 graphic design basics

Resources

About me

Poppy Riddle
- PhD candidate
- scholarly communications
- art and design

APC Dashboard for UOttawa

Dual Keyword Search visualization

Overlays for a network

Visualization beyond Excel

What’s wrong with Excel?

Both Excel and Tableau are great for exploration and presentation of data.

Its very recognizable.

Its both the tool and the viewer.

OtherLevels: https://www.youtube.com/@OtherLevels

source: https://www.other-levels.com/blogs/datasets

source: from Cioffi et al. 2022 DOI:10.1007/s11192-022-4367-w

But, its not uncommon to see it in greyscale:

same as above, but greyscale due to printing!

So, how can we make this a little more enticing?

Source: Constantino et al., 2024. DOI:10.1162/qss_a_00349

Data visualization

Visualization is the practice of making results from data analysis more easily interpreted by visual or other means.

-   data visualization

-   information visualization

-   scientific visualization

-   statistical graphics

-   exploratory data analysis

-   data art

See Nathan Yao’s Flowing Data catalog of chart types. https://flowingdata.com/chart-types/

Infographics

Infographics are intended to communicate a cohesive narrative that may include tables, graphs, diagrams, maps, etc.

They can be quite artistic to gain your attention.

source: www.hotbutterstudio.com

source: www.hotbutterstudio.com

source: https://www.valentinadefilippo.co.uk/

source: https://wunicholas.wixsite.com/

source: https://wunicholas.wixsite.com/home/portfolio?lightbox=dataItem-m2vp4dzq

How might graphic design principles help?

Limited attention: you have seconds to get and keep someone’s attention.

Limited memory: working and long-term memory

Limited perceptual channels: small number of things

Some of the elements of graphic design

Hierarchy

Scale

Color

Line

Shape

Alignment

Space

Contrast

Hierarchy

Read this first.

Read this second.

Read this third.

Scale

Scale affects how big or small your visualization can still be legible.

Or…

You may need to move things around a bit.

Color

Color swatches taken from a public domain image.

Here are some resources:

For scientific publications: http://vrl.cs.brown.edu/color

Super easy and beautiful color palettes: https://color.adobe.com/create/color-wheel

So many more: https://sites.google.com/view/visres/special-topic-color/noteworthy-and-popular-color-resources?authuser=0

Line

Line weight helps to separate and define.

How does this look big? Or small?

Is it near or far?

Source: https://wunicholas.wixsite.com/home/portfolio?lightbox=dataItem-jdpq7tt0

source:https://wunicholas.wixsite.com/home/portfolio?lightbox=dataItem-l1a5xzhb

So, you might adjust depending on your needs:

Biggie and some lorem ipsum text.

Shape

What do these shapes mean?

How might they be interpreted in the context of the narrative?

See Ferdio’s 100 visualizations with just 6 data points. https://100.datavizproject.com/#

source: https://100.datavizproject.com/#

Alignment

Alignment helps your reader orient themselves and predict where information will be.

The grid has a dedicated following.

The grid on Nicolas Wu’s fish poster.

Just a grid.

Space

This is the resting space around text and visuals. It gives the eye time to rest and move between salient points.

Also called negative space, or ground.

Contrast

This affects:

hierarchy

color

line

shape

type

Lorum Ipsum and the Octopus in low contrast (source:https://sciencefigures.org/figure/1165/octopus/)

Or….

High contrast! Source: https://sciencefigures.org/figure/1165/octopus/

8 Elements of graphic design

Hierarchy

Scale

Color

Line

Shape

Alignment

Space

Contrast

Resources

Open source or free tools

Survey from the Journal of Visualization: https://sites.google.com/view/visres/home?authuser=0

DataWrapper: https://www.datawrapper.de/charts

canva: https://www.canva.com/login

flourish: https://app.flourish.studio/templates

Draw.io: https://app.diagrams.net/

inkscape: https://inkscape.org/

Visualization galleries

A catalog of data visualization types: https://datavizcatalogue.com/

Information is beautiful: https://informationisbeautiful.net/

Visualization blogs

Data Visualization Society: https://www.datavisualizationsociety.org/

& their youtube channel: https://www.youtube.com/@DataVisualizationSociety

DataWrapper: https://blog.datawrapper.de/category/data-vis-dispatch/

Visualization Universe: http://visualizationuniverse.com/

Visualizing Data: https://www.visualisingdata.com/blog/

Fonts

Fonts: https://fonts.google.com/

Icons: https://fontawesome.com/icons

Lorum Ipsum: https://loremipsum.io/

Color

Adobe Color: https://color.adobe.com/create/color-wheel

I Want Hue: https://medialab.github.io/iwanthue/

Science related resources

BioRender: https://www.biorender.com/features

Guild of Natural Science Illustrators: https://www.gnsi.org/

Scientific American article: https://blogs.scientificamerican.com/sa-visual/visualizing-science-illustration-and-beyond/

Science Figures: open-licensed science related artwork: https://sciencefigures.org/

Advancing even further!

D3: https://d3-graph-gallery.com/

Observable: https://observablehq.com/

Mermaid:https://mermaidchart.com/

Thank you!

Feel free to reach out with any questions, comments, or other sources of inspiration!

Poppy Riddle

pnriddle@dal.ca

You can find this presentation at https://github.com/poppy-nicolette/viz_preso

Demo of Inkscape

• Improving a graph
• Creating a grid from an image
• Basics of creating assets