Basic Charts

Epoch's basic charts are implemented using d3 over a thin class hieracrchy. The classes perform common tasks (such as setting up scales, axes, etc.) while the individual charts implement their own specialized drawing routines.

Overview

Every basic chart was built to use the same workflow, here's an overview:

Area
Data:

The basic area chart is used to plot multiple data series atop one another. The chart expects data as an array of layers
each with their own indepenent series of values. To begin, let's take a look at some example data:

varareaChartData=[// The first layer{label:"Layer 1",values:[{x:0,y:100},{x:20,y:1000},...]},// The second layer{label:"Layer 2",values:[{x:0,y:78},{x:20,y:98},...]},// Add as many layers as you would like!];

As you can see the data is arranged as an array of layers. Each layer is an object that has the following properties:

label - The name of the layer

values - An array of values (each value having an x and y coordinate)

For the best results each layer should contain the same number of values, with the same x coordinates. This will allow
d3 to make the best looking graphs possible. To create a single series plot simply include a single layer.

Given that you have data in the appropriate format, instantiating a new chart is fairly easy. Simply create a container
element in HTML and use the jQuery bindings to create, place, and draw the chart:

Bar
Data:

Epoch's implementation of a multi-series grouped bar chart. Bar charts are useful for showing data by group over a discrete
domain. First, let's look at how the data is formatted for a bar chart:

varbarChartData=[// First bar series{label:'Series 1',values:[{x:'A',y:30},{x:'B',y:10},{x:'C',y:12},...]},// Second series{label:'Series 2',values:[{x:'A',y:20},{x:'B',y:39},{x:'C',y:8},...]},...// Add as many series as you'd like];

The bar chart will create groups of bars that share a like x value for each independent value present in the values array.
Currently only grouped bar charts are available but we're planning on adding stacked and normalized stacked charts soon!

Next, let's take a look at the markup and scripting required to display our bar data:

Horizontally Oriented Bar Charts

The bar chart also provides the option for horizontal rendering by setting the orientation option to 'horizontal'. Charts that are horizontally oriented will display the bars stacked atop one another, like so:

Options

The bar chart has the following set of additional options:

Name

Description

orientation

Sets the orientation for the chart. Can be either 'horizontal', or 'vertical' (default).Example:orientation: 'vertical'

Line
Data:

Line charts are helpful for visualizing single or multi-series data when without stacking or shading. To begin, let's take a look
at the data format used by epoch's line chart:

varlineChartData=[// The first series{label:"Series 1",values:[{x:0,y:100},{x:20,y:1000},...]},// The second series{label:"Series 2",values:[{x:20,y:78},{x:30,y:98},...]},...];

Notice that the data is very similar to that of the area chart above, with the exception that they need not cover the same domain
nor do the entries in each series have to line up via the x coordinate.

Next let's take a look at how you would implement the chart with markup and scripting:

The data itself is an array of objects that represent the slices in the pie chart. The label parameter will be used to set
the label for the slice in the chart and the value parameter will be used to determine its visual size in comparison to the
other slices.

Once you have your data formatted correctly you can easly add a chart to your page using the following markup and script: