About Repository

This code is used to create and run the animation of the Microsoft AI model. Animations are made using the JavaScript D3 library and managed using a GSAP timeline.

Running

To this animation via Virtual Studio Code:

1. Open project in VSCode
2. Install the "Live Server" extension
3. Open index.html, right click and select "Open with Live Server" (this will launch the JavaScript in your default browser)
4. Open your default browser and look for the new tab with the title of your animation
   • Default title is "WEB BROWSER TITLE HERE" (see index.html)

To run this code via python:

1. In terminal, navigate to this directory and run the following command python -m http.server
2. In your browser, navigate to localhost:8000

Recoding this Animation

If you need a .mov or .mp4 file of the final animation I suggest using screen capturing software. Windows comes with a built in "game bar" (assessed by using start + G) but there are probably better options available too.

Contents

• index.js: Core code for the animation.
• index.html: HTML for the animation page.
• app.css: CSS elements referenced in index.js and index.html.

index.js

This where you will want to write the core of your code. While you can animate in CSS and HTML I have found that D3 ("https://d3js.org/") and JavaScript work well for most of the simple animations we do in CSDP.

Getting Started

• Most animations can be done using D3s .transition() method. D3 in depth is a good starting point to understanding D3 and animations (in particular the sections on shapes, selections, joins, and transitions.
  • https://www.d3indepth.com/introduction/
• The GSAP library is large and versatile! The CSDP animations only really use the timeline objects. You may find the docs on the timeline.add() method helpful:
  • https://greensock.com/docs/v3/GSAP/Timeline/add()
• Other CSDP animation repos (like the ones for COMPACT and mis-implementation) may also be helpful (particularly if you plan to work with graphs, trees, links, nodes, etc...)
• I have not yet found an ideal way to organize animations but making helper methods to create D3 shapes and/or transition D3 shapes is quite helpful (check out index.js to get an idea of what this might look like).
• Also helpful is "classing" D3 svg objects with a name by using .classed("your-name-here", true). This will allow you to refer back to an object/set of objects later on using a .select() or .selectAll() statement.
• Lastly, when it comes to debugging you can use your browser to get some basic error messages by right clicking on the animation and picking inspect and navigating to the console.