Хорошо ! Всем, надеюсь, у вас будут хорошие дни в жизни. Наша главная тема сегодняшнего обсуждения — Важность визуализации и Введение в D3.js, который представляет собой JavaScript Framework, помогающий создавать элегантные визуализации данных в Интернете.
Но, как и в любой игре, мы столкнемся с некоторыми конструктивными критиками, которые спросят нас: «Почему я не могу использовать Canva или Excel Sheets, чтобы сделать то же самое?» Итак, будучи высокомерным разработчиком, который всегда отстаивает свою точку зрения, независимо от того, что готовится под капотом, я хотел бы ответить им: «В Canva или аналогичном программном обеспечении для проектирования вы просто не можете создавать интерактивы на основе ваших файлов данных. Если данные меняются, у нас не так много времени, чтобы отредактировать каждую их часть. Далее, когда мы говорим о таблицах Excel, это позволит динамически обрабатывать данные, но если вы выберете в нем больше настроек, Excel не ваш двор. В Интернете, используя D3.js, вы можете буквально делать это так, как вы хотите. Все захваты разрешены. Любые другие критики, желающие сделать меня нетерпимым, могут прокомментировать ниже свои конструктивные вопросы.
Хватит разговоров, давайте купимся на D3.js. Полная форма D3 — это JavaScript для документов, управляемых данными. Это специальный модуль javascript, который позволяет создавать привлекательные изображения в Интернете с помощью SVG (стандартная векторная графика) и HTML. У нас могут быть диаграммы, значки, графики, диаграммы и многое другое в D3.js.
Мы можем сделать визуальные эффекты более интерактивными, используя D3.js. Но давайте кратко обсудим некоторые необходимые понятия. Вы должны быть знакомы с разницей между растровым изображением и векторным изображением. Если вы утомительный студент, который изо всех сил пытается что-то вспомнить, позвольте мне бросить несколько скопированных слов ниже, чтобы освежить ваши воспоминания.
Векторная графика состоит из закрепленных точек, соединенных линиями и кривыми, подобно действиям по соединению точек, которые вы, возможно, делали в детстве. Поскольку эта графика не основана на пикселях, она известна как независимая от разрешения, что делает ее бесконечно масштабируемой. Растровые изображения состоят из пикселей или крошечных точек, которые используют цвет и тон для создания изображения. Пиксели выглядят как маленькие квадраты на миллиметровой бумаге, когда изображение увеличивается или увеличивается.
Хорошо, теперь вы знаете разницу. Итак, мы будем иметь дело с векторной графикой, которая будет создана с использованием SVG и соответствующей поддержки HTML5. Теперь вы знаете, о чем мы говорим, это D3.js. Но почему мы вообще заботимся о визуализации данных? Какая необходимость это делать? Цвета кажутся привлекательными, а диаграммы - красивыми? Это причина? Позвольте мне ответить. Огромное большое 'font-size' : 1000% Нет. Причина, по которой визуализация данных более привлекательна, заключается в том, что вы будете знать вещи по категориям и сможете смотреть на график и задавать вопросы, которые даже не приходят вам в голову. Это делает ваш мозг более любопытным к данным. Позвольте мне объяснить вам то же самое с некоторой деятельностью.
Активность - 1
Население по странам
Китай 1 439 323 776 | Индия 1 380 004 385 | Пакистан 220 892 340 | Индонезия 273 523 615 | США 331 002 651
Клянусь, это всего лишь данные о населении 5 стран, но вы действительно не обратили бы внимания на сортировку чисел, независимо от того, находятся ли они в каком-либо конкретном порядке или нет. Только угадайте, Вам показалось громоздким всего 5 чисел, но мир наполнен бесконечностью. В некоторых сценариях вы упустите много деталей. Но что, если вместо этого я покажу вам визуал.
Хорошо, теперь вы можете ясно видеть диаграмму и прояснять ситуацию. Теперь, если я задам вам один вопрос: «Какая страна Азии занимает 4-е место по численности населения?» Вы можете просто ответить, посмотрев на график, который в противном случае был бы вашим невежеством, если бы у вас были только данные. Даже если вы можете возразить, почему я не могу сортировать данные. Но дело в том, что мы говорим на уровне земли. Когда вы держите какие-то большие государственные данные или огромную базу данных, вещи не в ваших руках, чтобы настроить их. Займемся другим делом,
Активность - 2
Перейдите и посмотрите видео о визуализации данных с TED Talks https://www.ted.com/talks/david_mccandless_the_beauty_of_data_visualization?language=en
Очевидно, что я не могу записывать детали, чтобы вы могли их прочитать, чтобы удлинить мои рецензии. Итак, Вам дана ссылка на видео. Поверьте мне, вам будет приятно узнать, почему визуализация данных важна практически в любой области.
https://www.brendangregg.com/FlameGraphs/cpu-mysql-updated.svg
Приведенная выше ссылка перенаправляет вас к примеру пламенных графиков. Итак, это что-то сложное для ваших дополнений к листам Excel.
Все в визуализации данных работает с векторной графикой, потому что, если вы хотите рассмотреть мельчайшие детали в мегакартинке, она не должна разрушать графику. Итак, мы работаем с SVG в HTML5. Используя эти SVG, мы можем выбрать их с помощью функции селектора d3 const svg = d3.select('svg'), затем вы можете добавить основные формы, такие как
const circle = svg.append('circle')
Теперь вы должны знать об объектной модели документа для веб-работ. Это облегчит вашу работу и работу с d3.js. Теперь я не могу объяснить все это в блоге. Итак, я бы порекомендовал вам ознакомиться с официальной документацией, чтобы получить больше информации, а на github у меня есть собственный репозиторий, где я продолжаю практиковать проекты визуализации данных.
Официальная документация: https://github.com/d3/d3/wiki (доступно на Github Wiki)
Репозиторий моего проекта: https://github.com/Harshil-Jani/Data-Visualization
Я надеюсь, что я являюсь связующим звеном осведомленности о javascript и визуализации данных для тех, кто никогда не сталкивался с этим, как я был недавно, я, должно быть, добавил некоторую ценность вашему исследованию. Спасибо, что цепляетесь до конца.
