Этот материал находится в платной подписке. Оформи премиум подписку и смотри или слушай Data Visualization + D3.js, а также все другие курсы, прямо сейчас!
Премиум
  • Урок 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
  • Урок 90. 00:03:35
    Setting up our Javascript
  • Урок 91. 00:03:31
    How we got our data source
  • Урок 92. 00:06:57
    Adding groups per city
  • Урок 93. 00:06:37
    Adding scales to our data
  • Урок 94. 00:06:19
    Changing our data depending on which value
  • Урок 95. 00:06:21
    Hooking our select tags up
  • Урок 96. 00:03:35
    Adding movement to select changes
  • Урок 97. 00:05:29
    Changing our circle radius data
  • Урок 98. 00:07:48
    Adding axes
  • Урок 99. 00:08:50
    Styling our axes
  • Урок 100. 00:08:51
    Adding axis labels
  • Урок 101. 00:04:28
    Adding a city label
  • Урок 102. 00:06:14
    Raising in D3
  • Урок 103. 00:03:54
    Responsive design with SVG viewBox
  • Урок 104. 00:00:23
    Homework
  • Урок 105. 00:01:09
    Homework solution
  • Урок 106. 00:01:52
    Welcome to The Top
  • Урок 107. 00:05:47
    Why this data and why visualize it in this way
  • Урок 108. 00:04:37
    Setting up our HTML
  • Урок 109. 00:04:25
    CSS page styles
  • Урок 110. 00:07:05
    Styling our header
  • Урок 111. 00:04:45
    Making a sticky header
  • Урок 112. 00:05:23
    Creating our groups from the data set
  • Урок 113. 00:04:36
    Fixing our text and header
  • Урок 114. 00:07:45
    Adding circle tags to each group
  • Урок 115. 00:11:44
    Sorting our data by a key
  • Урок 116. 00:05:09
    Sorting data by the select tag + homework
  • Урок 117. 00:00:58
    Homework solution
  • Урок 118. 00:06:02
    Data visualization accessibility
  • Урок 119. 00:02:00
    Welcome to part 2 of The Top
  • Урок 120. 00:07:01
    Adding a background hover to each group
  • Урок 121. 00:12:00
    Adding our line shapes
  • Урок 122. 00:04:28
    Updating our lines on select box change
  • Урок 123. 00:04:58
    Adding curves to lines
  • Урок 124. 00:07:43
    D3's area shape
  • Урок 125. 00:03:21
    forEach vs map
  • Урок 126. 00:03:50
    Making a difference
  • Урок 127. 00:08:12
    Adding our text scores
  • Урок 128. 00:06:01
    Responsive design, part 1
  • Урок 129. 00:12:59
    Responsive design, part 2
  • Урок 130. 00:02:08
    Homework
  • Урок 131. 00:01:48
    Welcome to Kiddo Kiddo
  • Урок 132. 00:05:16
    Our data source
  • Урок 133. 00:08:51
    Adding our HTML content
  • Урок 134. 00:11:34
    Styling our header and form
  • Урок 135. 00:08:52
    Styling our key
  • Урок 136. 00:12:13
    Setting up our form in Javascript
  • Урок 137. 00:06:43
    Filtering the data set
  • Урок 138. 00:09:18
    Adding our paths
  • Урок 139. 00:06:26
    Defining paths
  • Урок 140. 00:02:43
    Exit data
  • Урок 141. 00:09:47
    Adding axes
  • Урок 142. 00:04:31
    Different types of scales
  • Урок 143. 00:04:29
    Transitioning in and out
  • Урок 144. 00:02:04
    Gendering colors
  • Урок 145. 00:00:58
    Homework
  • Урок 146. 00:03:49
    Welcome to Boundless
  • Урок 147. 00:03:05
    Setting up our project
  • Урок 148. 00:07:00
    Setting up our updateGraph script
  • Урок 149. 00:04:58
    Making a quick bar graph
  • Урок 150. 00:09:42
    Making a pie generator + arc generator
  • Урок 151. 00:07:57
    Pie and arc options
  • Урок 152. 00:07:21
    Update the pie chart on next button
  • Урок 153. 00:07:32
    Autoplaying the visualization
  • Урок 154. 00:07:04
    Time formatting
  • Урок 155. 00:02:37
    Stopping the loop when we have no data
  • Урок 156. 00:10:47
    Arc tweening
  • Урок 157. 00:01:16
    Homework
  • Урок 158. 00:02:38
    Welcome to StockFinder
  • Урок 159. 00:02:10
    Setting up our project
  • Урок 160. 00:05:35
    Pulling our data in using d3.json()
  • Урок 161. 00:08:25
    Processing our data
  • Урок 162. 00:04:08
    Finding the min and max data points
  • Урок 163. 00:03:52
    Adding our scales
  • Урок 164. 00:07:36
    Making our line generator and graph
  • Урок 165. 00:05:28
    Adding an area generator
  • Урок 166. 00:06:10
    Adding in live data
  • Урок 167. 00:05:03
    Adding in our hover tooltip
  • Урок 168. 00:07:29
    Moving our tooltip across the page
  • Урок 169. 00:02:38
    Hiding our tooltip on mouseout
  • Урок 170. 00:03:01
    Finding the date on hover
  • Урок 171. 00:05:55
    Bisecting our data
  • Урок 172. 00:06:19
    Fixing our tooltip to the line
  • Урок 173. 00:01:51
    Extra resources
  • Урок 174. 00:04:17
    Welcome to Population Densities of the World
  • Урок 175. 00:10:07
    Loading in our dataset
  • Урок 176. 00:12:00
    Adding in map projections
  • Урок 177. 00:07:22
    Drawing country by country
  • Урок 178. 00:05:21
    Highlighting a country
  • Урок 179. 00:06:37
    Mapping our data to our countries
  • Урок 180. 00:08:17
    Adding a color scale
  • Урок 181. 00:07:47
    Filtering based on scroll
  • Урок 182. 00:07:40
    Adding scales to our scroll position
  • Урок 183. 00:01:04
    Homework
  • Урок 184. 00:00:29
    Thank you for being part of our course!