Это вторая часть из серии статей о том, как повезет. Простое приложение для визуализации, которое использует React + D3, чтобы помочь студентам найти место недалеко от школы и дешевое для аренды! Если вы новичок в этой серии, рекомендуем начать с части первой. Создайте вилку репо, чтобы начать экспериментировать.

Чтобы максимально упростить для пользователя выбор ЛУЧШЕГО места для аренды, мы нарисовали диаграмму рассеяния с временем в пути по оси x и ценой по оси y. Таким образом, пользователь может найти самое дешевое и ближайшее место, выбрав точки, наиболее близкие к исходной точке. Мы сосредоточимся на двух ключевых аспектах построенной диаграммы рассеяния.

  1. Цветовая шкала должна изменяться линейно как по оси x, так и по оси y. Здесь мы будем делать крошечные математические вычисления, чтобы понять это.
  2. Моделирование силы позволяет узлам графика отталкивать друг друга, чтобы они не перекрывались. Затем пользователь может щелкнуть узел, чтобы выбрать дом и перейти на его веб-сайт.

Цветовая шкала

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

Примечание. Если вы не уверены в домене и диапазоне D3, Учебник Скотта поможет вам разобраться в кратчайшие сроки!

Для диапазона мы экспериментировали с двумя цветами, пока не остались довольны тем, как выглядят узлы. Мы добавили домен, позволяющий окрашивать точки в соответствии с расстоянием и ценой. Другими словами, представьте себе сценарий, в котором минимальная цена дома составляет 0 долларов, а максимальная - 100 долларов. Минимальное расстояние до дома - 0 минут, максимальное - 100 минут. Изменение цены на 10 долларов должно изменить цвет узла на ту же величину, что и изменение расстояния за 10 минут.

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

Область в цветовой шкале начинается от минимального значения, которое может встречаться, до максимального значения в данных. Это показано в createColorScalefunction.

И вуаля, как вы можете видеть на картинке ниже, цвета точек меняются линейно как по оси y, так и по оси x!

Силовое моделирование

Проблема, с которой мы столкнулись при первом построении диаграммы рассеяния, заключалась в том, что узлы перекрывались. Чтобы решить эту проблему, мы добавили силовое поле. Силовое поле D3, которое здесь действительно имеет значение, charge.. Отрицательный заряд заставляет узлы отталкиваться друг от друга - именно то, что нам нужно.

Функция forceSimulation принимает набор точек данных и моделирует силовое поле. При каждом тике данные обновляются до тех пор, пока симуляция не закончится. В React мы обновляем состояние компонента каждый раз, когда происходит тик, так что узлы перерисовываются с обновленными данными. Проблема здесь в том, что нам нужны статические узлы. Мы не хотим, чтобы узлы перемещались по нашему графику разброса! Чтобы решить эту проблему, мы нашли хитрый прием, который ускоряет эти тики, так что симуляция заканчивается до того, как узлы будут выведены на экран.

Обработка обновления состояний в компоненте React сложна. Сначала мы устанавливаем состояние, равное данным, переданным через props. Затем мы вызываем функцию createRepulsionForce в componentDidMount. После рисуем сюжет.

Здесь нам удалось сделать так, чтобы узлы не перекрывали друг друга. Но что будет, если реквизит изменится? Например, мы хотим применить фильтры и скорректировать данные, отображаемые на диаграмме рассеяния. ComponentDidMount больше не вызывается, поэтому новые точки данных не будут обновлены симулятором силы. Нам нужно обновить состояние новыми реквизитами и снова вызвать функцию createRepulsionForce с этими новыми данными. Мы делаем это в componentWillRecieveProps. Будьте осторожны здесь. Установка состояния выполняется асинхронно, поэтому нам нужно добавить createRepulsionForce в качестве обратного вызова. Это гарантирует, что мы запускаем моделирование с обновленными данными.

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

Дополнительная литература по D3

Мы использовали несколько отличных руководств, которые помогли нам создать этот график рассеяния.

  • Надя демонстрирует, как добавить некоторые дополнительные функции, такие как всплывающие подсказки.
  • Джек объясняет, как реализовать силовые поля в компоненте React.
  • Эта красивая визуализация выступает источником вдохновения.

Что вы хотите увидеть?

Если вы хотите увидеть какие-либо функции, реализованные в этом приложении, или хотите, чтобы мы что-либо уточнить, мы будем признательны за ваш отзыв! Прокомментируйте ниже!