Streamgraph

Last updated
A streamgraph of a Twitter user's commonly used terms over time JCDL 2009 Twitter Stream Graph (cropped).png
A streamgraph of a Twitter user's commonly used terms over time

A streamgraph, or stream graph, is a type of stacked area graph which is displaced around a central axis, resulting in a flowing, organic shape. Unlike a traditional stacked area graph in which the layers are stacked on top of an axis, in a streamgraph the layers are positioned to minimize their "wiggle". More formally, the layers are displaced to minimize the sum of the squared slopes of each layer, weighted by the area of the layer. [1] Streamgraphs display data with only positive values, and are not able to represent both negative and positive values. [2]

Streamgraphs and their use were popularized by Amanda Cox in a February 2008 New York Times article on movie box office revenues. [3] Cox got the idea from then-undergraduate Lee Byron, [1] who had used a similar method for visualizing his music listening history. [4]

A symmetrical ThemeRiver of music listened to by a person LastGraph example.svg
A symmetrical ThemeRiver of music listened to by a person

A related graph, sometimes conflated with streamgraphs, is the ThemeRiver, in which the "silhouette" of the graph is symmetrically arranged around the central axis. [1]

Streamgraphs were found to be more readable than basic stacked area graphs or ThemeRivers for value comparison tasks. [5]

Streamgraphs are officially supported by Matplotlib [6] and D3.js. [7]

Marco Di Bartolomeo and Yifan Hu (2016) propose several improvements to streamgraphs, such as using 1-norm minimization instead of 2-norm minimization. [2]

Related Research Articles

<span class="mw-page-title-main">Logarithmic scale</span> Measurement scale based on orders of magnitude

A logarithmic scale is a way of displaying numerical data over a very wide range of values in a compact way. As opposed to a linear number line in which every unit of distance corresponds to adding by the same amount, on a logarithmic scale, every unit of length corresponds to multiplying the previous value by the same amount. Hence, such a scale is nonlinear. In nonlinear scale, the numbers 1, 2, 3, 4, 5, and so on would not be equally spaced. Rather, the numbers 10, 100, 1000, 10000, and 100000 would be equally spaced. Likewise, the numbers 2, 4, 8, 16, 32, and so on, would be equally spaced. Often exponential growth curves are displayed on a log scale, otherwise they would increase too quickly to fit within a small graph.

<span class="mw-page-title-main">Chart</span> Graphical representation of data

A chart is a graphical representation for data visualization, in which "the data is represented by symbols, such as bars in a bar chart, lines in a line chart, or slices in a pie chart". A chart can represent tabular numeric data, functions or some kinds of quality structure and provides different info.

<span class="mw-page-title-main">Isometric projection</span> Method for visually representing three-dimensional objects

Isometric projection is a method for visually representing three-dimensional objects in two dimensions in technical and engineering drawings. It is an axonometric projection in which the three coordinate axes appear equally foreshortened and the angle between any two of them is 120 degrees.

<span class="mw-page-title-main">Graph drawing</span> Visualization of node-link graphs

Graph drawing is an area of mathematics and computer science combining methods from geometric graph theory and information visualization to derive two-dimensional depictions of graphs arising from applications such as social network analysis, cartography, linguistics, and bioinformatics.

<span class="mw-page-title-main">Bar chart</span> Type of chart

A bar chart or bar graph is a chart or graph that presents categorical data with rectangular bars with heights or lengths proportional to the values that they represent. The bars can be plotted vertically or horizontally. A vertical bar chart is sometimes called a column chart.

<span class="mw-page-title-main">Infographic</span> Graphic visual representation of information

Infographics are graphic visual representations of information, data, or knowledge intended to present information quickly and clearly. They can improve cognition by using graphics to enhance the human visual system's ability to see patterns and trends. Similar pursuits are information visualization, data visualization, statistical graphics, information design, or information architecture. Infographics have evolved in recent years to be for mass communication, and thus are designed with fewer assumptions about the readers' knowledge base than other types of visualizations. Isotypes are an early example of infographics conveying information quickly and easily to the masses.

<span class="mw-page-title-main">Parallel coordinates</span> Chart displaying multivariate data

Parallel coordinates are a common way of visualizing and analyzing high-dimensional datasets.

<span class="mw-page-title-main">Data and information visualization</span> Visual representation of data

Data and information visualization is the practice of designing and creating easy-to-communicate and easy-to-understand graphic or visual representations of a large amount of complex quantitative and qualitative data and information with the help of static, dynamic or interactive visual items. Typically based on data and information collected from a certain domain of expertise, these visualizations are intended for a broader audience to help them visually explore and discover, quickly understand, interpret and gain important insights into otherwise difficult-to-identify structures, relationships, correlations, local and global patterns, trends, variations, constancy, clusters, outliers and unusual groupings within data. When intended for the general public to convey a concise version of known, specific information in a clear and engaging manner, it is typically called information graphics.

<span class="mw-page-title-main">Heat map</span> Data visualization technique

A heat map is a 2-dimensional data visualization technique that represents the magnitude of individual values within a dataset as a color. The variation in color may be by hue or intensity.

<span class="mw-page-title-main">Domain coloring</span> Technique for visualizing complex functions

In complex analysis, domain coloring or a color wheel graph is a technique for visualizing complex functions by assigning a color to each point of the complex plane. By assigning points on the complex plane to different colors and brightness, domain coloring allows for a function from the complex plane to itself — whose graph would normally require four space dimensions — to be easily represented and understood. This provides insight to the fluidity of complex functions and shows natural geometric extensions of real functions.

<span class="mw-page-title-main">Pat Hanrahan</span> American computer graphics researcher

Patrick M. Hanrahan is an American computer graphics researcher, the Canon USA Professor of Computer Science and Electrical Engineering in the Computer Graphics Laboratory at Stanford University. His research focuses on rendering algorithms, graphics processing units, as well as scientific illustration and visualization. He has received numerous awards, including the 2019 Turing Award.

<span class="mw-page-title-main">Line chart</span> Chart type

A line chart or line graph, also known as curve chart, is a type of chart that displays information as a series of data points called 'markers' connected by straight line segments. It is a basic type of chart common in many fields. It is similar to a scatter plot except that the measurement points are ordered and joined with straight line segments. A line chart is often used to visualize a trend in data over intervals of time – a time series – thus the line is often drawn chronologically. In these cases they are known as run charts.

<span class="mw-page-title-main">Bubble chart</span> Type of chart

A bubble chart is a type of chart that displays three dimensions of data. Each entity with its triplet (v1, v2, v3) of associated data is plotted as a disk that expresses two of the vi values through the disk's xy location and the third through its size. Bubble charts can facilitate the understanding of social, economical, medical, and other scientific relationships.

<span class="mw-page-title-main">Voreen</span> Volume visualization library and development platform

Voreen is an open-source volume visualization library and development platform. Through the use of GPU-based volume rendering techniques it allows high frame rates on standard graphics hardware to support interactive volume exploration.

<span class="mw-page-title-main">Layered graph drawing</span> Graph drawing with vertices in horizontal layers

Layered graph drawing or hierarchical graph drawing is a type of graph drawing in which the vertices of a directed graph are drawn in horizontal rows or layers with the edges generally directed downwards. It is also known as Sugiyama-style graph drawing after Kozo Sugiyama, who first developed this drawing style.

Jarke J. (Jack) van Wijk is a Dutch computer scientist, a professor in the Department of Mathematics and Computer Science at the Eindhoven University of Technology, and an expert in information visualization.

<span class="mw-page-title-main">Jean-Daniel Fekete</span>

Jean-Daniel Fekete is a French computer scientist.

Michael Bostock is an American computer scientist and data visualization specialist. He is one of the co-creators of Observable and a key developer of D3.js, a JavaScript library used to produce dynamic, interactive data visualizations for web browsers. He also contributed to the preceding Protovis framework.

<span class="mw-page-title-main">Kwan-Liu Ma</span> American computer scientist

Kwan-Liu Ma is an American computer scientist. He was born and grew up in Taipei, Taiwan and came to the United States pursuing advanced study in 1983. He is a distinguished professor of computer science at the University of California, Davis. His research interests include visualization, computer graphics, human computer interaction, and high-performance computing.

<span class="mw-page-title-main">Horizon chart</span>

A horizon chart or horizon graph is a 2-dimensional data visualisation displaying a quantitative data over a continuous interval, most commonly a time period. The horizon chart is valuable for enabling readers to identify trends and extreme values within large datasets. Similar to sparklines and ridgeline plot, horizon chart may not be the most suitable visualisation for precisely pinpointing specific values. Instead, its strength lies in providing an overview and highlighting patterns and outliers in the data.

References

  1. 1 2 3 Byron, Lee; Wattenberg, Martin (November–December 2008). "Stacked Graphs – Geometry & Aesthetics". IEEE Transactions on Visualization and Computer Graphics. IEEE Computer Society. 14 (6): 1245–1252. doi:10.1109/TVCG.2008.166. ISSN   1077-2626. PMID   18988970. S2CID   15281429.
  2. 1 2 Bartolomeo, Marco Di; Hu, Yifan (2016). "There is More to Streamgraphs than Movies: Better Aesthetics via Ordering and Lassoing". Computer Graphics Forum. 35 (3): 341–350. doi:10.1111/cgf.12910. ISSN   1467-8659. S2CID   17724977.
  3. Matthew Bloch; Lee Byron; Shan Carter; Amanda Cox (23 February 2008). "The Ebb and Flow of Movies: Box Office Receipts 1986–2007". The New York Times. Retrieved 24 July 2012.
  4. "Talk to the Newsroom: Graphics Director Steve Duenes". The New York Times. 2008-02-25. ISSN   0362-4331 . Retrieved 2021-04-24.
  5. Thudt, Alice; Walny, Jagoda; Perin, Charles; Rajabiyazdi, Fateme; MacDonald, Lindsay; Vardeleon, Riane; Greenberg, Saul; Carpendale, Sheelagh (June 2016). "Assessing the Readability of Stacked Graphs". Proceedings of the 42nd Graphics Interface Conference. GI '16. Victoria, British Columbia, Canada: Canadian Human-Computer Communications Society: 167–174. ISBN   978-0-9947868-1-4.
  6. "matplotlib.axes.Axes.stackplot — Matplotlib 3.1.2 documentation". matplotlib.org. Retrieved 2020-10-06.
  7. "d3/d3-shape". GitHub. Retrieved 2020-10-06.