Creating a Google Calendar Clone with D3.js
Building a calendar app with D3.js can give us lots of insights into how D3 works. In this video we touch on drawing svg, text, rectangles, axis, and several other important parts of data visualizations with D3.
LogRocket blog post: https://blog.logrocket.com/using-d3-t...
Observable code playground: https://observablehq.com/@bradydowlin...
0:00 Intro
1:03 Project setup
4:28 Importing libraries
8:35 Create SVG
10:20 Create y-axis
17:41 Add grid lines
20:22 Append calendar elements (rectangles)
24:18 Add current time indicator (line)
26:35 Draw title text on calendar events
27:12 Conclusion: Demo and browser devtools