Time-Series Plots Integrated in Parallel-Coordinates Displays [1]

Paper Summary

Gruendl et. al. [1] describe parallel-coordinates with integrated time-series plots. The parallel-coordinate plot is extended along the third dimension (z-axis) which allows to visualize time-dependent multivariate data. Each time-series plot relates to one time-dependent attribute and is drawn on perspectively distorted rectangles which are embedded between two axis of attributes. The time-series plot show the change of the attribute over time for many data records. A semi-transparent panel, that connects two time-series plots and can be moved along the z-axis, helps to explore the relationship between two attributes over time. Typical interaction methods used for parallel-coordinates like brushing are also possible.

Implementation

The plot is implemented (code documentation) using JavaScript and three.js [2] (script.js, index.html). The data is preprocessed using a Python script (prepare.py) and stored in a file vertices.vbo. The lines of the parallel-coordinates plot are drawn using cubic bezier curves while spline curves are used for the time series plots. Due to limitations of WebGL the linewidth parameter is ignored on most platformes [3].

Data

Historical hourly weather data for the year 2017 of three Canadian (blue), six Israeli (white) and 29 US cities (yellow). Five different attributes are measured and visualized: Humidity, pressure, temperature, wind direction and wind speed.

Controls

References

  1. Gruendl, Henning, et al. "Time-Series Plots Integrated in Parallel-Coordinates Displays." Computer Graphics Forum. Vol. 35. No. 3. 2016.
  2. https://threejs.org/
  3. https://www.kaggle.com/selfishgene/historical-hourly-weather-data
  4. https://threejs.org/docs/#api/en/materials/LineBasicMaterial.linewidth