Простые графики с помощью D3.js

[gibson_dev]

А почему бы не JSON использовать чтобы не считать стобцы и прочее?

[Petrichuk]

JSON же избыточен, данные одни и те же а разница в размере файла в несколько раз. Про считать столбцы не понял.

[gibson_dev]

XML избыточен а JSON наименьшее зло с удобной структурой, а так это экономия на спичках.

Про считать — изменится у вас порядок колонок или еще несколько добавится и придется искать все вызовы

  preParceDann("Date","%d.%m.%Y",["Metal month","Mined %"],data);

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

[Petrichuk]

В наверное не поняли смысл этой функции, она всего лишь приводит строчные значение полученные после загрузки данных в date и numeric. При загрузке в формате JSON нужно проделывать те же действия, т.к. тип данных в этом формате тоже не передается и так же будут загружены одни строчные значения.

[btoe]

Почему обязательно строчные? Передавайте number.

[Petrichuk]

После выполнения функции

d3.tsv("sample.tsv", function(error, data)

в data данные загрузятся в виде строк — я специально заострил на этом внимание в статье. Потому и их нужно переконвертировать.

[btoe]

Простите, не сразу понял, что изначально данные хранятся в .tsv

[dom1n1k]

А по-моему, код D3 очень простой и понятный. Они даже сознательно жертвует лаконичностью и красотой в пользу наглядности. И это одна из причин успеха этой библиотеки — не нужно заморачиваться (во всяком случае сразу) какими-то хитрыми концепциями и паттернами. Просто посмотрел несколько примеров и погнал. В этом она схожа с jQuery.

[Kopleman]

Подскажите, а есть ли в D3 возможность N-цати Y осей( я вижу в примере 2 оси, но смущает жесткая привязка yAxisLeft, yAxisRight) и встроенный тип шкалы для времени?

[Petrichuk]

Никаких ограничений по осям нет, yAxisLeft и yAxisRight я ведь сам создавал. Про шкалу времени не понял вопрос.

[Devgru]

Оси нужно создавать «руками», но вполне можно делать это в цикле.
Тип шкалы для времени — d3.time.scale() https://github.com/d3/d3/wiki/Time-Scales

[comerc]

Совсем недавно нужно было выбрать движок для отображения графиков. Остановился на Chart.js и очень пожалел. Вторая версия сырая, пришлось откатываться на первую. Смотрел в сторону D3, но испугался. В фаворитах Google Charts.

[kovalevsky]

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

[Disminder]

Посмотрите на Dygraphs. В проекте стояла задача отображения огромного количества данных на графиках, а так же реал-тайм графики. Эта библиотека справилась на отлично.

[pxz]

Для простых графиков лучше выбрать нечто вроде amcharts или highcharts. D3 для более серьёзных вещей, ИМХО.
И разобраться было проще, чем с D3.js. Но это сугубо субъективное мнение.

[Petrichuk]

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

[KoGor]

На основе D3.js существует достаточно библиотек, реализующих базовые графики. Мне, например, нравится C3.js. А сам D3.js как раз для сложных или кастомных графиков.

Кстати, вместо добавления второй оси абсцисс X и остальных хаков можно воспользоваться встроенным функционалом d3.time.format.multi(formats).

[Petrichuk]

C3 рассматривал тоже, но остановился на dimple, сделал на нем что нужно и после вернулся к D3, потому что нужна как раз именно кастомность, графики то у меня не сложные.

А как работает d3.time.format.multi(formats) я так и не понял — по единственному примеру ничего не ясно, потому не стал углубятся. Тем более, что получившееся при использовании двух шкал даже превысило мои ожидания. Т.е. именно такую шкалу я всегда хотел получить но нигде не мог этого добиться. Осталось совсем немного довести до ума то что связано с масштабированием и можно навсегда забыть про эти даты :)

[Mingun]

Так же возможно кому-то будет полезен сделанный мной перевод документации по API к этой замечательной библиотеке.

[Petrichuk]

Спасибо!
Можно узнать, ваш перевод как-то связан с тем что на официальной странице? И второй вопрос — планируете ли вы делать перевод документации по 4-й версии?

[Mingun]

Можно узнать, ваш перевод как-то связан с тем что на официальной странице?

Вообще-то нет.

Однажды мне потребовалось решение по выводу графиков, достаточно гибкое в плане настраиваимости и либеральное в плане лицензии. После довольно долгих поисков я вышел на d3. Мне понравился подход к организации кода в этой библиотеке, так же я был впечатлён её возможностями и красивыми демками. Но поскольку для неподготовленного человека она всё же немножко рвёт шаблон, нужно было посидеть, по изучать как там всё устроено. Далее последовательно пошло изучение документации, обнаружение огрызка попытки перевода на русский язык в виде файла API-Reference-(русскоязычная-версия) и решение перевести документацию самостоятельно, дабы, в том числе, поглубже влезть в кухню внутреннего устройства библиотеки, да и читать русскую версию как-то более приятно.

И второй вопрос — планируете ли вы делать перевод документации по 4-й версии?

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

[Petrichuk]

Переделал программу, чтобы работала на 4-й версии d3. Вылезло достаточно много несовместимостей. Пример описанный в статье работает только с 3-й версией библиотеки и лежит на Гитхабе в файлах с префиксом _v3 в имени файла.