d3JS: отображать версию данных с меньшей плотностью для большого набора данных при уменьшении масштаба на линейной/областной диаграмме.

Ларс и Ари были правы, это определенно не тривиальная проблема. Но я подумал, что это важно, пригодится многим людям (включая, вероятно, и меня в будущем), и поэтому стоит потратить время на то, чтобы разобраться.

Итак, вы можете следовать дальше, вот моя адаптация графика ежедневного количества полетов Майка Бостока, так что он отображает недельное / ежемесячное / годовое среднее ежедневное количество рейсов при уменьшении масштаба (вместо отдельных дней) и отображает только подмножество данных, которые могут отображаться при любом уровне масштабирования:
https://jsfiddle.net/ncy5J/2/

Вот пошаговая разбивка того, что мне нужно было сделать:

1. Получите очень большую таблицу данных csv, работающую как встроенная переменная в скрипте JSFiddle. Я предполагаю, что вы не будете делать это таким образом, но я упоминаю об этом, потому что это было хлопотно. Пришлось добавить \n\ в конце каждой строки, прежде чем я мог запустить d3.csv.parse() в строке.

2. Создайте альтернативные массивы данных для недель, месяцев и лет и рассчитайте среднесуточные значения для этих периодов времени:

   • Используйте d3.nest с ключевой функцией, которая использует d3 interval.floor() функции для объединения всех дат одного и того же года, месяца и т. д.;

   • Используйте Array.forEach во вложенных массивах с пользовательской функцией, чтобы получить доступ к массиву вложенных объектов, вычислить среднее значение их значений, а затем заменить объект, созданный nest(), на объект, соответствующий формату исходных данных (код ниже).

3. Переместите шаг привязки данных с инициализации на функцию повторного рисования и измените эту функцию, чтобы она принимала массив данных в качестве параметра.

4. Обновите методы d3.behavior.zoom, чтобы они соответствовали API D3 версии 3 (в исходном примере использовалась версия 2.4, в которой были другие методы для привязки поведения масштабирования к масштабу).

5. Измените функцию zoom, вызываемую поведением масштабирования, на

   • Доступ к видимой области данных по шкале x (которая автоматически обновляется при изменении масштаба);

   • Рассчитайте промежуток времени, охватываемый этим доменом;

   • Выберите один из моих четырех массивов данных, который будет иметь соответствующий уровень точности для этого диапазона;

   • Просканируйте массив, чтобы найти часть элементов, которые находятся в видимой области (как я упоминаю в комментариях к коду, это будет немного медленнее, когда вы полностью увеличите масштаб; вы также можете использовать математику даты и времени для определить правую часть массива, так как временной интервал между последовательными элементами всегда одинаков).

   • Вызовите функцию перерисовки с соответствующим фрагментом массива в качестве переданных данных.

Вот пользовательская процедура вложения/усреднения из шага 2:

AllData.yearly = d3.nest().key(function(d){
                    return d3.time.year.floor(d.date);
                })
                .entries(data);
AllData.yearly.forEach(meanDaily);

function meanDaily(nestedObject, i, array){
    //This function is passed to the Array.forEach() method
    //which passes in:
    // (1) the element in the array
    // (2) the element's index, and
    // (3) the array as a whole

    //It replaces the element in the array 
    //(an object with properties key and values, where
    // values is an array of nested objects)
    //with a single object that has the nesting key
    //value parsed back into a date, 
    //and the mean of the nested values' value
    //as the value.  It makes sense, I swear.
    array[i] = {date:new Date(nestedObject.key), 
            value:d3.mean(nestedObject.values, 
                          function(d) {return d.value;}
                         )};
}

Метод масштабирования — это просто базовый javascript, ключевая часть которого заключается в том, что вы можете получить доступ к видимому домену непосредственно из x-шкалы, а затем использовать его, чтобы выяснить, какие точки данных передать функции рисования.

P.S. Интересно посмотреть на данные в разных средних масштабах. Резкий спад количества рейсов после 11 сентября выделяется на дневных, недельных и месячных графиках, но исчезает из среднегодовых показателей. Вместо этого среднегодовые показатели показывают, что в 2002 году в целом было меньше среднесуточных рейсов, чем в 2001 году, что напоминает о том, что многие люди боялись летать еще долго после того, как запрет на полеты был снят.

Вот обновленное решение для D3 v6, работающее в ObservableHQ (и основанное на чрезвычайно полезной работе в более раннем ответе AmeliaBR):

• Оригинал Майка Бостока, который показывает ежедневные данные при всех масштабах: https://observablehq.com/@d3/zoomable-area-chart
• Динамическая плотность данных на основе уровня масштабирования: https://observablehq.com/@medmunds/zoomable-area-chart-with-variable-data-density

Весь код и пояснения смотрите в блокноте ObservableHQ. Несколько ключевых частей, которые могут быть полезны…

Чтобы выбрать наилучшую плотность данных для текущего уровня масштабирования, вы можете узнать ширину отдельного дня (в пикселях экрана) по увеличенной шкале x, а затем выбрать наибольшую плотность, при которой одна единица времени (день/месяц/неделя /год) останется уже определенной ширины в пикселях:

// Return largest of "daily", "weekly", "monthly" or "yearly"
// where a single time unit stays narrower than `thresholdPixels`
// on d3 time scale `x`
function bestDensityForScale(x, thresholdPixels=5) {
  const dayWidth = x(Date.UTC(2000, 0, 2)) - x(Date.UTC(2000, 0, 1));
  const chooseDensity = d3.scaleThreshold()
    .domain([dayWidth * 7, dayWidth * 30, dayWidth * 365])
    .range(["daily", "weekly", "monthly", "yearly"]);
  return chooseDensity(thresholdPixels);
}

Вы можете настроить thresholdPixels, чтобы получить желаемый эффект. Думайте об этом как о максимальной ширине плоского участка на графике с низкой плотностью, прежде чем он будет заменен данными с более высокой плотностью. Например, если размер одного месяца при текущем масштабе превышает 5 пикселей, переключитесь на данные за неделю. И если одна неделя будет охватывать 5 пикселей, переключитесь на ежедневно.

Чтобы вычислить среднесуточные данные за большие периоды времени, полезно использовать d3.rollups:

const weekly = d3.rollups(
  data,
  v => d3.mean(v, d => d.value),
  d => d3.timeWeek.floor(d.date)
).map(([date, value]) => ({date, value}));

(map в конце изменяет массивы, возвращаемые rollups — ['2010-01-01', 197062], обратно в тот же формат объекта, что и ежедневные данные — {date: '2010-01-01', value: 197062}.)