Horizon chart

Last updated
This image is an example of a horizon chart, illustrating a series of 13 datasets spanning from 2010 to 2020. Horizon-chart example.svg
This image is an example of a horizon chart, illustrating a series of 13 datasets spanning from 2010 to 2020.

A horizon chart or horizon graph is a 2-dimensional data visualization 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 visualization for precisely pinpointing specific values. Instead, its strength lies in providing an overview and highlighting patterns and outliers in the data. [1]

Contents

History

The technique of constructing the horizon chart from an area chart was first developed by Takafumi Saito et al. at the Tokyo University of Agriculture and Technology in 2005. [2] This technique was referred to as two-tone pseudo coloring. Subsequently, Panopticon Software independently commercialized the procedure and referred to the resulting visualizations as horizon charts. [3] [4]

Overview

The figure illustrates the five steps involved in transforming an area chart into a horizon chart:A. Define a horizontal axis to differentiate positive values from negative values. B. Reflect negative values above the axis, using blue for positive values and red for negative values. C. Divide the graph into distinct bands. D. Adjust the opacity of the areas based on the number of subdivisions. E. Layer the obtained bands on top of each other to create the final horizon chart. Horizon-chart-from-area-chart.svg
The figure illustrates the five steps involved in transforming an area chart into a horizon chart:A. Define a horizontal axis to differentiate positive values from negative values. B. Reflect negative values above the axis, using blue for positive values and red for negative values. C. Divide the graph into distinct bands. D. Adjust the opacity of the areas based on the number of subdivisions. E. Layer the obtained bands on top of each other to create the final horizon chart.

The horizon chart is a variation of the area chart. Having established a horizontal axis, negative values are mirrored over the horizontal axis, while positive values retain their position. As an alternative approach, rather than reflecting negative values, they can be shifted so that the smaller value aligns with the horizontal axis. Layers are formed by dividing the areas into equal horizontal intervals and overlaying the resulting bands. [2]

Color is an essential visual element in horizon charts. It serves to differentiate positive values from negative values, and its intensity corresponds to the magnitude of the values. Typically, the color of each area in the horizon chart is obtained by overlaying multiple transparent bands, with more intense colors indicating larger values and less intense colors representing smaller values. [1]

Horizon charts facilitate a reduction in vertical space, resulting in a more compact chart that resembles a heat map. This enables the consolidation of a substantial volume of data into a single visualization. The compact nature of the horizon chart enables easy comparison of different data series within a single visualization. It also lends itself well to the creation of small multiples, where multiple horizon charts can be displayed side by side to analyze and compare various datasets simultaneously. This compact design enhances the efficiency and effectiveness of data analysis and interpretation. [5] [6] [7]

Chart construction

Horizon chart displaying the difference between greenhouse gas emissions of some European country and the corresponding European average for each year, ranging from 2012 to 2021. European greenhouse-emission 2012-2021.svg
Horizon chart displaying the difference between greenhouse gas emissions of some European country and the corresponding European average for each year, ranging from 2012 to 2021.

When creating a horizon chart, the selection of the origin for the vertical axis, which determines the placement of the horizontal axis, is crucial. In most cases, the origin is set to zero. However, this characteristic of the horizon chart can be leveraged to emphasize trends based on an arbitrary value. By selecting a different origin point, such as a specific threshold or benchmark, trends and comparisons can be highlighted in relation to that value. This flexibility allows for the visualization to be tailored to specific analytical needs or to draw attention to particular trends or deviations from a chosen reference point. Once the origin of the vertical axis is determined, the quantitative variable is assigned to the vertical axis, while the continuous variable is assigned to the horizontal axis. [7] The band layering process in a horizon chart involves dividing the range of values for a dataset into equal horizontal intervals and overlaying these bands to create the final chart. This is the main feature of an horizon chart, enabling its compact visualization. The small size of the final visualization, allows the comparison of multiple sets of data in a given series. [7]

Regarding the color scheme in a horizon chart, it is common to utilize a diverging color scheme, like red and blue. Red is typically used to represent negative values or values with a negative meaning, while blue is employed to indicate positive values or values with a positive meaning. [2] This color scheme helps visually distinguish between positive and negative values, aiding in the interpretation and understanding of the chart. [7] In their 2005 article, Saito et al. proposed a different approach to color usage in horizon charts. They utilized the concept of discrete coloring, where the range of the function is divided into multiple sequential intervals, and a distinct color is assigned to each interval. This allows for the precise reading of values based on color. Unlike divergent colors (such as red and blue), the focus is on using a continuously changing scale of colors to represent the data accurately. By employing this method, the horizon chart enables readers to interpret specific values based on the assigned colors within the chart. [6]

Implementation

Horizon charts can be created using various open-source tools. These tools provide the necessary functionalities to generate horizon charts from data. Some popular open-source options for creating horizon charts include D3.js, [5] R [9] and RAWgraphs [10] among others.

See also

Related Research Articles

Biostatistics is a branch of statistics that applies statistical methods to a wide range of topics in biology. It encompasses the design of biological experiments, the collection and analysis of data from those experiments and the interpretation of the results.

<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">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">Scatter plot</span> Plot using the dispersal of scattered dots to show the relationship between variables

A scatter plot, also called a scatterplot, scatter graph, scatter chart, scattergram, or scatter diagram, is a type of plot or mathematical diagram using Cartesian coordinates to display values for typically two variables for a set of data. If the points are coded (color/shape/size), one additional variable can be displayed. The data are displayed as a collection of points, each having the value of one variable determining the position on the horizontal axis and the value of the other variable determining the position on the vertical axis.

<span class="mw-page-title-main">False color</span> Methods of visualizing information by translating to colors

False colors and pseudo colors respectively refers to a group of color rendering methods used to display images in colors which were recorded in the visible or non-visible parts of the electromagnetic spectrum. A false-color image is an image that depicts an object in colors that differ from those a photograph would show. In this image, colors have been assigned to three different wavelengths that human eyes cannot normally see.

<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 plots are a common method of visualizing high-dimensional datasets to analyze multivariate data having multiple variables, or attributes.

<span class="mw-page-title-main">Choropleth map</span> Type of data visualization for geographic regions

A choropleth map is a type of statistical thematic map that uses pseudocolor, meaning color corresponding with an aggregate summary of a geographic characteristic within spatial enumeration units, such as population density or per-capita income.

<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">Waterfall chart</span> Type of floating column bar chart

A waterfall chart is a form of data visualization that helps in understanding the cumulative effect of sequentially introduced positive or negative values. These intermediate values can either be time based or category based. The waterfall chart is also known as a flying bricks chart or Mario chart due to the apparent suspension of columns (bricks) in mid-air. Often in finance, it will be referred to as a bridge.

<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.

A dot chart or dot plot is a statistical chart consisting of data points plotted on a fairly simple scale, typically using filled in circles. There are two common, yet very different, versions of the dot chart. The first has been used in hand-drawn graphs to depict distributions going back to 1884. The other version is described by William S. Cleveland as an alternative to the bar chart, in which dots are used to depict the quantitative values associated with categorical variables.

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

An area chart or area graph displays graphically quantitative data. It is based on the line chart. The area between axis and line are commonly emphasized with colors, textures and hatchings. Commonly one compares two or more quantities with an area chart.

<span class="mw-page-title-main">Plot (graphics)</span> Graphical technique for data sets

A plot is a graphical technique for representing a data set, usually as a graph showing the relationship between two or more variables. The plot can be drawn by hand or by a computer. In the past, sometimes mechanical or electronic plotters were used. Graphs are a visual representation of the relationship between variables, which are very useful for humans who can then quickly derive an understanding which may not have come from lists of values. Given a scale or ruler, graphs can also be used to read off the value of an unknown variable plotted as a function of a known one, but this can also be done with data presented in tabular form. Graphs of functions are used in mathematics, sciences, engineering, technology, finance, and other areas.

<span class="mw-page-title-main">Greedy coloring</span> One-by-one assignment of colors to graph vertices

In the study of graph coloring problems in mathematics and computer science, a greedy coloring or sequential coloring is a coloring of the vertices of a graph formed by a greedy algorithm that considers the vertices of the graph in sequence and assigns each vertex its first available color. Greedy colorings can be found in linear time, but they do not, in general, use the minimum number of colors possible.

<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">Motion chart</span>

A motion chart is a dynamic bubble chart which allows efficient and interactive exploration and visualization of longitudinal multivariate data. Motion charts provide mechanisms for mapping ordinal, nominal and quantitative variables onto time, 2D coordinate axes, size, colors, glyphs and appearance characteristics, which facilitate the interactive display of multidimensional and temporal data.

D3.js is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of Scalable Vector Graphics (SVG), HTML5, and Cascading Style Sheets (CSS) standards. It is the successor to the earlier Protovis framework. Its development was noted in 2011, as version 2.0.0 was released in August 2011. With the release of version 4.0.0 in June 2016, D3 was changed from a single library into a collection of smaller, modular libraries that can be used independently.

<span class="mw-page-title-main">Misleading graph</span> Graph that misrepresents data

In statistics, a misleading graph, also known as a distorted graph, is a graph that misrepresents data, constituting a misuse of statistics and with the result that an incorrect conclusion may be derived from it.

Looker Studio, formerly Google Data Studio, is an online tool for converting data into customizable, informative reports and dashboards. Looker Studio was announced by Google on March 15, 2016 as part of the enterprise Google Analytics 360 suite, and a free version was made available for individuals and small teams in May 2016.

References

  1. 1 2 Schwabish, Jonathan A. (2021). Better data visualizations: a guide for scholars, researchers, and wonks. New York: Columbia University Press. pp. 164–166. ISBN   978-0-231-19311-5.
  2. 1 2 3 Heer, Jeffrey; Kong, Nicholas; Agrawala, Maneesh (2009-04-04). "Sizing the horizon: The effects of chart size and layering on the graphical perception of time series visualizations". Proceedings of the SIGCHI Conference on Human Factors in Computing Systems. CHI '09. New York, NY, USA: Association for Computing Machinery. pp. 1303–1312. doi:10.1145/1518701.1518897. ISBN   978-1-60558-246-7. S2CID   15483568.
  3. ↑ Camoes, Jorge (2012-06-11). "The Horizon Graph Is a Reorderable Matrix Too: Unemployment Rate 1976-2012". The Excel Charts Blog. Retrieved 2023-07-05.
  4. ↑ Few, Stephen (2008). "Time on the Horizon". Perceptual Edge
  5. 1 2 Bostock, Mike (2023-06-21). "Horizon Chart". Observable. Retrieved 2023-07-05.
  6. 1 2 Saito, T.; Miyamura, H.N.; Yamamoto, M.; Saito, H.; Hoshiya, Y.; Kaseda, T. (2005). "Two-tone pseudo coloring: Compact visualization for one-dimensional data". IEEE Symposium on Information Visualization, 2005. INFOVIS 2005. IEEE. pp. 173–180. doi:10.1109/INFVIS.2005.1532144. ISBN   978-0-7803-9464-3. S2CID   17952223.
  7. 1 2 3 4 Reijner, Hannes. "The Development of the Horizon Graph". Panopticon Software
  8. ↑ "Greenhouse gas emissions by source sector (source: EEA)". ec.europa.eu. Retrieved 2023-07-06.
  9. ↑ kjytay (2022-03-31). "What is a horizon chart? | R-bloggers" . Retrieved 2023-07-05.
  10. ↑ "How to make a horizon graph". www.rawgraphs.io. Retrieved 2023-07-05.

Further reading


This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.