Responsive Data Visualisation

Responsive Web Design

• Based on breakpoints (usually viewport width).
• One page design for all devices → page simply adapts to device.
• Flexible components - scale/move to fit device viewport.
• Different forms of interaction (touch, keyboard,...).

Responsive Data Visualisation

• Similar principles as RWD: rearrange/rescale components to fit device limitations.
• Web-based solutions.
• scalable vs responsive:
  Responsive visualisation should not just scale up/down, should go further:
  • Layout: changes depending on breakpoints.
  • Display density: sample data points for lower resolutions.
  • Interaction: touch, keyboard or even motion.

Responsive Visualization Patterns

• RP1: Rotating Axis Tick Labels
  Rotating axis tick labels at lower widths.
• RP2: Removing Axis Ticks
  Thinning out axis ticks (and their labels) at lower widths.
• RP3: Shortening Strings
  Using shorter label/title/desc strings at lower widths.
• RP4: Flipping 90 Degrees
  Rotate chart 90 degrees so it extends vertically down, rather than horizontally across.
• RP5: Reposition Chart Components
  For example, legend slides below chart rather than next to it.

Responsive Visualization Patterns (cont.)

• RP6: Interactive Zoom
  Interactively zoom in/out of the chart to get a more or less detailed view of the data.
• RP7: Interactive Filtering
  Interactively remove or add data with filter controls.
• RP8: Adjust Data Density
  Use fewer data points when less space.
• RP9: Changing the Chart Type
  Change the chart type to better fit the device limitations.

Responsive Line Chart

Responsive Bar Chart

Responsive Stacked Area Chart

Responsive Scatter Plot

Responsive Scatter Plot

Responsive Choropleth Map

Responsive Node-Link Chart

Software Libraries

• RespVis from TU Graz.
• rdv from Nick Rabinowitz.
• Chart.js from multiple github contributors.
• Pancake from Rich Harris (NYT Graphics Editor).
• HighCharts from Highsoft.
• ApexCharts from Ideare Inc.
• RGraph

RespVis Framework

• Author: Peter Oberrauner.
• Responsive data visualisations based on flexible components.
• Language: TypeScript.
• License: MIT.
• Supported chart types:
  • Bar Charts (normal, grouped, stacked).
  • Scatterplot.
• Links:
  • Live demo - https://respvis.netlify.app/
  • Source - https://github.com/AlmostBearded/respvis

RDV

• Author: Nick Rabinowitz.
• Language: JavaScript.
• License: MIT.
• Source: https://github.com/nrabinowitz/rdv
• Code Example:

          
        var chart = barchart();
  
        // create vis container
        var vis = d3.select('#vis').append('svg')
            .call(chart);
  
        var data = createData(dataSize);
        chart.data(data).render();
          
        

RDV Live Example

Data Size

Visualization Size

Output

Chart.js

• Many different chart types, rendered in canvas.
• Language: JavaScript.
• License: MIT.
• Source: https://github.com/chartjs/Chart.js
• More or less responsive, axis labels redrawn

Pancake

• Author: Rich Harris.
• Charting library for Svelte, renders with SVG.
• Languages: Svelte, JavaScript.
• License: MIT.
• Source: https://github.com/Rich-Harris/pancake
• Responsive without the need of JS, but just makes everything fitting without removing or modifiying something.
• Also text changes possible.
• Technical explanation: https://dev.to/richharris/a-new-technique-for-making-responsive-javascript-free-charts-gmp

HighCharts

• By Highsoft.
• SVG-based charting.
• Language: JavaScript.
• License: Paid, Creative Commons Attribution-Non-Commercial.
• Source: https://www.highcharts.com/

ApexCharts

• By Ideare Inc.
• JS charting library, renders in SVG.
• Language: JS.
• Integrations for Angular, Vue, React, ...
• License: MIT.
• Source: https://github.com/apexcharts/apexcharts.js

RGraph

• JS charting library, supports canvas and SVG.
• Language: JS.
• License: MIT.
• Source: https://github.com/heyesr/rgraph/

Software Editors

• Hoffswell Editor from Jane Hoffswell.

Hoffswell Editor

• Best Paper Award at CHI 2020.
• System for Creating Responsive Visualizations for Cross-Platforms.

• Demo of the example shown in the picture below:
  https://youtu.be/wIvh6UBfMW0&t=38s