D3.js for beginners
- 1. D3.js for beginners What is data visualization ?
- 2. Kota Fujishiro Front end web developer Internship at LIG.inc
- 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?
- 10. The Most Detailed Maps You’ll See From the Midterm Elections http://www.nytimes.com/interactive/2014/11/04/upshot/senate-maps.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.
- 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!