Visualization with SVG

Hello,

This tutorial intends to help designers in creating easy interactive data visualization using Illustrator, SVG and jquery without actual coding. Difficulty level: Beginner.

Tools required: Adobe Illustrator, Jquery library, Atom IDE.

Setting Up tools | 15-20 mins

1. Install development Environment (IDE) Action: Download and Install Link: https://atom.io/

2. Create a dedicated folder in your computer drive for your experiments. eg: Folder name: Prototypes/

3. Have ready the visualization created in Illustrator which need to be interactive.

Steps

• Creating the visualization completely in Illustrator, exporting the file as SVG, and saving at destined folder mentioned above.

1. animate()
   Runs a custom animation on the selected elements
2. clearQueue() Removes all remaining queued functions from the selected elements
3. delay() Sets a delay for all queued functions on the selected elements
4. dequeue() Removes the next function from the queue, and then executes the function
5. fadeIn() Fades in the selected elements
6. fadeOut() | Fades out the selected elements
7. fadeTo() | Fades in/out the selected elements to a given opacity
8. fadeToggle() | Toggles between the fadeIn() and fadeOut() methods
9. finish() | Stops, removes and completes all queued animations for the selected elements
10. hide() | Hides the selected elements
11. queue() | Shows the queued functions on the selected elements
12. show() | Shows the selected elements
13. slideDown() | Slides-down (shows) the selected elements
14. slideToggle() | Toggles between the slideUp() and slideDown() methods
15. slideUp() | Slides-up (hides) the selected elements
16. stop() | Stops the currently running animation for the selected elements
17. toggle() | Toggles between the hide() and show() methods