Post on 13-Apr-2017
D3.js for beginnersWhat is data visualization ?
Kota FujishiroFront end web developer
Internship at LIG.inc
D3.js
https://d3js.org/
What’s data visualization ?
You can understand somethingvaguely at first sight.
William Playfair(1759 – 1823)
He is a political economist and the founder of graphical methods of statistics.
www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html
How to make data visualization?
The Most Detailed MapsYou’ll See From the Midterm Elections
http://www.nytimes.com/interactive/2014/11/04/upshot/senate-maps.html
TheTech I.P.O’s
http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html
The basic flow of D3.js
1.Data(JSON,XML,XSV…etc)2.Driven(Bind the data.Output follow the data.)3.Documents
The basic idea to understand D3.js1.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.
simple histogram
samples
samples
samples
samples
samples
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.
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.
About Scale
Scales are functions that map an input domain to an output range.
About Scale
For example, If you want to set these dataset to 0px to 450px line,you have to do normalization of numbers.
D3.js
https://d3js.org/
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
Thanks!