Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

  1. Урок 1. 00:01:43
    Welcome to the Data Visualization + D3 course
  2. Урок 2. 00:02:09
    Introduction to the Step Counter project
  3. Урок 3. 00:02:58
    What is the SuperHi Editor?
  4. Урок 4. 00:06:00
    Adding basic HTML structure for our project
  5. Урок 5. 00:07:31
    Adding navigation bar content
  6. Урок 6. 00:09:02
    Introducing our CSS
  7. Урок 7. 00:02:22
    Adding webfont typography
  8. Урок 8. 00:04:13
    Adding extra type styles
  9. Урок 9. 00:03:02
    How to add CSS rules
  10. Урок 10. 00:04:18
    Adding spacing using margins
  11. Урок 11. 00:07:49
    Giving our project layout with CSS Grid
  12. Урок 12. 00:03:34
    Filling in our main content area
  13. Урок 13. 00:03:46
    Inside an SVG
  14. Урок 14. 00:08:23
    Adding a rect tag
  15. Урок 15. 00:08:03
    Drawing circles
  16. Урок 16. 00:01:47
    Welcome to automating our HTML
  17. Урок 17. 00:06:28
    How to add a Javascript file
  18. Урок 18. 00:07:38
    Picking tags and changing HTML
  19. Урок 19. 00:05:24
    Updating the style of selected tags
  20. Урок 20. 00:08:19
    Using forEach to loop through tags
  21. Урок 21. 00:06:18
    Variation: adding randomness
  22. Урок 22. 00:07:33
    forEach with an index
  23. Урок 23. 00:07:55
    Changing our rect tags using forEach
  24. Урок 24. 00:03:45
    Using index to change widths
  25. Урок 25. 00:05:05
    Adding in a data array
  26. Урок 26. 00:10:16
    Automating addition of rect tags
  27. Урок 27. 00:03:47
    Positioning our rect tags
  28. Урок 28. 00:01:15
    Homework
  29. Урок 29. 00:02:15
    Homework solution
  30. Урок 30. 00:01:27
    Welcome to Week 2!
  31. Урок 31. 00:02:59
    What is D3 and why do we use it?
  32. Урок 32. 00:04:11
    How to add D3 to a project
  33. Урок 33. 00:07:45
    Using select and selectAll with D3
  34. Урок 34. 00:05:16
    Adding data to D3 and using attr
  35. Урок 35. 00:08:18
    Automating attribute changes
  36. Урок 36. 00:06:13
    Adding in rect tags automatically with D3
  37. Урок 37. 00:04:41
    Adding in real data
  38. Урок 38. 00:07:53
    Introducing scales
  39. Урок 39. 00:08:37
    Adding text tags to our data visualizations
  40. Урок 40. 00:08:18
    Adding classes and circle tags
  41. Урок 41. 00:03:43
    Thinking about grids
  42. Урок 42. 00:04:01
    The modulo (%) and Math.floor to make a grid
  43. Урок 43. 00:06:42
    Scaling our circle's radius
  44. Урок 44. 00:01:14
    Homework
  45. Урок 45. 00:01:38
    Homework solution
  46. Урок 46. 00:01:48
    Welcome to the final part of Step Count
  47. Урок 47. 00:06:00
    Adding in a transition
  48. Урок 48. 00:06:00
    Adding delay and easing to transitions
  49. Урок 49. 00:04:40
    Adding transitions to our bar chart
  50. Урок 50. 00:02:46
    Why we group tags in our visualizations
  51. Урок 51. 00:09:09
    Adding g tags to our bar chart
  52. Урок 52. 00:05:16
    Adding our second text tags
  53. Урок 53. 00:06:38
    Adding hover states using CSS
  54. Урок 54. 00:04:26
    Adding both classes and states in CSS
  55. Урок 55. 00:06:48
    Hovering within a group
  56. Урок 56. 00:09:40
    Adding a group for our circles
  57. Урок 57. 00:09:24
    Adding in goal rings using stroke
  58. Урок 58. 00:07:29
    Adding text to our Last 28 Days section
  59. Урок 59. 00:05:29
    Altering HTML content
  60. Урок 60. 00:04:26
    D3's array functions
  61. Урок 61. 00:08:07
    Using D3 Format
  62. Урок 62. 00:00:25
    Homework
  63. Урок 63. 00:02:07
    Homework solution
  64. Урок 64. 00:02:30
    Welcome to Heat Map
  65. Урок 65. 00:04:56
    Creating our HTML content
  66. Урок 66. 00:07:56
    Adding our overall page styling
  67. Урок 67. 00:08:58
    Adding our header layout
  68. Урок 68. 00:04:27
    Storing data in arrays and objects
  69. Урок 69. 00:01:44
    How our data file looks
  70. Урок 70. 00:02:35
    Data collection using the Javascript Developer tools
  71. Урок 71. 00:01:53
    Adding our script tags
  72. Урок 72. 00:02:07
    Reflecting our data in design
  73. Урок 73. 00:07:02
    Setting up our group tags
  74. Урок 74. 00:04:32
    Adding our cities to the data visualization
  75. Урок 75. 00:01:45
    Adding our country text tag
  76. Урок 76. 00:08:03
    Adding data groups within data points
  77. Урок 77. 00:06:38
    Color scales
  78. Урок 78. 00:05:06
    Adding labels to our heat map
  79. Урок 79. 00:03:29
    Adding box scale
  80. Урок 80. 00:03:26
    What is a path tag
  81. Урок 81. 00:06:28
    D3's line generators
  82. Урок 82. 00:08:15
    Changing temperature units with a select tag
  83. Урок 83. 00:00:32
    Homework
  84. Урок 84. 00:02:53
    Homework solution
  85. Урок 85. 00:02:44
    Welcome to Discover The World
  86. Урок 86. 00:09:01
    Setting up our HTML
  87. Урок 87. 00:05:58
    Adding our styling
  88. Урок 88. 00:05:36
    Adding our own Javascript functions
  89. Урок 89. 00:07:18
    Adding events to both page load and select tag changes
  90. Урок 90. 00:03:35
    Setting up our Javascript
  91. Урок 91. 00:03:31
    How we got our data source
  92. Урок 92. 00:06:57
    Adding groups per city
  93. Урок 93. 00:06:37
    Adding scales to our data
  94. Урок 94. 00:06:19
    Changing our data depending on which value
  95. Урок 95. 00:06:21
    Hooking our select tags up
  96. Урок 96. 00:03:35
    Adding movement to select changes
  97. Урок 97. 00:05:29
    Changing our circle radius data
  98. Урок 98. 00:07:48
    Adding axes
  99. Урок 99. 00:08:50
    Styling our axes
  100. Урок 100. 00:08:51
    Adding axis labels
  101. Урок 101. 00:04:28
    Adding a city label
  102. Урок 102. 00:06:14
    Raising in D3
  103. Урок 103. 00:03:54
    Responsive design with SVG viewBox
  104. Урок 104. 00:00:23
    Homework
  105. Урок 105. 00:01:09
    Homework solution
  106. Урок 106. 00:01:52
    Welcome to The Top
  107. Урок 107. 00:05:47
    Why this data and why visualize it in this way
  108. Урок 108. 00:04:37
    Setting up our HTML
  109. Урок 109. 00:04:25
    CSS page styles
  110. Урок 110. 00:07:05
    Styling our header
  111. Урок 111. 00:04:45
    Making a sticky header
  112. Урок 112. 00:05:23
    Creating our groups from the data set
  113. Урок 113. 00:04:36
    Fixing our text and header
  114. Урок 114. 00:07:45
    Adding circle tags to each group
  115. Урок 115. 00:11:44
    Sorting our data by a key
  116. Урок 116. 00:05:09
    Sorting data by the select tag + homework
  117. Урок 117. 00:00:58
    Homework solution
  118. Урок 118. 00:06:02
    Data visualization accessibility
  119. Урок 119. 00:02:00
    Welcome to part 2 of The Top
  120. Урок 120. 00:07:01
    Adding a background hover to each group
  121. Урок 121. 00:12:00
    Adding our line shapes
  122. Урок 122. 00:04:28
    Updating our lines on select box change
  123. Урок 123. 00:04:58
    Adding curves to lines
  124. Урок 124. 00:07:43
    D3's area shape
  125. Урок 125. 00:03:21
    forEach vs map
  126. Урок 126. 00:03:50
    Making a difference
  127. Урок 127. 00:08:12
    Adding our text scores
  128. Урок 128. 00:06:01
    Responsive design, part 1
  129. Урок 129. 00:12:59
    Responsive design, part 2
  130. Урок 130. 00:02:08
    Homework
  131. Урок 131. 00:01:48
    Welcome to Kiddo Kiddo
  132. Урок 132. 00:05:16
    Our data source
  133. Урок 133. 00:08:51
    Adding our HTML content
  134. Урок 134. 00:11:34
    Styling our header and form
  135. Урок 135. 00:08:52
    Styling our key
  136. Урок 136. 00:12:13
    Setting up our form in Javascript
  137. Урок 137. 00:06:43
    Filtering the data set
  138. Урок 138. 00:09:18
    Adding our paths
  139. Урок 139. 00:06:26
    Defining paths
  140. Урок 140. 00:02:43
    Exit data
  141. Урок 141. 00:09:47
    Adding axes
  142. Урок 142. 00:04:31
    Different types of scales
  143. Урок 143. 00:04:29
    Transitioning in and out
  144. Урок 144. 00:02:04
    Gendering colors
  145. Урок 145. 00:00:58
    Homework
  146. Урок 146. 00:03:49
    Welcome to Boundless
  147. Урок 147. 00:03:05
    Setting up our project
  148. Урок 148. 00:07:00
    Setting up our updateGraph script
  149. Урок 149. 00:04:58
    Making a quick bar graph
  150. Урок 150. 00:09:42
    Making a pie generator + arc generator
  151. Урок 151. 00:07:57
    Pie and arc options
  152. Урок 152. 00:07:21
    Update the pie chart on next button
  153. Урок 153. 00:07:32
    Autoplaying the visualization
  154. Урок 154. 00:07:04
    Time formatting
  155. Урок 155. 00:02:37
    Stopping the loop when we have no data
  156. Урок 156. 00:10:47
    Arc tweening
  157. Урок 157. 00:01:16
    Homework
  158. Урок 158. 00:02:38
    Welcome to StockFinder
  159. Урок 159. 00:02:10
    Setting up our project
  160. Урок 160. 00:05:35
    Pulling our data in using d3.json()
  161. Урок 161. 00:08:25
    Processing our data
  162. Урок 162. 00:04:08
    Finding the min and max data points
  163. Урок 163. 00:03:52
    Adding our scales
  164. Урок 164. 00:07:36
    Making our line generator and graph
  165. Урок 165. 00:05:28
    Adding an area generator
  166. Урок 166. 00:06:10
    Adding in live data
  167. Урок 167. 00:05:03
    Adding in our hover tooltip
  168. Урок 168. 00:07:29
    Moving our tooltip across the page
  169. Урок 169. 00:02:38
    Hiding our tooltip on mouseout
  170. Урок 170. 00:03:01
    Finding the date on hover
  171. Урок 171. 00:05:55
    Bisecting our data
  172. Урок 172. 00:06:19
    Fixing our tooltip to the line
  173. Урок 173. 00:01:51
    Extra resources
  174. Урок 174. 00:04:17
    Welcome to Population Densities of the World
  175. Урок 175. 00:10:07
    Loading in our dataset
  176. Урок 176. 00:12:00
    Adding in map projections
  177. Урок 177. 00:07:22
    Drawing country by country
  178. Урок 178. 00:05:21
    Highlighting a country
  179. Урок 179. 00:06:37
    Mapping our data to our countries
  180. Урок 180. 00:08:17
    Adding a color scale
  181. Урок 181. 00:07:47
    Filtering based on scroll
  182. Урок 182. 00:07:40
    Adding scales to our scroll position
  183. Урок 183. 00:01:04
    Homework
  184. Урок 184. 00:00:29
    Thank you for being part of our course!