melodyorz / learn_d3.js

Recording my progress of learning d3.js

D3 is a JavaScript library for visualizing data with HTML, SVG, and CSS. You can check the official documents to learn about the power of it.

This repository is where I record my process of learning d3 following Curran Kelleher's 13-hour video course.

Here's a quick preview of what I have made during the course and you can click the index links below to see the corresponding html showcase.

Index

1. Make a Face

2. Bar Chart

3. Scatter Plot

4. Line Chart

5. Area Chart

6. General Update Pattern

7. Interaction with Unidirectional Data Flow

   • Click to Select
   • Hover to Select
     

8. World Map

9. Interactive World Map

10. Tree Visualization of World Countries

11. Radial Tree Visualization of World Countries

12. Color & Size Legend

13. Interactive World Map

14. Add Filtering to the World Map

15. Make a Scatter Plot with Menus

16. Circles on a Map

17. Line Chart with Multiple Lines

18. Melting Data for Multiple Lines

19. Selecting a Year on a Line Chart

Useful References

• Curran Kelleher's Full Course Information: Syllabus | Videos | Code | Slides | Canvas

• A Quick Introduction to D3

• A Javascript Intro Course I took before this one

• Sunlight Foundation's Data Visualization Style Guidelines

• Useful Datasets provided by United Nations for playing with data.