3.4 Visualization

D3.js

Live training courses

• 📝React + D3 for Data Visualizations: Advanced Features | Live Training
  • Data Visualization and D3.js Course | Udacity
  • Safari Queue: D3
  • Video
    • An Introduction to d3.js: From Scattered to Scatterplot
      • alignedleft/scattered-scatterplot: Code examples for the introductory d3.js workshop, "From Scattered to Scatterplot"
    • Intermediate D3.js
    • Learning Path: D3.js: Visualizing Data with D3.js
    • Learning React.js Data Visualization
    • Beginning Programming with JavaScript
    • JavaScript Templating
    • D3 with React | Andreas Savvides | Reactive 2015 - YouTube
  • Book
    • Learning React, 1st Edition
    • Getting Started with D3

🎥 Videos

• D3.js | Pluralsight
  • Force Layout Graphs in D3 | Pluralsight
• Learning Path: Data Visualization

📚 Books

• Interactive Data Visualization for the Web, 2nd Edition
• D3.js in Action, Second Edition: Data visualization with JavaScript

Papers

• Infovis paper - philosophy underlying D3’s elegant technical design

JS Libs

Based on D3

• A Visualization Grammar | Vega

  • Vega provides a higher-level visualization specification language on top of D3.

  • Tree Layout Example | Vega
  • Treemap Example | Vega

React and D3

• 🌟 bkrem/react-d3-tree: React component to create interactive D3 tree graphs
• codesuki/react-d3-components: D3 Components for React
• Recharts - React + D3
  • CustomContentTreemap | Recharts

Alt to D3

• Charts  |  Google Developers

Network/tree drawing libs

• Cytoscape.js - Graph theory / network library for analysis and visualisation
• Sigma js - library dedicated to graph/network drawing