Основной пример D3 Crossfilter

Я просто познакомился с D3 и очень люблю crossfilter library. Я хотел бы сгенерировать что-то подобное, но вместо данных полету у меня есть данные CSV в формате: row, col, value.

Мне нужна только одна гистограмма, показывающая значения, и таблица, отсортированная по полю значений.

Трудно понять, что происходит в их примере.

Может ли кто-нибудь предложить или показать очень простой пример?

Ответы

Ответ 1

Я наткнулся на БОЛЬШУЮ библиотеку, которая сделает это для меня.

dc.js

Ответ 3

На этой странице есть несколько полезных уроков для начала. https://github.com/mbostock/d3/wiki/Tutorials

D3 имеет довольно крутую кривую обучения, и вам нужно понять следующие примеры, прежде чем понимать пример crossfilter:

  • d3.selectAll
  • d3.nest(как скрывать плоский список данных в структурах)
  • select.transition
  • и др.

Первые 7 учебников написаны автором D3, и он научит вас этой базовой концепции. (Второй - самый интуитивный) Пример Скотта Мюррея очень легко понять и, кажется, быстрее учиться по сравнению с оригиналом. Учебник Christophe Viau является коротким и быстрым для изучения, но не обязательно охватывает достаточно деталей.

Я также новичок в D3, но нашел эту библиотеку очень умной и мощной. Удачи.

Ответ 4

Надеюсь, эта ссылка, которая дает очень простой пример, поможет любому, кто спотыкается: Очень простой пример JS Fiddle

    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. Я согласен с этим, но если люди похожи на меня, то они хотят прототипировать что-то быстро как часть технической оценки, прежде чем вкладывать много времени в основы.