Chart Catalogue on Data Toolbox

Write visualization specs in JSON to render interactive graphs and charts in real time

Write visualization specs in JSON to render interactive graphs and charts in real time

A data variable is sorted in ascending order to show its distribution. A data width called a “bin” is specified, and the count of data points within each bin is displayed. The bin width and the resulting counts determine the appearance of the histogram.

If there are too few bins, the appearance becomes too coarse and fine differences go unnoticed. Conversely, if there are too many bins, the appearance becomes too detailed, making it difficult to grasp overall trends. The process of adjusting the bin width itself helps in understanding the characteristics of the data.

Box-And‐Whisker Plot

Mon, 01 Jan 0001 00:00:00 +0000

You can create this chart with…

Write visualization specs in JSON to render interactive graphs and charts in real time

This chart uses a box and lines (whiskers) to display five summary statistics. The positions of the box indicate the first quartile (25th percentile), the second quartile (50th percentile), and the third quartile (75th percentile), while the endpoints of the whiskers indicate the minimum and maximum values.

Density Plot

Mon, 01 Jan 0001 00:00:00 +0000

You can create this chart with…

This chart depicts a probability distribution as a smooth curve. When kernel density estimation is used to draw the curve, it is sometimes referred to as a kernel density plot.

Violin Plot

Mon, 01 Jan 0001 00:00:00 +0000

You can create this chart with…

A density plot is mirrored and placed back-to-back, with the equivalent of a box plot drawn inside. The bottom end represents the minimum value, and the top end represents the maximum value. It allows for a more detailed understanding of the data than a box plot.

Ridgeline Plot

Mon, 01 Jan 0001 00:00:00 +0000

Tools that can create this chart…

Write visualization specs in JSON to render interactive graphs and charts in real time

Density plots are displayed in a staggered, overlapping arrangement to compare multiple variables or groups.

Dot Plot

Mon, 01 Jan 0001 00:00:00 +0000

Tools that can create this chart…

Write visualization specs in JSON to render interactive graphs and charts in real time

A frequency distribution is shown with one dot representing one data point. It uses a single variable, with axes arranged in parallel. The horizontal axis represents data values or data classes, while the vertical axis represents frequency, with the number of dots indicating the count.

Beeswarm Plot

Mon, 01 Jan 0001 00:00:00 +0000

You can create this chart with…

This chart displays the distribution of a single data variable using one dot per data point. When showing multiple variables, they can be color-coded within a single chart or arranged side by side. Instead of stacking dots along an axis, dots are drawn as an evenly spaced cluster, so even when data points are concentrated in a particular range, the degree of concentration is visible as a wider area, and individual data points remain distinguishable.

Strip Chart

Mon, 01 Jan 0001 00:00:00 +0000

Tools that can create this chart…

Write visualization specs in JSON to render interactive graphs and charts in real time

Write visualization specs in JSON to render interactive graphs and charts in real time

A one-dimensional scatterplot where each data point is plotted along a single line. Each data point is represented as one dot, showing the distribution of a single variable. Unlike a bee swarm plot, which spreads points organically to avoid overlap, data points are plotted within a pre-defined axis range.

Pie Chart

Mon, 01 Jan 0001 00:00:00 +0000

Tools that can create this chart…

Write visualization specs in JSON to render interactive graphs and charts in real time

The angle within the circle represents the proportional size of data values. In recent years, there have been many negative opinions about its use, but it is perfectly fine as long as inappropriate practices are avoided, such as including too many items or distorting the appearance of proportions with 3D rendering.

The maximum number of items should be around six; if more are needed, consider using a different chart type.

There is also a variant called a donut chart, which has its center hollowed out. Since this makes it impossible to visually read angles, it is best avoided unless precise reading of values by angle is not critical or when it is used for effective presentation purposes.

Mekko Chart

Mon, 01 Jan 0001 00:00:00 +0000

Tools that can create this chart…

This chart is similar to a 100% stacked bar chart but with two axes. Its key feature is the ability to simultaneously show the proportions of two variables. Although it appears simple, it can be surprisingly difficult to interpret, so it is important to supplement it with legends and annotations to aid understanding.

Waffle Chart

Mon, 01 Jan 0001 00:00:00 +0000

Named after the grid-patterned pastry it resembles, this chart arranges 100 squares in a 10x10 grid for a single category and uses color coding to show the proportion of each segment relative to the whole.

Stacked Densities

Mon, 01 Jan 0001 00:00:00 +0000

Tools that can create this chart…

Write visualization specs in JSON to render interactive graphs and charts in real time

Write visualization specs in JSON to render interactive graphs and charts in real time

Multiple variables are displayed simultaneously using density plots, with the full display area representing 100% to show proportions. Unlike a 100% stacked bar chart, this chart can handle continuous variables on the horizontal axis. The vertical axis shows the results of kernel density estimation in relative terms.

Gauge Chart

Mon, 01 Jan 0001 00:00:00 +0000

A semicircle is used to show proportional composition. Beyond simply displaying percentages, it can also represent each individual with a symbol such as a circle, showing both the number of seats and their proportions simultaneously. A well-known use case is displaying the number of seats won in a parliament.

Bar Chart

Mon, 01 Jan 0001 00:00:00 +0000

You can create this chart with…

Write visualization specs in JSON to render interactive graphs and charts in real time

A bar chart represents the magnitude of one measure against one dimension (category) using the length of bars. For example, this is useful when you want to see the population (measure) for each prefecture (dimension). Since most people know how to read bar charts and they convey numerical values accurately through length, they can be used effectively in many situations.

Because bar charts communicate values through length while also implying area, avoid using triangles instead of rectangles. Length and area do not scale proportionally, making it unclear which encoding the reader should use, which can lead to misinterpretation.

There is no fundamental difference between a vertical bar chart (where bars extend vertically) and a horizontal bar chart (where bars extend horizontally). By convention, the independent variable is often placed on the horizontal axis and the dependent variable on the vertical axis, leading to more frequent use of vertical bar charts. However, this convention does not need to be strictly followed.

Vertical bar charts are preferable when:

You want to display a bar chart alongside a line chart in the same space
The display space is wider than it is tall and there are many dimension categories

Horizontal bar charts are preferable when:

The dimension labels contain long text strings
You want to include annotations
The display space is taller than it is wide and there are many dimension categories

Stacked Bar Chart

Mon, 01 Jan 0001 00:00:00 +0000

You can create this chart with…

Write visualization specs in JSON to render interactive graphs and charts in real time

For a single dimension, multiple measures are displayed simultaneously as stacked heights. Each measure is differentiated by color or texture. The measure values are treated as absolute numbers.

Since proportions are conveyed through length, they are easier to perceive accurately than angles in a pie chart. For more precise communication of values, this chart is preferable to a pie chart.

A chart that shows measure values as proportions is distinguished by the name “100% stacked bar chart.” The entire chart display area represents 100%, and each measure is shown as a proportion of the whole.

Grouped Bar Chart

Mon, 01 Jan 0001 00:00:00 +0000

Tools that can create this chart…

A single measure is shown as the bar height across multiple dimensions (categories). Bars are positioned so that groups are visually identifiable. Avoid combining grouped bar chart grouping with stacked bar chart stacking (stacking measures) at the same time.

Heatmap

Mon, 01 Jan 0001 00:00:00 +0000

Tools that can create this chart…

Write visualization specs in JSON to render interactive graphs and charts in real time

Write visualization specs in JSON to render interactive graphs and charts in real time

Data values are represented by color within a grid of tiled rectangles. This chart is not for examining correlations; rather, it displays colors in a sequential order, such as from top-left to bottom-right like a calendar. Although it looks similar, the chart used for examining correlations is called a correlogram.

Bullet Graph

Mon, 01 Jan 0001 00:00:00 +0000

You can create this chart with…

Displayed alongside a bar chart, this graph shows the difference from a target and qualitative evaluations (such as good, average, or poor) inside the bar. A thin rule line running in the same direction as the bar may be used to indicate specific quantities, or to mark the target value as a reference point.

Symbol Chart

Mon, 01 Jan 0001 00:00:00 +0000

Data values are represented using symbols (such as circles or squares), with their area or color encoding the values. The arrangement order is not fixed; symbols may be placed from the center outward in descending order of size, or arranged from left to right.

Isotype Chart

Mon, 01 Jan 0001 00:00:00 +0000

Tools that can create this chart…

Write visualization specs in JSON to render interactive graphs and charts in real time

Pictograms are used to represent quantities by lining up the corresponding number of icons. By using different types of pictograms, categories can be indicated. However, it is preferable that the pictograms are relevant to the theme being addressed.

Radar Chart

Mon, 01 Jan 0001 00:00:00 +0000

You can create this chart with…

This is one of the best charts for comparing groups with multiple variables in a polar coordinate system. Typically, the variables are evenly spaced at angles determined by dividing the full circle (360 degrees) by the number of variables. It can be thought of as parallel coordinates mapped onto a polar coordinate system.

Polar Area Chart

Mon, 01 Jan 0001 00:00:00 +0000

Tools that can create this chart…

Write visualization specs in JSON to render interactive graphs and charts in real time

Write visualization specs in JSON to render interactive graphs and charts in real time

A chart in a polar coordinate system with equal angles, where qualitative data is assigned to the angle and quantitative data is compared by the distance from the origin. It can be thought of as a bar chart arranged in polar coordinates.

Parallel Coordinates

Mon, 01 Jan 0001 00:00:00 +0000

Tools that can create this chart…

The chart name itself describes the coordinate system, with multiple axes arranged in parallel. Compared to radar charts, the key differences are: the ability to compare more variables simultaneously, the ability to find correlated variables by reordering the axes, and the ability to perform “brushing” – filtering data along specific axes (depending on the tool’s capabilities).

Parallel Sets

Mon, 01 Jan 0001 00:00:00 +0000

Inspired by parallel coordinates, but with key differences: it represents the frequency of categorical data and uses areas instead of lines. The chart is often colored according to the values of the highest-priority axis, allowing users to explore the chart using color as a guide.

Scatterplot

Mon, 01 Jan 0001 00:00:00 +0000

Tools that can create this chart…

Write visualization specs in JSON to render interactive graphs and charts in real time

Write visualization specs in JSON to render interactive graphs and charts in real time

Used to examine the correlation between two measure variables. To explore correlations among variables within a dataset, use a scatterplot matrix.

Bubble Chart

Mon, 01 Jan 0001 00:00:00 +0000

You can create this chart with…

Similar to a scatter plot, but with two additional visual attributes – circle size and color – to which two more variables can be assigned. This makes it effective for examining correlation trends while simultaneously checking whether characteristics differ across groups. In this context, a chart that adds two visual variables to a scatter plot is referred to as a bubble chart, distinguishing it from a symbol chart that uses circles.

Scatterplot Matrix

Mon, 01 Jan 0001 00:00:00 +0000

Tools that can create this chart…

Write visualization specs in JSON to render interactive graphs and charts in real time

To exhaustively explore correlations among variables within a dataset, variables are arranged in a matrix and a scatterplot is drawn at each intersection using the corresponding pair of variables, enabling more efficient exploration.

When the two intersecting variables are the same, there is no need to examine correlation, so a histogram is displayed instead. Since the order of two intersecting variables does not matter, the same pair of variables appears in two locations. Rather than displaying the same scatterplot twice, one of the locations may show the correlation coefficient instead.

Correlogram

Mon, 01 Jan 0001 00:00:00 +0000

You can create this chart with…

Used when you want to identify correlations more concisely than with a scatter plot matrix. Variables are arranged in a matrix in the same manner, and the correlation coefficient for each pair of variables is displayed – primarily through color – at their intersection. Redundant combinations (identical variable pairs and previously shown pairs) are omitted.

Word Crowd

Mon, 01 Jan 0001 00:00:00 +0000

You can create this chart with…

Word Cloud

日本語に特化したWord Cloud

word-cloud.dataviz.jp

Words appearing in a document, paragraph, or text are sized based on their frequency and arranged around the center of the chart drawing area. However, since the original character length of words affects their visual size, this chart is not well suited for reading precise numerical values.

Text color can encode an additional variable, but many word clouds in the wild use meaningless random coloring, which is inappropriate as a visual expression (it becomes noise). If there is no suitable variable to map, there is no need to force colorful styling.

Word Bubbie

Mon, 01 Jan 0001 00:00:00 +0000

You can create this chart with…

Write visualization specs in JSON to render interactive graphs and charts in real time

Word Cloud

日本語に特化したWord Cloud

word-cloud.dataviz.jp

This representation addresses a shortcoming of word clouds – that the original character length of words affects their visual size, making accurate numerical reading difficult. Circles are placed behind each word, and the area of each circle represents the numerical value. While word font size does not encode the value, words may be drawn at several different sizes for classified grouping. The circles are typically distributed evenly around the center point.

Venn Diagram, Euler Diagram

Mon, 01 Jan 0001 00:00:00 +0000

Visualizes textual data belonging to multiple attributes (more like tags than categories, in the sense that items can belong to multiple attributes simultaneously). It is known as a diagram that uses closed curves (closed shapes formed by closed lines) to represent set-theoretic relationships.

A Venn diagram is used in mathematics, logic, and other fields when “all intersections of sets must be shown.” A chart that only needs to show the assumed combinations is called an Euler diagram.

While the name “Venn diagram” is more widely recognized, in practice Euler diagrams are used more frequently. It is worth noting this discrepancy.

Stem and Leaf PIot

Mon, 01 Jan 0001 00:00:00 +0000

The basic structure displays data values split into two parts. The stem represents the leading portion of the data and is usually arranged vertically. The leaf represents the detailed portion and is arranged horizontally. It resembles a histogram, but instead of showing the distribution with bars (area), the actual data values are written directly. A train station timetable is a perfect example of this chart.

Typographic Scatterpiots

Mon, 01 Jan 0001 00:00:00 +0000

Instead of dots in a scatterplot, the actual typefaces or words representing data values are displayed directly. Variations include bubble chart adaptations, where additional variables are assigned to color or size.

Line Chart with River Labei

Mon, 01 Jan 0001 00:00:00 +0000

Text representing data values is displayed directly inside or in place of the lines in a line chart.

Parallel Coordinates with River Label

Mon, 01 Jan 0001 00:00:00 +0000

Text representing data values is displayed directly inside or in place of the lines in a parallel coordinates chart.

Typographic Graph

Mon, 01 Jan 0001 00:00:00 +0000

A network graph diagram where related words are connected as links. The nodes display the actual typefaces or words directly, and the links are represented as lines.

Typographic Mekko chart

Mon, 01 Jan 0001 00:00:00 +0000

The corresponding data values are displayed directly as text inside the rectangles of a standard Mekko chart.

Typographic Stacked Bar Chart

Mon, 01 Jan 0001 00:00:00 +0000

The corresponding data values are displayed directly as text inside the rectangles of a standard stacked bar chart.

Text Skimming

Mon, 01 Jan 0001 00:00:00 +0000

The paragraph of text takes center stage, with internal data applied to it. To improve the readability of the text, inherent characteristics are processed as internal data and used for visual representation.

Spark words

Mon, 01 Jan 0001 00:00:00 +0000

The paragraph of text takes center stage, with external data applied to it. Data related to the text is rendered as charts or other visualizations, and the colors used in those visualizations are applied to the corresponding words or sentences within the text, enhancing the cross-referenceability between the text and external data.

Line Chart

Mon, 01 Jan 0001 00:00:00 +0000

Tools that can create this chart…

A commonly used chart type. The horizontal axis represents time, and a non-time variable is assigned to the vertical axis. By connecting data points with lines, the slope of the lines visually conveys the magnitude of change.

Area chart

Mon, 01 Jan 0001 00:00:00 +0000

Tools that can create this chart…

Write visualization specs in JSON to render interactive graphs and charts in real time

Write visualization specs in JSON to render interactive graphs and charts in real time

An area chart has nearly the same structure as a line chart, with the difference being that the area enclosed between the line and the axis is filled with color. When displaying multiple items in a single chart, be aware that overlapping areas may obscure the data. In such cases, consider using semi-transparent fills, re-aggregating the data so that layers stack without overlapping along the Z-axis, or using a stream graph instead.

Stream graph

Mon, 01 Jan 0001 00:00:00 +0000

You can create this chart with…

Write visualization specs in JSON to render interactive graphs and charts in real time

Similar to a stacked area chart, but without an explicit horizontal axis. Instead, it uses both upward and downward directions from the baseline to display quantities as areas. Depending on the tool used, the shape of the graph may vary based on the order of columns in the input data file.

Connected Scatterplot

Mon, 01 Jan 0001 00:00:00 +0000

You can create this chart with…

Write visualization specs in JSON to render interactive graphs and charts in real time

Like a standard scatter plot, variables are assigned to two axes. The plotted points are then connected in chronological order. Neither axis uses a time scale. This chart can effectively represent temporal differences between two variables as loop-shaped patterns, and distinctive features of the shape lend themselves well to annotations. However, there is a trade-off between its novelty and the difficulty of interpretation.

Diverging Bar Chart

Mon, 01 Jan 0001 00:00:00 +0000

You can create this chart with…

Write visualization specs in JSON to render interactive graphs and charts in real time

This chart uses bar graphs to show changes over time for divergent data – data that deals with opposing sides or increases and decreases.

Diverging Stacked Bar Chart

Mon, 01 Jan 0001 00:00:00 +0000

You can create this chart with…

Write visualization specs in JSON to render interactive graphs and charts in real time

Similar to a diverging bar chart, but with the ability to handle multiple numerical variables simultaneously.

Candlestick Chart

Mon, 01 Jan 0001 00:00:00 +0000

You can create this chart with…

For each unit of time in a time series, this chart simultaneously displays data such as the maximum value, minimum value, opening value, and closing value. It is commonly used for social activities such as stock market price movements, and is also sometimes applied to natural phenomena such as temperature.

Gantt Chart

Mon, 01 Jan 0001 00:00:00 +0000

Tools that can create this chart…

Write visualization specs in JSON to render interactive graphs and charts in real time

Write visualization specs in JSON to render interactive graphs and charts in real time

The horizontal axis represents time, showing the duration for each category. It is used to compare the active periods of people or services, or to show the timeline breakdown of a single project.

Bump chart

Mon, 01 Jan 0001 00:00:00 +0000

You can create this chart with…

Write visualization specs in JSON to render interactive graphs and charts in real time

This chart shows how the ranking of items changes over time. It can be thought of as a simplified line chart focused specifically on changes in rank order. Even when the underlying data is numerical, values are converted to rankings for display.

Time―Distance Diagram

Mon, 01 Jan 0001 00:00:00 +0000

Used in railway timetable diagrams. It has two axes: time and travel distance (marked by stations or place names), and uses lines to show when and where moving objects such as trains are located.

Calendar Heat Map

Mon, 01 Jan 0001 00:00:00 +0000

You can create this chart with…

Data values are displayed primarily through color in cells arranged like a calendar. The calendar layout allows data values to be shown along cyclical time periods such as weeks and months. Rather than discovering periodicity in data without preconceptions, this chart is better suited for examining distributions and cyclical patterns in a format aligned with familiar social conventions.

Circular Chart

Mon, 01 Jan 0001 00:00:00 +0000

You can create this chart with…

Typically starting from the 12 o’clock position, the passage of time is represented along the circumference of a circle, with values shown using lines, areas, or bars. The layout is arranged so that one complete revolution around the circle represents one full time cycle.

Polar Area Chart

Mon, 01 Jan 0001 00:00:00 +0000

Equal angles represent the passage of fixed time intervals, and the distance from the origin indicates the magnitude of another data variable. Florence Nightingale’s coxcomb chart is a famous example of using this chart as a time-series visualization, but in modern practice, it is rarely used for time-series purposes.

Spiral Chart

Mon, 01 Jan 0001 00:00:00 +0000

You can create this chart with…

Typically, time progression is represented along the circumference starting from the 12 o’clock position. Unlike circular charts or polar area charts, which complete in a single revolution, this chart represents data in a spiral pattern to highlight periodicity. However, a drawback is that as the spiral extends to two or three revolutions, comparisons become more difficult.

Dot Map

Mon, 01 Jan 0001 00:00:00 +0000

Tools that can create this chart…

Write visualization specs in JSON to render interactive graphs and charts in real time

Each dot represents one data point (1 dot = 1 data item), showing the distribution of data using dots (circles). No variable is assigned to the size of the dots (maps that do assign a variable to dot size are called symbol maps). Since each dot corresponds one-to-one with individual data, it is possible to search for specific items in space.

Dot Density Map

Mon, 01 Jan 0001 00:00:00 +0000

You can create this chart with…

Write visualization specs in JSON to render interactive graphs and charts in real time

Unlike a dot map, in a dot density map each dot represents multiple data points, showing the distribution of density through dots (circles). No variable is assigned to the size of the dots. Rather than focusing on individual data points, this map is used to understand continuous phenomena across large-scale datasets.

Graduated Symbol Map

Mon, 01 Jan 0001 00:00:00 +0000

A symbol map uses shapes such as circles, squares, stars, or theme-specific figures, with variables assigned to both their size and color. A graduated symbol map is a type of symbol map that uses classified (graduated) data.

Proportional Symbol Map

Mon, 01 Jan 0001 00:00:00 +0000

A type of symbol map that uses unclassified (proportional) data.

3D Bar Chart Map

Mon, 01 Jan 0001 00:00:00 +0000

When data points are distributed continuously, this chart represents data using 3D bars arranged in a grid pattern, encoding values through the area (height), color, and direction (upward or downward) of each bar.

Graduated Flow Map

Mon, 01 Jan 0001 00:00:00 +0000

A flow map is a map that represents the flow or movement between locations, and this type uses classified (graduated) data. Compared to proportional flow maps, it makes it easier to quickly grasp overall general trends.

Proportional Flow Map

Mon, 01 Jan 0001 00:00:00 +0000

A flow map is a map that represents the flow or movement between locations, and this type uses unclassified (proportional) data. Compared to graduated flow maps, it allows for more accurate and detailed analysis.

Choropleth Map

Mon, 01 Jan 0001 00:00:00 +0000

You can create this chart with…

Data values are represented by coloring geographic shapes defined by administrative boundaries such as national or prefectural borders. Ensure that the geographic enumeration units are consistent. While the familiarity of seeing a recognizable map colored in is an advantage, the varying sizes of administrative areas can distort the perceived magnitude of data values. Some choropleth maps classify data into discrete classes, while others do not.

Dasymetric Map

Mon, 01 Jan 0001 00:00:00 +0000

You can create this chart with…

Nearly identical to a choropleth map, but instead of using administrative boundaries, it increases geographic precision by strictly distinguishing uninhabitable areas such as mountains and lakes.

Continuous Cartogram

Mon, 01 Jan 0001 00:00:00 +0000

You can create this chart with…

A map that assigns data values to area is called a cartogram. In a continuous cartogram, the administrative boundaries such as national or prefectural borders are preserved, and data values are assigned not only to color but also to area. Because the boundaries remain intact, adjacent regions influence each other through their distorted areas, resulting in an overall warped shape. There is an engaging quality to seeing a familiar map become distorted.

Non‐Continuous Cartogram

Mon, 01 Jan 0001 00:00:00 +0000

A type of cartogram in which regions are displayed separated at national or prefectural borders, with data values applied to their areas. As a result, regions are not affected by the distortion of adjacent areas.

Pseudo-Continuous Cartogram

Mon, 01 Jan 0001 00:00:00 +0000

Regions such as prefectures are all represented using identical geometric shapes such as circles, squares, or hexagons, with data values expressed through area and coloring. Since geometric shapes are used instead of actual terrain, a key advantage is that it is easier to compare data values by area.

Gridded Cartogram

Mon, 01 Jan 0001 00:00:00 +0000

Regions such as prefectures or municipalities are all represented using identical shapes such as circles, squares, or hexagons, where the number of shapes represents area and coloring represents data values.

Isolines Map

Mon, 01 Jan 0001 00:00:00 +0000

Unclassified data is used to divide regions with isolines. Rather than splitting the data into discrete categories, the placement of isolines is determined based on the natural patterns of change in the data. The spacing between isolines is adjusted according to the magnitude of data variation. Where data changes rapidly, isolines are densely packed; where changes are gradual, they are spaced further apart.

Isopleths Map

Mon, 01 Jan 0001 00:00:00 +0000

Classified data is used to color regions delineated by isopleths (contour lines). Data values are categorized into defined classes, with each class assigned a corresponding color or texture. By dividing data into discrete categories, characteristics can be clearly and distinctly revealed. Although colloquially referred to as a “heat map,” this is not its formal name. To distinguish it from the non-map-based chart of the same name, it is recommended to use the proper term.

Chartmaps

Mon, 01 Jan 0001 00:00:00 +0000

You can create this chart with…

Statistical charts reflecting regional data are drawn on a map. In the case of pie charts, a variable can also be assigned to the overall area of each pie. This can be thought of as small multiples arranged according to geographic positions on a map.

A drawback is that in densely packed areas – such as the southern Kanto region where prefectures are clustered together – charts may not fit in their proper locations and need to be repositioned (for example, placing Tokyo’s chart over Tokyo Bay), which diminishes the effectiveness of the geographic layout.

If making charts smaller allows them to fit but compromises readability, consider using standard small multiples instead of this map-based approach.

Vector Field Map

Mon, 01 Jan 0001 00:00:00 +0000

Tools that can create this chart…

Write visualization specs in JSON to render interactive graphs and charts in real time

When continuously distributed data indicates direction and energy, such as wind direction, lines are drawn from each point of origin to visualize the continuous data. This technique is also used in weather data services to represent air currents and ocean currents.

3D Choropleth Map

Mon, 01 Jan 0001 00:00:00 +0000

A choropleth map extended into 3D by adding height. In addition to the color used in a 2D choropleth, data variables can be assigned to the height dimension. This allows for an integrated dimension where the same data variable is mapped to both color and height, or a separated dimension where different data variables are assigned to color and height independently.

Vertical Trees, Horizontal Trees

Mon, 01 Jan 0001 00:00:00 +0000

A connection-based chart that arranges parent, child, and grandchild data in a single direction. When arranged vertically, it is called a vertical tree; when arranged horizontally, it is called a horizontal tree. A connection-based chart that arranges data in multiple directions is called a multi-directional tree.

Radial Trees

Mon, 01 Jan 0001 00:00:00 +0000

This is a connection-based chart that uses a polar coordinate layout, placing the parent at the center, its children on the surrounding ring, and grandchildren on the next outer ring.

Icicle Plots

Mon, 01 Jan 0001 00:00:00 +0000

An area-based chart that arranges parent, child, and grandchild data in a single direction. The data values themselves are represented by length (area), showing the relative proportions at each hierarchical level.

Sunburst

Mon, 01 Jan 0001 00:00:00 +0000

You can create this chart with…

An area-based chart that uses a polar coordinate layout, placing the parent at the center, its children on the surrounding ring, and grandchildren on the next outer ring. Data values are represented by angles showing relative proportions within each hierarchical level. It is called a “sunburst” because its appearance resembles an exploding sun.

Treemaps

Mon, 01 Jan 0001 00:00:00 +0000

You can create this chart with…

An area-based, nested chart where each data item is represented as a rectangle. A well-known example is the chart showing market capitalization and stock price changes in the stock market.

Circle Packing

Mon, 01 Jan 0001 00:00:00 +0000

You can create this chart with…

An area-based, nested chart type in which individual data points are represented as circles.

Force Directed Diagram

Mon, 01 Jan 0001 00:00:00 +0000

Tools that can create this chart…

gephi-lite.dataviz.jp

This chart simulates magnetic and elastic forces on nodes to position them at even intervals. Since the absolute positions often change each time the simulation is run, it is not well suited for comparing multiple datasets.

Arc Diagram

Mon, 01 Jan 0001 00:00:00 +0000

You can create this chart with…

Nodes are arranged in a single row, and links are shown as arc-shaped lines. Variables are represented through the thickness and color of the link lines.

Bio Fabric

Mon, 01 Jan 0001 00:00:00 +0000

Nodes are represented as horizontal lines rather than points, and links are shown as vertical lines. This approach solves a notable drawback of connection-type network diagrams, where the visibility of link lines deteriorates significantly when the number of links is large.

Circular Layout

Mon, 01 Jan 0001 00:00:00 +0000

You can create this chart with…

gephi-lite.dataviz.jp

Nodes are evenly distributed around the full circumference of a circle, and links are displayed inside the circle.

Chord Diagram

Mon, 01 Jan 0001 00:00:00 +0000

You can create this chart with…

Similar to a circular layout, nodes are distributed around the full circumference of a circle. However, in a chord diagram, data values are assigned to the arc angle of each node. Links are then displayed inside the circle.

Geography Based Connection

Mon, 01 Jan 0001 00:00:00 +0000

Nodes are displayed on a map, and their relationships are represented by connecting lines. A geographic coordinate system is used for spatial transformation.

Alluvial Diagram

Mon, 01 Jan 0001 00:00:00 +0000

You can create this chart with…