dex.js

dex.js is a javascript framework for visualizing data.

**This is a work in progress**
### dex.js design goals | GOAL | DESCRIPTION | |---------------|-------------| | Consistent | All data is stored consistently in CSV form and all components follow the same API patterns. | | Simple | General use is made as simple as possible. | | Configurable | Underlying capabilities are exposed though attributes. | | Reusable | Components are designed for reuse. | | Interoperable | Components are design to interoperate with other components and other tools. |
### Configurable While general usage is simple, a framework should not obscure underlying power of the underpinning foundation. The underlying mechanics of the SVG are exposed and configurable via attributes. Here are a few examples:

* [Sankey](http://dexvis.net/vis/blog/2013/oct/dexcharts2/examples/Sankey7.html) * [Another Sankey](http://dexvis.net/vis/blog/2013/oct/dexcharts2/examples/Sankey6.html) * [Trees with style](https://dexvis.wordpress.com/2013/04/07/dexcharts-trees-with-style/)

C3 Line Chart

// Instantiate the line chart given dataset ncsv
var linechart = new dex.charts.c3.LineChart({
  'parent': '#C3LineChart', // The node this chart will attach to.
  'csv': ncsv // The data
});
// Render the chart
linechart.render();

C3 Bar Chart

// Instantiate the bar chart given dataset ncsv
var barchart = new dex.charts.c3.BarChart({
  'parent': '#C3BarChart', // The node this chart will attach to.
  'csv': ncsv // The data
});
// Render the chart
barchart.render();

C3 Area Chart

// Instantiate the area chart given dataset ncsv
var areachart = new dex.charts.c3.AreaChart({
  'parent': '#C3AreaChart', // The node this chart will attach to.
  'csv': ncsv // The data
});
// Render the chart
areachart.render();

C3 Stacked Bar Chart

// Instantiate the bar chart given dataset ncsv
var stackedbar = new dex.charts.c3.StackedBarChart({
  'parent': '#C3StackedBarChart', // The node this chart will attach to.
  'csv': ncsv // The data
});
// Render the chart
stackedbar.render();

C3 Stacked Area Chart

// Instantiate the area chart given dataset ncsv
var stackedarea = new dex.charts.c3.StackedAreaChart({
  'parent': '#C3StackedAreaChart', // The node this chart will attach to.
  'csv': ncsv // The data
});
// Render the chart
stackedarea.render();

Axis

The axis component has been deprecated for now.

D3 Chord Diagram

// Instantiate the chord diagram dataset presidents
var chord = new dex.charts.d3.Chord({
  'parent': '#D3ChordDiagram',
  'csv': people
});
// Render the chart
chord.render();

D3 Clustered Force


var cforce = new dex.charts.d3.ClusteredForce({
  'parent': '#D3ClusteredForce',
  'csv': ncsv
});
cforce.render();

D3 Dendrogram


var cforce = new dex.charts.d3.Dendrogram({
  'parent': '#D3Dendrogram',
  'csv': orgData
});
cforce.render();

D3 Motion Bar Chart


var motionBarChart = new dex.charts.d3.MotionBarChart({
  'parent': '#D3MotionBarChart',
  'csv': motionData
});
motionBarChart.render();

D3 Motion Chart


var motionChart = new dex.charts.d3.MotionChart({
  'parent': '#D3MotionChart',
  'csv': motionData
});
motionChart.render();

D3 Motion Line Chart


var motionChart = new dex.charts.d3.MotionChart({
  'parent': '#D3MotionChart',
  'csv': motionData
});
motionChart.render();

D3 Orbital Layout


var orbital = new dex.charts.d3.OrbitalLayout({
  'parent': '#D3OrbitalLayout',
  'csv': presidents
});
orbintal.render();

D3 Radar Chart


var radarChart = new dex.charts.d3.RadarChart({
  'parent': '#D3RadarChart',
  'csv': ncsv
});
radarChart.render();

THE END