patmartin
Dex.js

Updated 2 years ago

Dex.js

Introduction

Dex.js is a javascript framework for data visualization which incorporates a diverse set of existing visualization libraries and wraps them in a simple and consistent interface.

Dex.js is capable of a wide variety of charts as seen in the picture below:

Data

All Dex.js charts rely on a single consistent input structure which should be familiar to most; a CSV.

A CSV is an object with a header and data. The header is an array of column names, while the data is a multi-dimensional array containing the rows and columns of the data.

CSV Example

var csv = {
  header : [ 'NAME', 'AGE', 'GENDER' ],
  data   : [
    [ 'BOB', 42, 'Male' ],
    [ 'SUE', 32, 'Female' ],
    [ 'PAT', 44, 'Male' ]
  ]
};

Construction & Rendering

Charts are constructed and rendered in a semantically consistent way.

Chord Diagram

For example, a D3.js based chord diagram might be constructed as follows:

var chord = new dex.charts.d3.Chord({
  'parent'      : '#ChordDiagramArea',
  'csv'         : csv
});

chord.render();

Dygraph Line Chart

var linechart = new dex.charts.dygraphs.LineChart({
  'parent'    : "#LineChartArea",
  'csv'       : csv,
});

linechart.render();

Get/Set/Update Chart State

Any aspect of a Dex chart can be get or set via the attr function.

Get the data from the chart

var chartData = chord.attr('csv');

Set the data in the chart

When called with 2 arguments, attr acts as a setter operation .

chord.attr('csv', newCsv);

Updating the chart

After changes are made, we must update the chart via:

chord.update();

Chaining

Or we could set the chart data and update it all in one shot:

chord.attr('csv', newCsv).update();

Chart Communication

Simply having a single chart in isolation is of limited use. To address this, Dex.js offers a pub/sub mechanism by which one chart may subscribe to events published from another. Multiple charts may subscribe to the same event from another chart.

Subscribing

In this example, we have a chord diagram subscribing to selection messages emitted from selecting data within the parallel coordinates chart.

The selected data becomes the new data for the chord diagram.

var pcChart = new dex.charts.d3.ParallelCoordinates({
  'parent'    : "#PCArea",
  'csv'       : csv
});

var chord = new dex.charts.d3.Chord({
  'parent'      : '#ChordArea',
  'csv'         : csv,
});

chord.subscribe(pcChart, "select", function (msg) {
    chord.attr('csv', msg.selected).update();
});

Publishing

When writing your own chart, you may publish events to interested parties via the publish method. Here is the parallel coordinates chart publishing the selection event.

pcChart.publish({"type" : "select", "selected" : selectedCsvData });