• Урок 1. 00:06:09
    Introduction
  • Урок 2. 00:02:17
    What you need to know
  • Урок 3. 00:03:17
    How to approach React for Data Visualization
  • Урок 4. 00:00:23
    Why React and D3
  • Урок 5. 00:02:31
    Visualizing data with React and d3.js
  • Урок 6. 00:01:04
    Why D3
  • Урок 7. 00:02:24
    3 key insights that help you learn D3.js from scratch
  • Урок 8. 00:04:36
    Data manipulation vs. DOM manipulation
  • Урок 9. 00:01:33
    Data manipulation vs. DOM manipulation 2
  • Урок 10. 00:04:13
    Scales
  • Урок 11. 00:01:42
    D3 layouts
  • Урок 12. 00:01:50
    Recap
  • Урок 13. 00:03:03
    How React makes D3 easier
  • Урок 14. 00:01:52
    How React makes D3 easier 2
  • Урок 15. 00:02:14
    What about existing libraries?
  • Урок 16. 00:01:05
    Victory.js
  • Урок 17. 00:00:55
    Recharts
  • Урок 18. 00:01:12
    Nivo
  • Урок 19. 00:01:08
    VX
  • Урок 20. 00:01:15
    When not to use a library
  • Урок 21. 00:00:58
    Quickly integrate any D3 code in your React project with Blackbox Components
  • Урок 22. 00:03:37
    A quick blackbox example - a D3 axis
  • Урок 23. 00:03:50
    A quick blackbox example - a React+D3 axis
  • Урок 24. 00:01:31
    A quick blackbox example - a React+D3 axis 2
  • Урок 25. 00:02:27
    A D3 blackbox higher order component – HOC
  • Урок 26. 00:05:12
    D3blackbox magic trick – render anything in 30 seconds
  • Урок 27. 00:01:53
    Build scalable dataviz components with full integration
  • Урок 28. 00:09:27
    Props don't change
  • Урок 29. 00:06:37
    Props might update
  • Урок 30. 00:03:42
    Making your components more flexible with render props
  • Урок 31. 00:02:28
    Making your components more flexible with render props 2
  • Урок 32. 00:02:11
    Super simplicity with React Hooks
  • Урок 33. 00:01:52
    useState, useEffect, and useContext
  • Урок 34. 00:04:08
    Blackbox components with hooks
  • Урок 35. 00:00:36
    my useD3 hook for blackbox components
  • Урок 36. 00:01:18
    my useD3 hook for blackbox components 2
  • Урок 37. 00:07:18
    Full integration components with hooks
  • Урок 38. 00:00:59
    useMemo is your new best dataviz friend
  • Урок 39. 00:00:49
    Handling state in your React app
  • Урок 40. 00:02:12
    Basic architecture we'll use
  • Урок 41. 00:02:05
    Set up a local environment with create-react-app
  • Урок 42. 00:00:46
    Install dependencies for React for Datavisualization
  • Урок 43. 00:00:59
    A big example project - 176,113 tech salaries visualized
  • Урок 44. 00:01:10
    Show a Preloader
  • Урок 45. 00:00:24
    Step 1: Get the image
  • Урок 46. 00:01:50
    Step 2: Preloader component
  • Урок 47. 00:02:05
    Step 3: Update App
  • Урок 48. 00:00:50
    Step 4: Load Bootstrap styles
  • Урок 49. 00:01:04
    Asynchronously load data
  • Урок 50. 00:00:48
    Step 0: Get the data
  • Урок 51. 00:03:16
    Step 1: Prep App.js
  • Урок 52. 00:00:56
    Step 2: Prep data parsing functions
  • Урок 53. 00:01:15
    Step 3: Load the datasets
  • Урок 54. 00:02:22
    Step 4: Tie the datasets together
  • Урок 55. 00:00:47
    Render a choropleth map of the US
  • Урок 56. 00:02:50
    Step 1: Prep App.js
  • Урок 57. 00:03:06
    Step 1.1: Simplify App.js state
  • Урок 58. 00:02:55
    Step 3: CountyMap.js
  • Урок 59. 00:02:29
    the D3 magic sauce
  • Урок 60. 00:01:12
    render
  • Урок 61. 00:02:42
    Step 4: County component
  • Урок 62. 00:05:34
    Step 5: optimize D3 code with custom hooks
  • Урок 63. 00:00:36
    Render a Histogram of salaries
  • Урок 64. 00:01:27
    Step 1: Prep App.js
  • Урок 65. 00:01:03
    Step 2: CSS changes
  • Урок 66. 00:01:51
    Step 3: Histogram component
  • Урок 67. 00:06:16
    Rendering the histogram
  • Урок 68. 00:00:55
    Step 4: HistogramBar (sub)component
  • Урок 69. 00:04:39
    Step 5: Axis
  • Урок 70. 00:00:45
    Make it understandable - meta info
  • Урок 71. 00:01:01
    Dynamic title
  • Урок 72. 00:06:08
    Implement Title
  • Урок 73. 00:03:16
    The render
  • Урок 74. 00:02:30
    Dynamic description
  • Урок 75. 00:01:31
    Step 1: App.js
  • Урок 76. 00:05:03
    Step 2: MedianLine
  • Урок 77. 00:00:46
    Add user controls for data slicing and dicing
  • Урок 78. 00:03:46
    Step 1: Update App.js
  • Урок 79. 00:04:00
    Step 2: Build Controls component
  • Урок 80. 00:05:22
    Filter logic
  • Урок 81. 00:02:20
    Step 3: Build ControlRow component
  • Урок 82. 00:05:20
    Step 5: Add US state and Job Title filters
  • Урок 83. 00:05:24
    Stale state is stale
  • Урок 84. 00:00:43
    Make it work in the real world
  • Урок 85. 00:03:05
    Rudimentary routing
  • Урок 86. 00:01:44
    Twitter and Facebook cards and SEO
  • Урок 87. 00:00:15
    Full dataset
  • Урок 88. 00:01:55
    Launch!
  • Урок 89. 00:01:50
    A couple more tweaks
  • Урок 90. 00:10:57
    A couple more tweaks 2
  • Урок 91. 00:00:35
    A couple more tweaks 3
  • Урок 92. 00:00:52
    Animation
  • Урок 93. 00:01:16
    Using a game loop for rich animation
  • Урок 94. 00:02:30
    Game loop animation with a bouncy ball
  • Урок 95. 00:05:59
    My solution
  • Урок 96. 00:00:55
    Use transitions for simple animation
  • Урок 97. 00:01:10
    Build a swipe transition
  • Урок 98. 00:02:20
    How it works
  • Урок 99. 00:03:54
    Solution
  • Урок 100. 00:02:54
    Powerful animation with transitions and game loops combined
  • Урок 101. 00:02:39
    Understanding custom tweens
  • Урок 102. 00:03:43
    A practical example
  • Урок 103. 00:05:01
    A practical example 2
  • Урок 104. 00:06:43
    Use tweens to drive state – hybrid animation
  • Урок 105. 00:00:54
    A bouncy scatterplot exercise
  • Урок 106. 00:02:49
    My solution
  • Урок 107. 00:02:41
    Animating with React, Redux, and d3
  • Урок 108. 00:49:14
    Christmas trees sold in USA - an emoji barchart
  • Урок 109. 01:06:20
    Money spent on Christmas - a line chart
  • Урок 110. 01:17:10
    Christmas movies at the box office - horizontal bar chart
  • Урок 111. 01:04:08
    What Americans want for Christmas - horizontal stack chart
  • Урок 112. 01:24:13
    Christmas carols and their words - a word cloud
  • Урок 113. 00:50:34
    Will you buy a christmas tree? - a pie chart
  • Урок 114. 01:27:05
    What goes in Christmas stockings - a piechart with tooltips
  • Урок 115. 01:28:29
    When Americans buy Christmas presents - a curved line chart
  • Урок 116. 01:28:10
    When people buy candy - animated barchart with easing
  • Урок 117. 01:19:50
    A responsive stack chart of smartphone market share
  • Урок 118. 00:51:56
    A Sankey diagram
  • Урок 119. 00:48:50
    Try Uber's WebGL dataviz library
  • Урок 120. 01:06:20
    Real-time WebGL map of all airplanes in the world
  • Урок 121. 00:36:41
    A compound arc chart
  • Урок 122. 04:08:04
    A barchart race visualizing Moore's Law
  • Урок 123. 02:04:50
    Building a Piet Mondrian art generator with treemaps
Этот курс находится в платной подписке. Оформи премиум подписку и смотри React for Data Visualization [FULL COURSE], а также все другие курсы, прямо сейчас!
Премиум