D3 Crossfilter basic example

Question

I am just getting introduced to D3 and really like the crossfilter library. I would like to generate something similar but instead of their flight data, I have CSV data in the format: row,col,value.

I'd like just one histogram showing values, and a table that is sorted by the value field.

It's quite difficult to understand whats going on in their example.

Could someone suggest or show a very basic example?

Solution 1

I came across a GREAT library which would do this for me.

dc.js

Solution 2

The best "very basic" example for crossfilter I have come across to this point is from a post on the wealthfront Engineering blog.
Explore Your Multivariate Data with Crossfilter

• fiddle from old article includes full code

There is also a relatively straight-forward example here:
http://bl.ocks.org/phoebebright/3822981
http://bl.ocks.org/phoebebright/raw/3822981/

Solution 3

This page has a few good tutorials for starting. https://github.com/mbostock/d3/wiki/Tutorials

D3 has a pretty steep learning curve and you need to understand the following examples before understanding the crossfilter example:

• d3.selectAll
• d3.nest (how to covert a flat list of data into structures)
• select.transition
• etc.

The first 7 tutorials are written by the D3 author and it will teach you these basic concept. (The second one is the most intuitive) Scott Murray's example is very easy to understand and seems to be faster to learn compared to the original. Christophe Viau's tutorial is short and fastest to learn but not necessarily covers enough details.

I am also new to D3 but found this library to be very smart and powerful. Good luck

Solution 4

Hopefully this link which provides a very basic example will help anyone who stumbles along: Very simple JS Fiddle example

    var data = crossfilter([
        {date: "2011-11-14T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab"},
        {date: "2011-11-14T16:20:19Z", quantity: 2, total: NaN, tip: 100, type: "tab"},
        {date: "2011-11-14T16:28:54Z", quantity: 1, total: 300, tip: 200, type: "visa"},
        {date: "2011-11-14T16:30:43Z", quantity: 2, total: 90, tip: 0, type: "tab"},
        {date: "2011-11-14T16:48:46Z", quantity: 2, total: 90, tip: 0, type: "tab"},
        {date: "2011-11-14T16:53:41Z", quantity: 2, total: 90, tip: 0, type: "tab"},
        {date: "2011-11-14T16:54:06Z", quantity: 1, total: NaN, tip: null, type: "cash"},
        {date: "2011-11-14T17:02:03Z", quantity: 2, total: 90, tip: 0, type: "tab"},
        {date: "2011-11-14T17:07:21Z", quantity: 2, total: 90, tip: 0, type: "tab"},
        {date: "2011-11-14T17:22:59Z", quantity: 2, total: 90, tip: 0, type: "tab"},
        {date: "2011-11-14T17:25:45Z", quantity: 2, total: 200, tip: null, type: "cash"},
        {date: "2011-11-14T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "visa"}]);

    try {
        var total_dimension = data.dimension(function(d) { return d.total; });
    var na_records = total_dimension.filter(90).top(Infinity);
    var elRecords = $('ul#records'); 
    elRecords.empty();
    for (var i = 0; i < na_records.length; i++) {
        $('<li>', { text : na_records[i].total}).appendTo(elRecords);   
    }
} catch (e) {
    console.log(e);
}

For the charts I would also recommend the dc.js library for quickly prototyping as it has native Crossfilter support.

It doesn't look like anyone really addressed the 'basic example' part of the question. Aside from some RTFM type links that is. Which I agree is important but if people are like me then they want to prototype something quickly as part of a tech evaluation before investing a lot of time in the fundamentals.

View more solutions

Comments

[slo jo]

I think there are a lot of solid tutorials at the provided link, for those that are brand new to D3 I also like to recommend "Getting started with D3" by Mike Dewar.

[Omar Wagih]

I ended up using DC javascript package which helps use crossfilter's bar chart. Thanks for the recommendations though. I ended up going through several tutorials before I used it

[codingknob]

I'm confused - can you create crossfilter type visualizations using D3 alone as well as using DC.js? Doesn't DC.js also use D3?

[codingknob]

I'm confused - can you create crossfilter type visualizations using D3 alone as well as using DC.js?

[Omar Wagih]

Yep, technically you could. DC is just a wrapper for D3 so you dont have to create anything yourself

[Richard H Fung]

I tried dc.js and it integrates very nicely with crossfilter support out of the box. dc.js has a simple API to work with. This library helps to create interactive, focus and context, master and detail, brushing charts much easier.

[Richard H Fung]

Also I provided a code example for a bar chart and crossfilter on my blog

[mg1075]

jsfiddle example is broken because of bad crossfilter link. Here's the same fiddle with a working crossfilter link: jsfiddle.net/wc8ba/206