What is D3 ?

  • 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.
  • 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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store