Responsive Data Visualisation

Information Visualisation SS 2021 - Group 2

Valentin Adler
Ledio Jahaj
Markus Petritz
Pooja Yeli

05 May 2021

Responsive Web Design

Responsive Data Visualisation

Keith Andrews, Responsive Visualisation, MobileVis 2018 Workshop, https://mobilevis.github.io/assets/mobilevis2018_paper_4.pdf

Responsive Visualization Patterns

Responsive Visualization Patterns (cont.)

Responsive Line Chart

Patterns:

https://www.datawrapper.de/_/gjz3C/

Responsive Bar Chart

Patterns:

Adapted from RespVis example
https://respvis.netlify.app/examples/grouped-bar.html

Responsive Stacked Area Chart

Patterns:

https://www.datawrapper.de/_/NMZfH/

Responsive Scatter Plot

Patterns:

Adapted from RespVis example
https://respvis.netlify.app/examples/scatter.html

Responsive Scatter Plot

Patterns:

https://www.bloomberg.com/graphics/2018-asteroid-mining/

Responsive Choropleth Map

Patterns:

https://broadbandmap.fcc.gov/#/location-summary?version=jun2020&tech=acfosw&speed=25_3

Responsive Node-Link Chart

Patterns:

https://fingfx.thomsonreuters.com/gfx/rngs/INDIA-ELECTION-FUEL/010080DM0SB/

Software Libraries

RespVis Framework

RDV

RDV Live Example

Data Size

Visualization Size

Output

https://github.com/nrabinowitz/rdv

Chart.js

Pancake

HighCharts

ApexCharts

RGraph

Software Editors

Jane Hoffswell, Wilmot Li, and Zhicheng Liu.
Techniques for Flexible Responsive Visualization Design (CHI 2020). https://doi.org/10.1145/3313831.3376777

Hoffswell Editor

Hoffswell Editor
Hoffswell Editor/System for Responsive, Cross-platform Data Visualization.
Copyright © 2020 Jane Hoffswell

Jane Hoffswell, Wilmot Li, and Zhicheng Liu.
Techniques for Flexible Responsive Visualization Design (CHI 2020). https://doi.org/10.1145/3313831.3376777