A simple list of chart types and data structure.

Single property

Box Plots

  • Description: Use for Statistics: the smallest value, lower quartile, median, upper quartile,
    and largest value.
  • Example:None.

Bubble Chart

  • Description: Statistics, the area of circel stands for the count of a value, proper
    to large amount of values than Bar Chart.
  • Example:

Bullet Chart

  • Description: A variation on a bar chart, compare a quantitative measure anainst
    qualiative ranges and related markders.
  • Example:

Calendar Chart

  • Description: Values are visualized as colored cells per day, Use for compartion
    between moths/years while having a day value detail.
  • Example:
  • Example:

Circular heat chart

  • Description: A head map with a circular layout.
  • Example:
  • Example:

A 3d exmaple for one property

A and B

Chord Diagram

  • Description: Show directed relationships among a group of entities.
  • Example: abc

Force-Directed Graph

Sector Comparation

  • Description: Comparation between two main properties with some sub propritis.
  • Example:

A, B and C

Circle gram

  • Description:(X,Y)->Z, Z use circle and the area stands for Z value.
  • Example:


The following charts are used for showing data which has a tree data structure.


  • Description: Leaf nodes of the tree at the same depth, are aligned on the
    right edge.
  • Example:

Hierarchical Edge Bundling

  • Exampel:


  • Description: A treemap recursively subdivideds area into rectangles, the area
    of any node in the tree corresponds to its value.
  • Example:

Partition layout

  • Description: A treemap recursively subdivideds in horizational.
  • Example:

Circle packing

  • Description: Use containment to represent the hierarchy, the area of circle
    can stand for item value, it better reveals the hierarchy than treemap.
  • Example:
  • Variants: Zoomable Pack layout


  • Description: The depth of nodes is computed by distance from the root, leading
    to a ragged appearance.
  • Example:

A, B , C, … -> D, E, F, … with intermediate nodes.

Sankey Diagrams

  • Description: Sankey diagrams visualize the magnitude of flow between nodes in
    a network. This intricate diagram shows a possible scenario for UK energy
    production and consumption in 2050: energy supplies are on the left, and
    demands are on the right. Intermediate nodes group related forms of production
    and show how energy is converted and transmitted before it is consumed (or
    lost!). The thickness of each link encodes the amount of flow from source to
  • Example:

Compare n properties

Time Series Comparation

  • Description: None.
  • Example:


  • Description: None.
  • Example:

Bar, Line, Scatter, Stacked bar, etc.

Radial plot

  • Description: Boxplot for continuous data.
  • Example:

Radar Chart

  • Description: Comparation between n properties, all of them have the save
  • Example:



  • Description: Color stands for value and showd in a geo-map.
  • Example:

Not all, visit https://github.com/d3/d3/wiki/Gallery for more examples.