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?

D3.js

https://d3js.org/

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

A lot of samples

https://github.com/d3/d3/wiki/Gallery

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!