Во-первых, давайте определим четыре общих уровня D3.js:
- Совершенный новичок: у вас не было опыта работы с D3.js или какими-либо интерфейсными технологиями (HTML / CSS).
- Базовый: у вас есть некоторые навыки HTML / CSS / JS и вы пробовали работать с некоторыми примерами D3.js, но не совсем понимаете используемые шаблоны и механизмы.
- Средний Вы знаете, как настраивать графики D3.js, используя примеры, найденные в поисковых системах, но вам сложно использовать их повторно, и вы не совсем довольны качеством самого кода.
- Опытный: вы построили множество различных графиков, тестов и интегрировали их с различными технологиями или библиотеками. Вы даже создали пакеты, чтобы легко обмениваться логикой между проектами.
Полный новичок
Книги
Интерактивная визуализация данных для Интернета Скотта Мюррея. Доступный бесплатно онлайн на сайте O’Reilly, он охватывает большинство основ, необходимых для построения ваших первых интерактивных графиков.
Руководства и практическое обучение
- Учебники по D3 Скотта Мюррея. Исходный материал его книги О'Рейли.
- Бесплатное руководство по DashingD3js.com - это очень полное руководство.
- Чтобы поэкспериментировать и поэкспериментировать, можно начать с Учебника Codeacademy D3.
Ссылки
Галерея Кристофа Виа D3.js - это довольно обширный список диаграмм, созданных на D3 и отсортированных по типу диаграмм (столбцы, круговая диаграмма, пузырь и т. Д.)
Курсы
Udacity's Визуализация данных с помощью D3.js, коммуникация с данными. Это бесплатно и выглядит мило, чего еще можно желать ?!
[caption id = ”attachment_2135 align =” aligncenter ”width =” 450]
В этой диаграмме используется ряд функций D3: d3.csv, d3.scale.ordinal, d3.svg.arc и d3.layout.pie. С сайта bl.ocks.org [/ caption]
Базовый
Книги
Начало работы с D3.js: краткое введение (до 100 стр.), Предназначенное для веб-разработчиков.
Учебные пособия и практическое обучение
Разделы Введение и Основные концепции раздела D3 вики-руководства .
Ссылки на ссылки
- Узнайте больше о SVG, основных строительных блоках графиков D3.
- Понимание некоторых основных паттернов D3:
- Мышление с объединениями
- Общая схема обновления
- Выборы
- Маржинальная конвенция
[caption id = ”attachment_2143 align =” aligncenter ”width =” 600]
Эта простая гистограмма построена из файла TSV, в котором хранится частота букв на английском языке. В диаграмме используются обычные поля и ряд функций D3. С сайта bl.ocks.org [/ caption]
Средний
Книги
- Разработка D3.js Edge - короткая книга по сути. Отметьте мой отзыв.
- Освоение D3.js Пабло Наварро, полноценный справочник по созданию графиков D3. Я тоже просмотрел.
Учебные пособия и практическое обучение
Раздел Введение и основные понятия Руководства по вики по D3
Ссылки на справочные материалы
- Ознакомьтесь с примерами, основанными на вашем конкретном API, и вопросами о методах с помощью Mike Bostock’s Blockexplorer.
- Прочтите основополагающую публикацию Майка Бостока о технике многократного использования API: На пути к многоразовым диаграммам.
- Используйте блоки примеров форматирования число и время.
- Следите за всем интересным контентом Информационного бюллетеня Dashingd3.
Видео
Плейлист Bayd3 на YouTube Яна Джонсона
[caption id = ”attachment_2141 align =” aligncenter ”width =” 600]
coenraets.org [/ caption]
Опытный
Книги
Некоторый контент в Mastering D3.js может быть для вас новым, но я не нашел много опубликованных на этом уровне.
Учебники и практическое обучение
Ознакомьтесь с Раздел Особые методы в Учебниках по D3 wiki.
Ссылки на ссылки
- Официальный справочник по API D3, ваш новый лучший друг
- D3 Google Group
- "Переполнение стека"
- Следите за хэштегом #dataviz в Twitter
- Взгляните и найдите несколько полезных шаблонов в репозитории D3 Plugins
Блоги
[caption id = ”attachment_2137 align =” aligncenter ”width =” 600]
Интерактивный график D3 из NY Times [/ caption]
Я надеюсь, что этот обзор ссылок поможет вам повысить уровень ваших навыков D3.js. Это ни в коем случае не исчерпывающий список, если у вас есть другие, которые вы сочли полезными, поделитесь ими со мной в твиттере @golodhros. Я надеюсь, что это отличная отправная точка для начала и создания более захватывающих визуализаций!
- Маркос Иглесиас, старший инженер-программист Eventbrite
