Examples

This section demonstrates the various, charts, features and parsers that come bundled with d4. The charts you find here can be considered the canon of charts common to financial and business applications. If you have an idea for a more exotic breed, please do submit a pull-request!

Charts

The following list demonstrates mostly boilerplate examples of the common chart types. It is relatively trivial to make a chart type. Most of the hard work is in writing the features themselves.

Column Chart
Basic Column Chart
Donut Chart
Basic Donut Chart
Grouped Column Chart
Basic Grouped Column Chart
Grouped Row Chart
Basic Grouped Row Chart
Line Chart
Basic Line Chart
Line and dot series
Time Series Example
Row Chart
Basic Row Chart
Scatter Plot
Basic Scatter Plot
Multi-series Scatterplot
Stacked Column
Basic Stacked Column
Stacked Row
Basic Stacked Row
Waterfall Chart
Basic Waterfall Chart
Horizontal Waterfall Chart
Layouts
Force Layout

Features

A feature of a chart is a visual component, which helps convey meaning in the data.Charts are made up of features whether it be an xAxis, or a series of columns, or a contiguous line. The following list demonstrates some of the capabilities of these features, and how you might apply them in your own charts.

Arrows
Arrow Feature
Axis
Axis Feature
Staggered Data Labels
Grid
Grid Feature
Brushes
Ordinal Brush
Simple Brush
Vertical Brush
Stacked Shapes
Shape Examples
Column Labels
Small Multiples
Staggered Data Labels
Line Series Labels
Tracking mouse X location

Concepts

d4 has a series of reoccurring concepts which once understood will make using the library much easier. The following list demonstrates the core concepts of d4.

Parsers
Basic Grouped Column Chart
Basic Grouped Row Chart
Basic Stacked Row
Basic Waterfall Chart
Grouped Column Chart With Missing Values
Stacked Column Chart With Missing Values
Dynamic data
Column chart
Grid Feature
Line and dot series
Stacked Column Chart
Waterfall Chart
Graphic Design
Custom CSS
Rounded Corners
Series and Items CSS
Basic Concepts
Custom Data Dimensions
Margins & Chart Size
Mixing in a new feature
Mixing out an existing feature
Multiple Scales Per Chart
Shared chart properties
Intermediate Concepts
Custom Scales
Tooltips for data series
Using afterRender() within a feature
Advanced Examples
Punchcard Chart