This document introduces D3.js, a JavaScript library for data visualization. It discusses what data visualization is, who pioneered early graphical methods, and provides examples of NY Times interactive visualizations built with D3.js. It outlines the basic flow and concepts of D3.js, including data binding, scales that normalize data to output ranges, and method chaining to link data to DOM elements. Samples and galleries of D3.js visualizations are provided for learning.

1. D3.js for beginners
What is data visualization ?

2. Kota Fujishiro
Front end web developer
Internship at LIG.inc

3. D3.js
https://d3js.org/

4. What’s data visualization ?

5. You can understand something
vaguely at first sight.

6. William Playfair(1759 – 1823)
He is a political economist and the founder of graphical methods of statistics.

7. www.nytimes.com/interactive/2012/05/17/business/dealbook/how-
the-facebook-offering-compares.html

8. How to make data visualization?

9. D3.js
https://d3js.org/

10. The Most Detailed Maps
You’ll See From the Midterm Elections
http://www.nytimes.com/interactive/2014/11/04/upshot/senate-maps.html

11. TheTech I.P.O’s
http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-
the-facebook-offering-compares.html

12. A lot of samples
https://github.com/d3/d3/wiki/Gallery

13. The basic flow of D3.js
1.Data(JSON,XML,XSV…etc)
2.Driven(Bind the data.Output follow the data.)
3.Documents

14. The basic idea to understand D3.js
1.MethodChain
It similar with jQuery. d3. is same to $.
Result of before method is input value of next method.
2.Scale
Adjust input dataset to output range.
d3.min : get minimum value of dataset.
d3.max : get maximum value of dataset.
range : designate maximum and minimum value of output range.
3,DataMethod
It keeps data. And the we can select each data.

15. simple histogram

18. samples

19. samples

20. samples

21. samples

22. samples

23. About Data Binding
The .enter() command matches the selectAll statement with the
number of elements in the array/object, and determines the number
of elements that will need to be created.

24. About Data Binding
The .enter() command matches the selectAll statement with the
number of elements in the array/object, and determines the number
of elements that will need to be created.

25. About Scale
Scales are functions that
map an input domain to an
output range.

26. About Scale
For example, If you want to set these dataset to 0px to 450px line,
you have to do normalization of numbers.

27. D3.js
https://d3js.org/

28. Future Tasks
https://d3js.org/
1. Get the data using web scraping and write
Node.js. Express dynamic data visualization.
2. Learn how to write React.js with D3.js

29. Thanks!