D3 Crossfilter基本示例

时间:2012-10-02 15:28:31

标签: javascript csv d3.js svg crossfilter

我刚刚介绍到D3并且非常喜欢crossfilter library。我想生成类似的东西,但不是他们的飞行数据,我有以下格式的CSV数据:row,col,value。

我只想显示一个显示值的直方图,以及一个按值字段排序的表。

很难理解他们的例子中发生了什么。

有人可以建议或展示一个非常基本的例子吗?

4 个答案:

答案 0 :(得分:24)

我遇到了一个伟大的图书馆,它会为我做这件事。

dc.js

答案 1 :(得分:14)

我遇到过的最好的“非常基本”的crossfilter示例来自富裕工程博客上的帖子。
Explore Your Multivariate Data with Crossfilter

这里还有一个相对直截了当的例子:
http://bl.ocks.org/phoebebright/3822981
http://bl.ocks.org/phoebebright/raw/3822981/

答案 2 :(得分:8)

这个页面有一些很好的入门教程。 https://github.com/mbostock/d3/wiki/Tutorials

D3有一个相当陡峭的学习曲线,在理解crossfilter示例之前,您需要先了解以下示例:

  • d3.selectAll
  • d3.nest(如何将平面数据列表转换为结构)
  • select.transition

前7个教程由D3作者编写,它将教你这些基本概念。 (第二个是最直观的) Scott Murray的例子很容易理解,与原版相比似乎更快学习。 Christophe Viau的教程简短,学习速度最快,但未必涵盖足够的细节。

我也是D3的新手,但发现这个库非常聪明且功能强大。祝你好运

答案 3 :(得分:5)

希望此链接提供一个非常基本的示例,可以帮助任何偶然发现的人: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);
}

对于图表,我还建议使用dc.js库进行快速原型设计,因为它具有原生的Crossfilter支持。

看起来没有人真的解决了问题的“基本示例”部分。除了一些RTFM类型的链接。我同意这一点很重要,但如果人们像我一样,那么他们希望在将大量时间投入基础知识之前,作为技术评估的一部分快速制作原型。