D3 交叉过滤器基本示例

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?

Answer 1

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

dc.js

Answer 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/

Answer 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

Answer 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.