D3.js (Data-Driven Documents)

Getting Started with D3.js

• D3.js overview
• D3.js adding elements - append()
• D3.js data binding - data(), enter()
• D3.js selection tag selection and manipulation - select(), selectAll()
• D3.js SVG usage - rect, circle, line, text
• D3.js drawing a scatter plot step by step - scaleLinear(), domain(), range(), axisBottom()

Basic D3.js Usage

• D3.js data usage - Enter, Update, Exit
• D3.js drawing tables - Object.keys(), map()
• Drawing a D3.js Grid
• D3.js how to create color scales - d3.scaleLinear, d3.scaleOrdinal, d3.interpolate, d3.scaleSequential, d3.scaleThreshold

D3.js Events

• D3.js drag usage - d3.drag()
• D3.js zoom usage
• D3.js range selection (d3.brush) touch panel usage
• D3.js range selection (d3.brush) usage

D3.js Charts

• D3.js bar chart
• Drawing a Horizontal Bar Graph with D3.js
• Creating a D3.js Pie Chart
• Drawing a D3.js Scatter Plot
• Creating a D3.js line chart
• D3.js line graph and scatter plot types
• How to create a D3.js area chart

D3.js Hierarchy

pack

• D3.js hierarchy data structure and usage
• How to Use D3.js cluster
• How to Place D3.js cluster Nodes on a Circle
• How to Use D3.js pack

D3.js forceSimulation

• Basic D3.js forceSimulation Structure
• D3.js forceSimulation Node Interaction
• D3.js forceSimulation Link Force
• D3.js forceSimulation Coordinate Update Algorithm and Execution Functions
• D3.js forceSimulation Radial Force
• How to Include Multiple SVG Elements in a D3.js forceSimulation Node
• Highlighting in D3.js forceSimulation