Материалы на русском языке

На русском языке информации по javascript библиотеке визуализации данных D3 крайне мало. А структурированной и полной информации нет вообще. И, тем не менее, можно изучить небольшое руководство, которое может дать самый минимум. Также, если хорошо порыться, можно отыскать пару-тройку статей-введений в D3. На этом, пожалуй, информация по D3 для человека, понимающего лишь русский язык, заканчивается.

Материалы на английском языке

От автора библиотеки

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

Сторонние сайты и блоги

http://www.d3noob.org - сайт-набор статей по D3js. Этакий сборник рецептов(советы и рекомендации) использования библиотеки;
http://alignedleft.com/tutorials/d3 - Краткое руководство-введение. Изучить можно за несколько часов. По окончании чтения достаточно знаний, чтобы самому экспериментировать. Автор Скотт Мюррей;
https://www.dashingd3js.com/table-of-contents - Более объемлющее и подробное руководство-введение;
http://courses.cs.washington.edu/courses/cse512/14wi/d3-tutorial/fundamental.html#/ - Еще одно краткое руковоство-введение от одного из ведущих университетов США.

Обучающие видео

http://www.youtube.com/playlist?list=PL6il2r9i3BqH9PmbOf5wA5E1wOG3FT22p http://www.youtube.com/playlist?list=PLHfLBrRzKS4q4cU4ewZ2Q1pnJZ2WiKAPq https://egghead.io/technologies/d3?page=1

Книги

Interactive Data Visualization for the Web. Автор Скотт Мюррей. Его краткое руководство-введение представляет собой выжимку из этой книги.
D3 Tips and Tricks. Автор Малкольм Маклин. Опять таки сборник рецептов, советов и рекомендаций, но уже в книжном варианте.
Data Visualization with D3.js Cookbook. Автор Nick Qi Zhu. Книга обладает наиболее качественно структурированным материалом из всех представленных здесь(по мнению автора статьи).
Отмечу также, что все книги, которые здесь представлены, доступны бесплатно в pdf формате, однако, их придется поискать.

Если вы хотите поделиться ссылками на свои материалы, пожалуйста, пишите в комментариях.

При разработке визуализации данных всегда имеется одна и та же ключевая задача, которую вам приходится решать снова и снова: сопоставление входным данным визуальных образов. Например, необходимо сопоставить недавно купленный смартфон за 18000р с столбиком высотой 240 пикселей, а также ваш последний поход в кафе, который обошелся в 1453р со столбиком высотой, скажем 50 пикселей. В каком-то смысле, это все, что представляет из себя визуализация данных - сопоставление входным данным каких-либо характеристик визуальных образов так, чтобы при взгляде на визуализацию сразу было ясно о чем идет речь.

В первую очередь следует сказать, что в D3 функции масштабирования являются одновременно и объектами. Как объект, они имеют собственные методы, которые необходимы для настройки функций масштабирования.
Еще необходимо упомянуть, что в D3 использование функций масштабирования для построения визуализаций не является обязательным. Тем не менее, использование их может невероятно упростить процесс преобразования входного набора данных в визуальные образы.

Но ближе к делу.
Как мы знаем из курса школьной математики, функция — это правило, по которому каждому элементу одного множества (называемого областью определения) ставится в соответствие некоторый элемент другого множества (называемого областью значений), то есть: Множество A - область определения; множество B - область значений.
Так вот: в документации к D3 масштабирующие функции разелены на три вида:
1. Функции, область определения которых представлена всякого рода числовыми последовательностями. Буду называть их количественными функциями масштабирования(в англ. документации quantitative);
2. Функции, область определения которых представлена разными множествами. Буду называть их порядковыми функциями масштабирования(в англ. документации ordinal);
3. Функции, область определения которых представлена датами, то есть временные функции масштабирования.
Так как описание каждого вида масштабирующей функции само по себе включает много текста, пояснений и изображений, я решил для каждого вида функции масштабирования выделить отдельную запись. По мере выкладывания новой записи, раскрывающей использование той или иной функции масштабирования, в этом посте будут обновляться ссылки.

Допустим, нам необходимо показать, сколько денег мы тратим каждый день в течении месяца. Логично, что для этого дела мы выбрали столбиковую диаграмму. Для начала определимся, что же из себя представляет продвинутая столбиковая диаграмма? Минимальным набором для такой диаграммы является набор столбиков, оси и метки на осях. Хорошо если диаграмма будет иметь легенду(по-русски: подпись). Еще лучше, если диаграмма будет интерактивная. Представьте: наводишь мышью на столбик, а он подсвечивается, да еще и отображается посказка, какое значение отображает этот столбик! И верхом всего будет продвинутая интерактивность. Давайте же выполним задуманное.

Делаем все по порядку.

Этап 1. Простая диаграмма

Сначала реализуем диаграмму с минимальным набором. Тут расписывать нечего, так как пользуемся лишь знаниями, полученными при чтении переведенного руководства. Смотрим на результат. Сразу выявляется недочет: подписи на горизонтальной оси накладываются друг на другу, тем самым не давая себя прочитать. Если мы проанализируем в web-inspector’e, из чего состоит одна метка на оси, то увидим следующее: То есть, метка состоит из линии и подписи. И подпись у нас никак не корректируется в зависимости от ширины столбика. Выглядит ужасно и очень не информативно. Чтобы это исправить, нам нужно сделать так, чтобы подпись для каждого столбика корректировалась в зависимости от ширины этого столбика. Концептуально можно выделить такую последовательность действия для решения этой задачи:
1. Выбираем все метки на горизонтальной оси методом d3.selectAll();
2. Поворачиваем подпись метки на такой угол, чтобы ее ширина была соизмерима с шириной столбика;
3. Позиционируем подпись метки так, чтобы было ясно, к какому столбику она относится;
Для реализации пункта 1 модифицируем код создания горизонтальной оси:

1
2
3
4
5
6

var lHorizontalAxis = chart.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0, " + chartHeight + ")")
    .call(xAxis)
    .selectAll("g.tick")
    .call(tickTextWrapping, xScale.rangeBand());

Теперь, как видите, я выбираю все контейнеры, хранящие метки, и для полученный выборки вызываю метод tickTextWrapping, в котором технически реализованы пункты 2 и 3. Код метода:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

function tickTextWrapping(aTick, aTextMaxWidth) {
    var lTickTextsWidth = 0;
    aTick.each(function (d) {
        var lTick = d3.select(this);
        lTick.select("text").remove();
        var lTextContainerInitialX = 0;
        var lTextContainerInitialY = 17;
        var lTextContainer = lTick.append("g").attr("transform", "translate(" + lTextContainerInitialX + ", " + lTextContainerInitialY + ")");
        var lText = lTextContainer.append("text").text(d).style("text-anchor", "middle");
        var lTextWidth = lText[0][0].clientWidth;
        var lTextHeight = lText[0][0].clientHeight;
        if (aTextMaxWidth/lTextWidth < 1) {
            var lTextRadian = Math.acos(aTextMaxWidth/lTextWidth) * 180 / Math.PI;
            var lTextIndent = lTextHeight / 2;
            lTextContainerInitialY -= lTextIndent;
            lText.attr("transform", "rotate(" + -lTextRadian + ")").attr("dy", lTextIndent).style("text-anchor", "middle");
            var lTextContainerWidth = -lTextWidth * Math.sin(aTextMaxWidth/lTextWidth) / 2 + lTextContainerInitialX;
            var lTextContainerHeight = lTextWidth * Math.cos(aTextMaxWidth/lTextWidth) / 2 + lTextContainerInitialY;
            lTextContainer.attr("transform", "translate(" + lTextContainerWidth + ", " + lTextContainerHeight + ")");
        }
    });
}

Метод на вход принимает набор меток, а также максимально допустимую ширину метки. Кстати, внутри этого метода можно делать с метками все что душе угодно. Так что советую запомнить этот прием.
Итак, смотрим на полученный результат.
Теперь если мы добавим данные о тратах за все дни месяца, у нас все равно получится очень красивая и наглядная диаграмма. Полученный результат.

Этап 2. Добавляем легенду

Для большей информативности добавим легенду:

1
2
3
4
5
6

var lChartCaption = "График расхода денежных средств за ноябрь 2014";
chart.append("text")
    .attr("x", chartWidth / 2)
    .attr("y", -chartMargin.top / 2)
    .style({"text-anchor": "middle", "font": "24px Courier New"})
    .text(lChartCaption);

Результат с легендой.
Еще приятнее и информативнее стала выглядеть наша диаграмма.

Этап 3. Добавляем интерактивность

Сделаем так, чтобы при наведении курсором на столбик он выделялся. Это делается простым добавлением CSS-стилей:

1
2
3

svg rect.bar:hover {
    fill: #00C12B;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

var labelsContainers = chart.selectAll("g.label")
    .data(dataset)
    .enter()
    .append("g")
    .attr("class", "label")
    .attr("transform", function (d) {
        var lInitialX = xScale(d.label);
        var lX = lInitialX + xScale.rangeBand() / 2;
        var lY = yScale(d.data);
        return "translate(" + lX + ", " + lY + ")";
    })
    .attr("id", function (d, i) { return "label" + i; })
    .style("display", "none");
labelsContainers.append("polygon")
    .attr("points", "0,0 -5,-10 -50,-10 -50,-50 50,-50 50,-10 5,-10");
labelsContainers.append("text")
    .attr("id", function (d, i) { return "date" + i; })
    .attr("x", "0")
    .attr("y", function (d) {
        return -35;
    })
    .style("text-anchor", "middle")
    .text(function (d) { return "Дата: " + d.label; });
labelsContainers.append("text")
    .attr("id", function (d, i) { return "value" + i; })
    .attr("x", "0")
    .attr("y", function (d) {
        return -15;
    })
    .style("text-anchor", "middle")
    .text(function (d) { return "Расходы: " + d.data; });

И на каждый столбик вешаем обработчики “mouseenter” и “mouseleave”, которые управляют отображением подсказок:

1
2
3
4
5
6

.on("mouseenter", function (d, i) {
        chart.select("#label" + i).style("display", "block");
    })
    .on("mouseleave", function (d, i) { 
        chart.select("#label" + i).style("display", "none"); 
    });

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

Так вот, книга представляет собой настолько последовательное описание, что понять его сможет даже тот, кто никогда не программировал. Вообще, книга и рассчитана на таких людей, поэтому если вы знаете язык JavaScript и имеете представление о HTML5 и CSS - прочтение и погружение в суть разработки визуализаций с использованием D3 займет у вас, наверное, несколько часов!

Наслаждаемся переводом!

Рассмотрим каждый слой подробнее:

Логика

Конечно же, самое важное, чем должен обладать программист – это логика. Умение правильно мыслить, выявлять взаимосвязи между явлениями безусловно должны быть атрибутами каждого не столько программиста, сколько толкового технаря.

Математика

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

Формализация

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

Алгоритмы и структуры данных

Фактически, алгоритмы и структуры данных необходимы для кодирования формализованной модели процесса/объекта/системы. Строить алгоритмы еще учат в школьном курсе информатики. Там дают понятие термина “алгоритм”, учат их составлять, даже строят блок-схемы по ним. Но какая это потрясающая вещь, кто-нибудь для себя вынес? А ведь мы с ними сталкиваемся каждый день! Да что уж говорить, нашу жизнь можно описать простым алгоритмом, приводящим неизменно к одному и тому же результату. Рождение-> детство-> юношество-> молодость-> зрелость-> старость-> смерть. Это, наверное, самый надежный алгоритм во вселенной!

Языки программирования

Все основные алгоритмы и структуры данных доступны практически(а может и на любом) языке программирования. Здесь уместно сравнение с человеческими языками: их существует огромное множество, однако на каком бы из них ни говорил человек, он сможет выразить все, что угодно! Таким образом, язык программирования является инструментом выражения формализованной модели или алгоритма, следствием выполнения которого является работающая программа.

Шаблоны проектирования

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

Технологии

Я расположил это понятие на верхушке своего представления о программировании, потому что технологии являются синтезом всего вышеперечисленного. Например, при раскрытии темы веб-технологии оказывается, что это собирательное понятие использования определенного набора языков программирования(скажем, PHP, Java, JavaScript и т.д.), архитектур приложений(например сервис-ориентированные приложения, клиент-серверные приложения) и определенного набора шаблонов проектирования(допустим, MVC, MVVM).

И это все?

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