Графика nytimes.com , которую я недавно посетил, показывает хороший способ рисования точечных диаграмм. Я хотел узнать больше о том, как делать такие сюжеты. Я также хотел бы получить рекомендации по программному обеспечению с открытым исходным кодом или бесплатному программному обеспечению, которое может выполнить эту задачу.
Ниже приведен пример задачи: построить пузырьковую диаграмму для определенного типа привода, представляющую силу, создаваемую приводом, по оси Y, год, когда он был введен, по оси X и объем представляемого привода. по площади пузыря.
Лучшее решение, которое у меня есть на данный момент, — это amcharts (от amcharts.com). Но результаты далеки от графика nytimes.com.
На этом графике New York Times используется D3 (сокращение от Data Driven Documents), а также всплеск холста HTML5 для повышения производительности. D3, вероятно, лучше всего подходит для интерактивной визуализации.
NYT использует D3 для большинства своих интерактивных визуализаций , которые, как правило, получают большинство наград, и даже наняли автора D3 Майка Бостока в качестве графического редактора. Иногда они даже используют D3 для создания векторной графики в браузере, которую затем передают в Illustrator для использования в печати .
D3 — это библиотека javascript, которая рисует фигуры SVG* и включает в себя множество очень сложных функций, удобных для визуализации.
Тем не менее, эта конкретная графика необычна тем, что она использует смесь SVG из D3 и холста HTML5 для кругов — вероятно, потому, что холст HTML5 лучше работает с большим количеством форм. Вот более типичный пример пузырьковой диаграммы NYTimes D3: «Четыре способа разделить бюджетное предложение Обамы на 2013 год» .
Помимо иногда низкой производительности с огромным количеством фигур, недостатками D3 являются:
Вы можете обойти проблему Internet Explorer, используя D34Raphael , модифицированный вариант D3, который проталкивает вывод D3 через Raphael , который представляет собой библиотеку javascript для рисования интерактивных векторов в любом браузере, начиная с IE6 и выше (не работает на старых телефонах Android, но работает практически на всем остальном).
D34Raphael сложнее и не так хорошо документирован - не начинайте здесь! Это то, что стоит попробовать, когда вы освоите обычный D3 и будете уверены в Javascript.
*SVG в браузере немного отличается от HTML5 Canvas: проще говоря, он лучше подходит для создания интерактивных векторных фигур, но требует больше памяти. Холст HTML5 рисует пиксели на холсте, а затем забывает о них (если вы не используете какой-либо фреймворк, например Fabric.js ), SVG рисует векторные фигуры, каждый из которых является элементом, к которому вы можете легко привязать события, такие как div.
В общем, SVG лучше подходит для графики с большим количеством интерактивных элементов с каждым элементом, HTML5 лучше подходит для графики с большим количеством элементов, каждый из которых имеет простое поведение (эта страница содержит ссылки на несколько хороших примеров) .
Как сказал Скотт, вся диаграмма сделана с использованием холста HTML5.
Вот хороший учебник о том, как сделать что-то подобное (и вам не нужно никакого программного обеспечения!): Создайте интерактивную пузырьковую диаграмму с холстом HTML5 .
Кроме того, Zingchart — это бесплатный инструмент, который вы можете скачать и использовать.
А вот хороший список javascript-плагинов для построения диаграмм и графиков . В них всего понемногу, но некоторые из них можно адаптировать для пузырьковых диаграмм (может, gRafael?). Удачи!
Проверьте morris.js http://oesmith.github.com/morris.js/
Скотт
Шашанк Савант
Скотт
пользователь56reinstatemonica8