Визуализация данных c React

Хватит копипастить примеры D3! Создавайте собственные визуализации данных. Узнайте, как создавать масштабируемые компоненты, которые смогут понять все в вашей команде.

Динамическая визуализация данных для Интернета - это боль в заднице, которую вы видите.

Да, конечно, любой может построить диаграмму в Google Docs, но это не то, что вам нужно, не так ли? Вы не можете создать продукт поверх листов Google. Вы определенно не можете вводить динамические данные из API, персонализированные для пользователя, и позволять им перемещаться и исследовать их.

Вы слышали как люди строят эти удивительные вещи с помощью D3. Нью-Йорк Таймс использует его, The Guardian - также, как Netflix, Uber, 23andMe, Visa, Walmart и многие другие. Я знаю, потому что они были на моих семинарах;)

94+ Full HD видео

Просмотр кода перед вашими глазами облегчает понимание.

React - самая большая революция в программировании на JavaScript с тех пор, как jQuery появился на сцене 10 лет назад, а D3 отличается от всего, что вы видели раньше.

Проблема заключается в том, как большинство из нас впервые учатся программировать. «Это как рецепт приготовления», - скажут учителя.

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

Это обязательное программирование. Это читается как последовательность шагов. 

React и D3 являются декларативными. Ты не пишешь, как хочешь, чтобы твой код работал, ты пишешь, чего хочешь достичь. Ваш рецепт салата с болгарским перцем выглядит примерно так:

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

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

Но научиться мыслить декларативно сложно. Это начинается как магия вуду. Мы все были там. 

Вот почему React для визуализации данных начинается с небольших строительных блоков, а затем распространяется на целые панели мониторинга. Изучите основы примерно через час, затем погрузитесь так глубоко, как вы хотите.

Зачем использовать React и D3 длявизуализация данных

Я считаю, что React в сочетании с D3 - это лучшее, что когда-либо случалось с визуализацией данных в Интернете.

Подход React к компонентам делает ваш код более пригодным для повторного использования, его продвинутые алгоритмы делают его быстрым, а D3 предлагает лучшие инструменты для обработки данных. Вместе они представляют две самые популярные библиотеки JavaScript в сети.

React for Data Visualization дает вам краткий обзор основных принципов, с которых вы можете начать, а затем глубокое погружение, которое укрепляет ваши знания с помощью различных проектов и примеров. Создайте рабочий код, который вы можете показать своим друзьям, начальнику и коллегам.

Изучите основы с помощью интерактивных примеров прямо в вашем браузере - не нужно ничего устанавливать. Забудьте про Npm, Webpack, Babel и Node. Просто React и D3.

Погрузитесь в сложные проекты, которые научат вас, как все это сочетается. Создавайте интерактивные визуализации, создавайте анимации и повышайте производительность с помощью canvas. Узнайте все, что нужно знать о создании красивых приложений с React и D3.

От самых основ React и D3 до обработки состояний с помощью Redux и MobX - альтернативы React, такие как Preact и Inferno.

И лучшая часть?

Все это нарезано кусочками. Если у вас есть 5 минут или час в день, вы можете пройти этот курс. Это обещание.

Визуализация данных c React основан на практических примерах

Круговая диаграмма переходит на диаграмму

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

Интерактивная карта

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

Интерактивная гистограмма

Обучает вас некоторым статистическим функциям D3 и основам построения графиков. Рисование фигур, добавление осей, анализ данных ...

Интерактивная панель инструментов

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

Анимированный алфавит

Анимированный алфавит научит вас создавать переходы ввода / обновления / выхода. Анимированные элементы, входящие и выходящие из вашей визуализации данных.

Генератор частиц

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

Интерактивная игра в бильярд

Интерактивная игра в бильярд научит вас отображать графические компоненты React на canvas HTML5, делать их интерактивными и использовать MobX для обработки состояний.