designing
Workshops
5 воркшопів
щоб навчитися залучати стейкхолдерів на різних етапах дизайн-процесу
Дізнатись більше
Dev & Data Science

D3.js

Отримуємо базу для роботи з бібліотекою D3.js. Вчимося створювати візуалізації за допомогою цього інструмента та розробляємо скролітелінг проєкт з інтерактивною графікою.

Про курс

D3.js — один з інструментів, призначених для створення динамічних та інтерактивних візуалізацій у клієнтських браузерах.

Це низькорівнева JavaScript бібліотека, що надає розробникам широкі можливості для створення і стилізації складної, інтерактивної, векторної графіки та карт на основі стандартів вебтехнологій, таких як HTML, SVG і CSS.

Уроки D3.js відкриють нові методи застосування векторної графіки в браузері, а також стануть джерелом натхнення для тих, хто прагне створювати складні, графічно насичені проєкти.

За два місяці навчання студенти отримають базу для роботи з бібліотекою D3.js. Навчаться створювати візуалізації за допомогою цього інструменту та розроблять скролітелінг проєкт з інтерактивною графікою. Зрештою, зможуть самостійно поглиблювати та вдосконалювати здобуті знання і навички, щоб із легкістю створювати типи графіків, з якими не працювали раніше.

Цей набір на курс — благодійний. Оплата здійснюється у вигляді донату. Всі кошти за навчання на курсі надійдуть на підтримку критичних потреб бійців одного з полків ССО України через благодійний фонд Проджектора.

20 квітня 2024 курс триває 2 місяці
9 500 грн/міс. 19 000 грн при оплаті всього курсу
10 000 грн/міс. при оплаті частинами
20 місць кожен студент отримує регулярний фідбек від кураторки

Кураторка

Євгенія Дроздова

Керівниця напряму журналістики даних, журналістка даних у Texty.org.ua.

Займається аналітикою даних і візуалізацією. Членкиня журі на міжнародному конкурсі з журналістики даних The Sigma Awards 2023. Учасниця IRE NICAR 2018 та інших міжнародних навчальних конференцій, а також дата кемпів. Працює з мовами R, Python та JavaScript, зокрема бібліотеками D3.js, Pixi.js, картографічними бібліотеками Leaflet.js, Mapbox.js та іншими.

Програма курсу

  • Огляд D3.js

    • — Приклади для натхнення — візуалізації, які можна зробити на D3.js.
    • — Вступ до візуалізації даних. Типи візуалізації в залежності від даних.
    • — Структура майбутнього проєкту. Де створювати і зберігати проєкти.
  • Вступ до svg та d3.selection

    • — Основні форми: circle, rectangle, path, line, text.
    • — Як читати різні формати даних: json, csv, tsv.
    • — Підготовка даних до візуалізації. Корисні функції.
    • — Вісі та кольорові шкали.
  • Інтерактивні елементи

    • — Які способи взаємодії з контентом існують. Як правильно дозувати інтерактивність.
    • — Створення інтерактивної візуалізації.
  • Інфографіка vs візуалізація даних

    • — Що робити, коли даних забагато.
    • — General update pattern — вступ до динамічної візуалізації.
  • Mobile first та responsive design

    • — Mobile first: що це за концепція і чому це важливо.
    • — Два способи перетворення графіка на responsive. Переваги й недоліки кожного.
  • Виходимо за межі звичних способів створення візуалізації

    • — D3.xml: як додати інтерактивності графікам, створеним у векторних редакторах.
  • Скролітелінг

    • — Що таке скролітелінг. Приклади проєктів, де використаний такий спосіб розповіді.
    • — Огляд Scrollama.js. Створення скролітелінг проєкту.
  • Важливі деталі графіки і не тільки

    • — Додаткові навички та знання, які будуть корисними, щоб продовжити розвиватись у темі.
    • — Як зробити графік, який ви не проходили на курсі.

Як відбувається навчання

Живі заняття

Живі вебінари з кураторкою та групою проходитимуть щосереди та щосуботи о 19:30.

Real-life завдання

У нас діє Practicult — культ практики. Тому ви виконуватимете багато складних завдань. Have fun & survive.

Курсовий проєкт

Під час курсу ви зробите великий проєкт. Адже принцип курсу — все як у житті.

Регулярний фідбек

У нас немає базових і преміум режимів. Тільки преміум, завжди. Отримайте від кураторки все. І так, десята ітерація — це нормально.

Сертифікат за здобутки

Наші сертифікати справді цінують на ринку. Тому ми видаємо їх лише тим студентам, які виконали щонайменше 70% домашніх завдань та захистили курсовий проєкт.

ГРАФІК

Старт

20 квітня 2024

Вебінари

середа, субота — 19:30

Мова викладання

українська

Курс для вас, якщо ви

Журналіст

прагнете створювати інтерактивні візуалізації, засновані на даних

Аналітик або дизайнер громадських організацій

маєте потребу яскраво та інформативно представляти результати своїх досліджень

Дизайнер

цікавитеся створенням графіки за допомогою програмного коду

Студент 2–4 курсів технічних спеціальностей

з базовим знанням HTML, CSS та JavaScript

Джуніор девелопер, дата саєнтист чи бізнес аналітик

Цікавитеся дата артом

хочете зробити перший крок у цьому напрямку

Софт

Visual Studio Code або аналоги, Github

Час

8+ годин на тиждень для виконання домашніх завдань

Дізнайтеся більше

«Віскі, шоколад, червона ікра. Що найчастіше крадуть в АТБ» Євгенія Дроздова, використання D3.js. Дизайн: Надя Кельм
«Чорна п'ятниця» Євгенія Дроздова, використання D3.js. Дизайн: Надя Кельм
«Чиста вода» Євгенія Дроздова, суміш D3.js та картографічних бібліотек.
«Українські Youtube-чарти» Євгенія Дроздова, суміш D3.js та картографічних бібліотек.

Запитання

Як розшифровується D3.js?

D3 розшифровується як data driven document (документи, керовані даними). D3 — це популярна JavaScript бібліотека для роботи з даними та їхнім візуальним відтворенням в інтернеті. Вона надає широкий і гнучкий інструментарій для репрезентації даних, зокрема сучасні можливості HTML, CSS та SVG.

Чи підходить D3 для візуалізації даних?

Так, js бібліотека для побудови графіків — це потужний інструмент створення інтерактивних візуалізацій. Використовуючи D3.js, розробники можуть створювати різні типи графіків, картограм, схем та інші графічні репрезентації. D3.js також дає змогу контролювати вигляд та функціональність візуалізації.

Чи все ще актуальний D3.js?

Це залежить від специфіки вашого проєкту. Основні переваги цієї бібліотеки — потужність та гнучкість. Окремі функції D3.js активно використовують світові видання для створення графіків у таких сучасних фреймворках як Vue.js та Svelte.js. Інші популярні високорівневі бібліотеки для візуалізації даних, наприклад, С3.js або Observable HQ, також створені на основі потужностей D3.js. Утім, якщо ви створюєте прості зображення даних, на зразок кругових і стовпчикових діаграм, діаграм розсіювання та лінійних графіків, спробуйте відтворити їх за допомогою фреймворку, яким користуєтеся.

Чому D3.js такий складний?

Оскільки ця бібліотека має великий набір модулів із широким спектром можливостей кастомізації, опанування цього інструменту може здатися справжнім викликом. Але все залежить від вашого досвіду роботи з JavaScript, HTML і CSS. D3.js навчання може стати новим етапом розвитку для програмістів, графічних дизайнерів, аналітиків та журналістів.

Як вивчити D3.js?

Почніть з основ. Насамперед, ознайомтеся з HTML, CSS, JavaScript, а також DOM (document object model). Без цих знань важко рухатися вперед.

Ознайомтеся з документацією D3.js. Офіційна документація D3.js — вичерпна та чітка. Поєднайте її з прикладами, аби полегшити сприйняття інформації.

Застосовуйте знання на практиці, адже практика — найкращий вчитель. З нас практичні завдання, з вас бажання.

Не здавайтеся. Може бути нелегко, але складнощі загартовують. Не зупиняйтеся, якщо не виходить із першого разу. Ми пройдемо цей шлях разом із вами й підтримаємо на кожному його етапі.

Чи записуватимуться вебінари?

Так, але краще виділіть час, щоб долучатися до них особисто — буде цікаво.

А сертифікат буде?

Ми видамо вам сертифікат за умови виконання 70% всіх домашніх завдань, які затверджені куратором, а також успішного захисту курсового проєкту.

Що, як мені не сподобається?

Ми зможемо повернути вам гроші протягом 7 днів від початку курсу, якщо ви передумаєте.

Які ще курси можуть мене зацікавити?

Працюючи з D3.js потрібно мати глибоке розуміння JavaScript, оскільки сама бібліотека створена на JS. Курси JavaScript онлайн стануть у пригоді тим, хто прагне прокачати навички роботи з JS.

HTML допоможе налаштувати та інтегрувати ваші візуалізації у вебсторінку, легко змінити й адаптувати їх для різних потреб користувача. Online HTML CSS курс розкриє більше функцій HTML у бібліотеці D3.js.

Спростіть роботу із даними для своїх візуалізацій за допомогою SQL: формуйте запити, групуйте дані, рахуйте статистику, робіть складні вибірки. Аби розширити можливості роботи з D3.js, реєструйтеся на SQL курс.

Важливість математики в роботі з D3.js важко переоцінити. Знання математики допоможе розібратися з геометричними аспектами візуалізації даних, створювати точні графіки, складні рухи та інтерактивні ефекти. Курс із математики — нагода попрактикуватися у її використанні на реальних прикладних задачах.

Щоб бути на крок попереду, використовуйте React. Поєднання D3.js з React зробить процес візуалізації даних більш плавним та ефективним. Пройшовши курс React, ви зможете розширити функціонал бібліотеки D3.js.

Уміння застосовувати алгоритми машинного навчання в роботі з D3.js — ключ до розкриття потенціалу бібліотеки, адже ці технології дають змогу створювати візуалізації, що здатні відтворювати дані в реальному часі й навіть передбачати тенденції. Курс machine learning допоможе навчитися розуміти поведінку користувачів, створювати персоналізовані візуалізації на основі їхніх дій та вподобань.

Go language оптимізує процес візуалізації даних на вебсторінках, завдяки можливості працювати з великою кількістю даних без перенавантаження системи.

Python має широкий спектр бібліотек для обробки та аналізу даних, які стануть у пригоді під час підготовки даних до візуалізації в D3.js. Також ця технологія має простий і зрозумілий синтаксис, що сприяє швидкій розробці скриптів для автоматизації завдань та обробки великих обсягів даних, тож курси Python можуть стати рушієм подальшого розвитку.

Оскільки директор CTO відповідає за технічну стратегію компанії та вибір інструментів на проєкті, вміння взаємодіяти з ним сприятиме розробці якісних та інноваційних проєктів.

Якість користувацького досвіду обумовлюють швидкість та безперебійність функціонування вебсторінки. Розуміючи концепцію highload, спеціалісти, що використовують D3.js, зможуть забезпечити безперервну взаємодію даних із графікою, а отже, задовольнити потреби своїх користувачів.

Реєстрація

Ще маєте запитання?
Не соромтесь їх ставити.

Проконсультуйте мене