Introduction

DexCharts is a library which provides reusable charts for D3. DexCharts aims to provide:

A variety of reusable charts and charting components to choose from.
A framework for interconnecting these charts via listeners.

Future versions will include:

More charts of course.
More options and configurability on existing charts.
Ability to cross over from D3JS to other frameworks such as ThreeJS/WebGL.
Pluggable tool support. IE: Charts will know enough about themselves to provide hints to tools so that they are easily integrated into visualization tools such as Dex. There is a method to my madness...

Examples

Usage

Step 1: Include D3

Make sure your HTML5 asset includes D3 like so:

<script src="http://d3js.org/d3.v3.js"></script>

Step 2: Include DexCharts core

Now include the core DexCharts Javascript like so:

<script src="../dex.js"></script>

Step 3: Include the specific components you will need:

Some components such as maps are quite large, so I decided that components should be required as needed instead of in one massive kitchen sink Javascript library. Here, I am including a Bar Chart and a Horizontal Legend.

<script src="../js/dex/component/d3/BarChart.js"></script>
<script src="../js/dex/component/d3/HorizontalLegend.js"></script>

Step 4: Include D3

Create one or more SVG containers for your charts::

var svg = d3.select("body").append("svg")
  .attr("width", 1000)
  .attr("height", 800)
  .append("g")
  .attr("transform", "translate(40,20)");

Step 5: Instantiate a chart

Next, we must configure and instantiate a chart.

var mychart = new BarChart(
  {
    'parent' : svg,
    'csv'    :
    {
      'header' : [ "SALESMAN", "AGE", "SALES"],
      'data'   : [["BOB", 23, 1000], ["SUE", 32, 2000], ["PAT", 44, 3000]]
    }
  }
);

Step 6:

Render the chart.

mychart.render();

What else?

We can reconfigure and update our chart in one line.

This will change the simple bar chart to a grouped bar chart which will have columns for both AGE and SALES.

mychart.attr("yi", [1, 2]).update();

We can create new charts from old charts.

Here we create a new chart called myotherchart from mychart. It will inherit all parameters from the original. Of course, this makes no sense, so we change the x/y offsets to display at a different location on the screen.

In two lines we are creating another permutation of a chart and rendering it!

var myotherchart = new BarChart(mychart);
myotherchart.attr("yoffset", 400).render();

We can combine charts and tell them to listen to other another.

Here, we're telling our parallel coordinates chart (pcChart), to listen to our USStateMap named "map" when it generates a "selectState" event. Data is passed through an object called chartEvent.

In this particular example, we're removing the old parallel lines chart, adding the selected state data to the data list, then updating the chart. A live example of this visualization US State Map wired to Parallel Coordinates:

map.addListener("selectState", pcChart, function(chartEvent)
  {
    if (stateMap[chartEvent.state] != null)
  	{
  	  d3.selectAll("#ParChart").remove();
  	  selectedStates[chartEvent.state] = true;

  	  var pcData = []
  	  
  	  for (var state in selectedStates)
  	  {
  	  	pcData.push(stateMap[state]);
  	  }
	  pcChart
	    .attr("normalize", pcData.length <= 1)
	    .attr("csv.data", pcData)
	    .attr("height", 200)
	    .update();
  	}
  });

Available Charts

Currently, I am starting small for now. There are a small set of useful components provided with this initial release. Each component is highly configurable. If one of these components does not do what you need, feel free to let me know.

Please download and explore the provided examples.