This is a helper function that utilises d3.js and Crossfilter to create interdependent interactive histograms.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
LICENSE Added description, license, and readme. Sep 30, 2012
README.md Update README.md Nov 17, 2012
crossfilter.v1.js Updated the dependencies. Sep 29, 2012
d3.crossfilter.ay-histogram.js
d3.v2.js
index.html Fixed development mess. Nov 17, 2012
jquery-1.8.2.min.js First commit. Sep 28, 2012
screenshot.png Added screenshot. Nov 17, 2012

README.md

Interdependent Interactive Histograms

This is a helper function that utilises d3.js and Crossfilter to create interdependent interactive histograms (demonstration). The beauty of the code comes from the flexibility of the input data and addaptability to the environment. The crossfilter object can have an arbitrary number of groups, of any size. The graph will automatically adapt to the container width and height and introduce a horizontal scrollbar if such is needed.

screenshot

Usage

To begin with, I encourage you to explore the demonstration source code. http://xhprof.io is a real-life example utilising the code. The available function parameters are documented in the code. Defining the Crossfilter dimension and group is enough to populate the graph with data. Nevertheless, you need to familirize with the Crossfilter API.

ay_histogram returns object that gives access to the brush tool callback (render) and a setRelations function that is used to delegate relations with the other ay-histogram instances or independant functions.

var a	= ay_histogram('histogram-a', data.a, {margin: [10, 10], bin_width: 100, x_axis_format: d3.format('d')});
var b	= ay_histogram('histogram-b', data.b, {margin: [10, 10], bin_width: 1000, tick_width: 100});
var c	= {render: function(){ /* this will be triggered whenever dependant histogram brush tool is used */ }};

a.setRelations([b,c]);
b.setRelations([a,c]);

The available options

  • (array) margin. [(int) horizontal, (int) vertical] margin within the SVG element.
  • (int) bin_width. Define the bin size, eg. if data is grouped using d3.time.hour then bin_width it is 36001000*.
  • (function) x_axis_format. Every tick value will be passed through this function. You may want to take a look at the d3 Formatting.
  • (int) tick_width. Defines a rough distance between every tick label.

Roadmap

  • No known bugs.
  • Feature. Resize the graph on window resize.

License & Notes

The BSD License - Copyright (c) 2012 Gajus Kuizinas.