#### D3 - Basic Bars

Statistics Invoices Schedule

##### Vertical bar chart

Example of simple `vertical` bar chart based on `D3.js` library. 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.

##### Horizontal bar chart

Example of simple `horizontal` bar chart based on `D3.js` library. 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.

##### Tooltip implementation

Example of bar chart with implemented data tooltip. Tooltip functionality is based on `D3.tip` addition to the `D3.js` library. 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`, `sw` or `se`.

##### Grouped bar chart

This `grouped` bar 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.

##### Stacked bar chart

This `stacked` bar 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.

##### Normalized stacked bar chart

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