Наш курс визуализации данных фокусируется на практических аспектах работы с данными. В нашем 6-недельном курсе мы расскажем об основах работы с данными в творческой и увлекательной форме. Вы узнаете, как создавать интерактивные, увлекательные взаимодействия с помощью HTML, CSS, SVG и Javascript.
Этот курс, предназначенный для начинающих, научит вас работать с данными и выбрать правильные визуальные эффекты для их эффективного представления. Мы познакомим вас с основами мощной библиотеки D3.js, используемой для анимации и добавления взаимодействий к вашим диаграммам и графикам. Вы также узнаете, как извлекать данные из Интернета с помощью Ajax.
Вам не нужно быть дизайнером или опытным программистом, чтобы присоединиться к курсу, но небольшие знания HTML и CSS помогут.
Различные типы визуализации данных и способы их эффективного использования
Как работать с наборами данных и понимать их и превращать их в увлекательный опыт
Как использовать HTML, CSS, SVG для создания диаграмм и графиков
Как использовать Javascript для добавления анимации, переходов и взаимодействий к вашему опыту
Введение в основы мощной библиотеки Javascript D3.js
Использование Ajax для извлечения данных из Интернета в ваши визуализации
Посмотреть больше
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
Урок 1.
00:01:43
Welcome to the Data Visualization + D3 course
Урок 2.
00:02:09
Introduction to the Step Counter project
Урок 3.
00:02:58
What is the SuperHi Editor?
Урок 4.
00:06:00
Adding basic HTML structure for our project
Урок 5.
00:07:31
Adding navigation bar content
Урок 6.
00:09:02
Introducing our CSS
Урок 7.
00:02:22
Adding webfont typography
Урок 8.
00:04:13
Adding extra type styles
Урок 9.
00:03:02
How to add CSS rules
Урок 10.
00:04:18
Adding spacing using margins
Урок 11.
00:07:49
Giving our project layout with CSS Grid
Урок 12.
00:03:34
Filling in our main content area
Урок 13.
00:03:46
Inside an SVG
Урок 14.
00:08:23
Adding a rect tag
Урок 15.
00:08:03
Drawing circles
Урок 16.
00:01:47
Welcome to automating our HTML
Урок 17.
00:06:28
How to add a Javascript file
Урок 18.
00:07:38
Picking tags and changing HTML
Урок 19.
00:05:24
Updating the style of selected tags
Урок 20.
00:08:19
Using forEach to loop through tags
Урок 21.
00:06:18
Variation: adding randomness
Урок 22.
00:07:33
forEach with an index
Урок 23.
00:07:55
Changing our rect tags using forEach
Урок 24.
00:03:45
Using index to change widths
Урок 25.
00:05:05
Adding in a data array
Урок 26.
00:10:16
Automating addition of rect tags
Урок 27.
00:03:47
Positioning our rect tags
Урок 28.
00:01:15
Homework
Урок 29.
00:02:15
Homework solution
Урок 30.
00:01:27
Welcome to Week 2!
Урок 31.
00:02:59
What is D3 and why do we use it?
Урок 32.
00:04:11
How to add D3 to a project
Урок 33.
00:07:45
Using select and selectAll with D3
Урок 34.
00:05:16
Adding data to D3 and using attr
Урок 35.
00:08:18
Automating attribute changes
Урок 36.
00:06:13
Adding in rect tags automatically with D3
Урок 37.
00:04:41
Adding in real data
Урок 38.
00:07:53
Introducing scales
Урок 39.
00:08:37
Adding text tags to our data visualizations
Урок 40.
00:08:18
Adding classes and circle tags
Урок 41.
00:03:43
Thinking about grids
Урок 42.
00:04:01
The modulo (%) and Math.floor to make a grid
Урок 43.
00:06:42
Scaling our circle's radius
Урок 44.
00:01:14
Homework
Урок 45.
00:01:38
Homework solution
Урок 46.
00:01:48
Welcome to the final part of Step Count
Урок 47.
00:06:00
Adding in a transition
Урок 48.
00:06:00
Adding delay and easing to transitions
Урок 49.
00:04:40
Adding transitions to our bar chart
Урок 50.
00:02:46
Why we group tags in our visualizations
Урок 51.
00:09:09
Adding g tags to our bar chart
Урок 52.
00:05:16
Adding our second text tags
Урок 53.
00:06:38
Adding hover states using CSS
Урок 54.
00:04:26
Adding both classes and states in CSS
Урок 55.
00:06:48
Hovering within a group
Урок 56.
00:09:40
Adding a group for our circles
Урок 57.
00:09:24
Adding in goal rings using stroke
Урок 58.
00:07:29
Adding text to our Last 28 Days section
Урок 59.
00:05:29
Altering HTML content
Урок 60.
00:04:26
D3's array functions
Урок 61.
00:08:07
Using D3 Format
Урок 62.
00:00:25
Homework
Урок 63.
00:02:07
Homework solution
Урок 64.
00:02:30
Welcome to Heat Map
Урок 65.
00:04:56
Creating our HTML content
Урок 66.
00:07:56
Adding our overall page styling
Урок 67.
00:08:58
Adding our header layout
Урок 68.
00:04:27
Storing data in arrays and objects
Урок 69.
00:01:44
How our data file looks
Урок 70.
00:02:35
Data collection using the Javascript Developer tools
Урок 71.
00:01:53
Adding our script tags
Урок 72.
00:02:07
Reflecting our data in design
Урок 73.
00:07:02
Setting up our group tags
Урок 74.
00:04:32
Adding our cities to the data visualization
Урок 75.
00:01:45
Adding our country text tag
Урок 76.
00:08:03
Adding data groups within data points
Урок 77.
00:06:38
Color scales
Урок 78.
00:05:06
Adding labels to our heat map
Урок 79.
00:03:29
Adding box scale
Урок 80.
00:03:26
What is a path tag
Урок 81.
00:06:28
D3's line generators
Урок 82.
00:08:15
Changing temperature units with a select tag
Урок 83.
00:00:32
Homework
Урок 84.
00:02:53
Homework solution
Урок 85.
00:02:44
Welcome to Discover The World
Урок 86.
00:09:01
Setting up our HTML
Урок 87.
00:05:58
Adding our styling
Урок 88.
00:05:36
Adding our own Javascript functions
Урок 89.
00:07:18
Adding events to both page load and select tag changes
Мы делаем онлайн-курсы, которые помогают творческим людям выделиться. Узнайте, как писать, разрабатывать и управлять проектами в нашем глобальном сообществе!
Команда внимательно читает ваши комментарии и оперативно на них реагирует. Вы можете спокойно оставлять запросы на обновления или задавать любые вопросы о курсе здесь.
Этот курс направлен на построение пошагового подхода к освоению библиотеки d3. d3.js - это библиотека визуализации данных для веб-браузера. Курс начинается с основ SVG, строительного блока диаграмм и графиков (библиотека d3.js использует элементы SVG для представления данных в графическом формате в веб-браузере). Затем вы войдете в мир d3.js, чтобы понять первые принципы использования библиотеки. Вы последовательно пройдете через 12 важных модуле
Привет! Добро пожаловать на курс разработки с D3.js. Это наиболее полный и эффективный курс по D3. Это единственный курс, который вам когда-либо понадобится для изучения D3. Цель курса - не просто научить вас D3 (v7.x), но и помочь вам понять ее. D3 - это библиотека JavaScript, которая позволяет легко создавать визуализации данных. Библиотека огромна, и позволяет создать любую визуализацию данных, какую только можете себе представить.
d3.js - Полное руководство по визуализации данных для разработчиков
d3.js - Complete Developer Data Visualization Guide
Вы когда-нибудь задумывались, как из необработанных данных создаются потрясающие графики и визуализации на основе данных? Вы хотите четко и эффективно передавать информацию своей организации, работе, школе и т. д.? Если да, то вы должны записаться на этот курс полной визуализации данных с библиотекой D3.Js.
Мы начнем с изучения документации D3, которая обширна и очень тщательна, но может быть сложной для навигации. Я укажу на то, как структурирована документация, а также поясню экосистемы bl.ocks и blockbuilder, а также способы их использования в наших интересах.
Узнайте, как использовать D3 (v5) и Firebase (Firestore) для создания динамических визуализаций данных SVG. Гистограммы, круговые диаграммы и тд. D3.js - это мощная библиотека JavaScript, которая позволяет легко создавать визуализации данных. В этом курсе я научу вас, как использовать возможности D3 для создания различных визуализаций, управляемых данными, таких как гистограммы, круговые диаграммы, линейные графики, пузырьковые пакеты и древовидн