What follows is notes from a class. Incomplete thoughts & code that probably will only make sense to me. Given enough time, even that may be a stretch! Reference at your own risk 😂
There is a steep learning curve for D3 though. nvd3 is further built on top of D3…it’s commonly used D3 charts so you don’t have to reinvent the wheel.
There are some other charting libraries out there:
We learned about web sockets which are a two-way web protocol which listens for changes without a page refresh (unlike the HTTP protocol). A quick chat app demo shows how easy it is to set up a basic example using the socket.io npm package.
Firebase services are built on top of web sockets so that you can build apps with real-time data. To learn more about this check out the Firecasts YouTube channel (here’s the intro on Firebase with web apps)
There is a thing called splunk that you can use to get application info from your servers.
I couldn’t go to this class but here are the slides and some highlights for reference:
- Greensock is the tool of the day. It animates SVG elements. Inkscape is one of many places to get SVGs. Here’s and article with lots more information about SVGs.
- Unlike the slides, do
- Greensock has a number of eases you can make use of. There are also physics engine libraries for more advanced stuff. You can also play around with DrawSVG plugin values
- You can also morph shapes like in this example
- Here is a basic Greensock animation. Here’s a more advanced one
- You can chain animations in a timeline. Here’s a basic example, and here are some more advanced ones: abstract shape, Shel Silverstein poem, tutorial demo
- You can animate text
- When you put it all together you can do some really cool things
- Here’s a cheat sheet for the whole Greensock library
- WebGL is a way to add 3D graphics using the canvas API. Here’s a really detailed intro slide deck about doing this with three.js.
- Zdog is a tool to create & animate 3D graphics.
- Here’s some info about masking vs. clipping, as well as a clip-path maker tool. And here’s a masking demo
And finally here are some more examples of cool things you can do with these tools:
- Play with Mr. Potato Head SVG man
- Form with SVG animation
- Turtles that show Relative HSL tweening
- SVG neighborhood
- Play around with shapeIndex
- Gooey menus
- Mountain scene
- An SVG dynamic viewbox demo
- The Greensock Showcase