What is D3 ?

Data visualization

D3.js is a JavaScript library for manipulating documents based on data. It allows to build absolutely any type of data visualization. This document displays 10 interactive examples illustrating the key concepts of d3, leading to a first basic scatterplot. Note that this online course is a great resource to get you started with d3.js.

What I find most interesting is how d3 can use a lot of method chaining.

here I have a function render chart, I can map the selected data and then choose how I will visualize this data.

• The axis position often needs to be adjusted. For instance, the X axis is usually placed at the bottom of the chart.
• This is made possible thanks to translation. Basically, applying .attr("transform", "translate(20,50)") to an element with translate it 20px to the right and 50px to the bottom.
• A very common strategy is to apply a translation to the general svg area, creating a bit of margin around the chart without having to think about it in the rest of the code. It is important to understand how it works since almost all d3.js chart start that way.

I am able to set the coordinates of the data, how the data is suppose to be like, and what labels are on the char of the data that I would like to render in.

https://www.d3-graph-gallery.com/index.html
This link shows all the different types of chart that d3 is able to visualize.

• It always follows the same steps:
• svg: this select the svg area where the chart takes place
• .selectAll("whatever"): select all the elements that have not be created yet, I know it is weird.
• .data(data): specify the data to use.
• .enter(): start a loop for the data. Following code will be applied to data[0], data[1] and so on.
• .append("circle"): for each iteration, add a circle.
• .attr("cx", function(d){ return x(d.x) }): gives the x position of the circle. Here d will be data[0], then data[1] and so on. Thus d.x is the value of x, and x(d.x) is the corresponding position in pixel found thanks to the x scale.