Building Visualisation Solutions using D3.JS
Course Overview
This workshop teaches the participants how to take advantage of the feature offered by D3.js for creating visualisation solutions for web applications.
At the end of the training, participants will be able to:
- Understand SVG
- D3 DOM Manipulation
- Create visualization solutions using D3.js
- Use JSON data and D3.js selections and data bindings
- Create and style graphical elements such as circles, ellipses, rectangles, lines, paths and text using SVG
- Turn data into a bar and scatter charts
Pre-requisite
Basic HTML and java script knowledge is mandatory.
Duration
3 days
Course Outline
- Overview of D3.js
- Tools for creating and sharing D3.js visualizations
- Google Chrome and Developer tools
- Examining the DOM generated by D3.js
- Selections
- Data binding
- Introducing SVG
- The basic shapes provided by SVG
- Applying CSS styles to SVG elements
- Strokes, caps, and dashes
- Applying SVG transforms
- Groups
- Transparency
- Layers
- The basic bar graph
- Margins and axes
- Data
- Scales
- Creating scatter plots
- Creating a bubble plot
- Introduction to animation
- Adding a fifth dimension to a bubble plot : time
- Mouse events
- Using behaviors to drag, pan, and zoom
- Enhancing a bar graph with interactivity
- Highlighting selected items using brushes
- An overview of path data generators
- Drawing line graphs using interpolators
- Using stacked layouts
- Visualising hierarchical data
- Relationships with chord diagrams
- Techniques to demonstrate the flow of information
- Force-directed graphs