Example of simple verticalbar chart based on D3.jslibrary. This simple bar chart is constructed from a TSV file storing the demo data. The chart employs conventional margins and a number of D3 features: d3.tsv- load and parse data; d3.format- format percentages; d3.scale.ordinal- x-position encoding; d3.scale.linear- y-position encoding; d3.max- compute domains; d3.svg.axis- display axes.

Example of simple horizontalbar chart based on D3.jslibrary. This simple bar chart is constructed from a TSV file storing the demo data. The chart employs conventional margins and a number of D3 features: d3.tsv- load and parse data; d3.format- format percentages; d3.scale.ordinal- x-position encoding; d3.scale.linear- y-position encoding; d3.max- compute domains; d3.svg.axis- display axes.

Example of bar chart with implemented data tooltip. Tooltip functionality is based on D3.tipaddition to the D3.jslibrary. For initialization create and return a configurable function for a tooltip. The tip must be called on the context of the target visualization. Tooltips support: styling via CSS, offsets and directions. Direction can be n, s, e, w, nw, ne, swor se.

This groupedbar chart is constructed from a CSV file storing the demo data. The chart employs conventional margins and a number of D3 features: d3.csv- load and parse data; d3.scale.ordinal- x-position encoding and color encoding; d3.scale.linear- y-position encoding; d3.format- SI prefix formatting (e.g., “10M” for 10,000,000); d3.max- compute domains; d3.keys- compute column names; d3.svg.axis- display axes.

This stackedbar chart is constructed from a CSV file storing the demo data. The chart employs conventional margins and a number of D3 features: d3.csv- load and parse data; d3.scale.ordinal- x-position encoding and color encoding; d3.scale.linear- y-position encoding; d3.format- SI prefix formatting (e.g., “10M” for 10,000,000); d3.max- compute domains; d3.keys- compute column names; d3.svg.axis- display axes.

Example of normalizedstacked bar chart. This variation of a bar chart shows percentages rather than absolute numbers and fills the whole chart area. D3.jslibrary allows us to add transitions between different types of charts. The most common transition is from stackedto groupedchart. Also this type of normalized bar charts can have additional labels for better readability.