A simple cartesian graph in D3.js

  1. Create svg container div element and append to the dom.
  2. Set a width and height of that container.
  3. Create svg graphic element and append to svg container.
  4. Set margins with attribute transform and translate, as the starting point is upper left instead of bottom left as tradition dictates.
  5. Create the scale for the x and y axes (give them the domain of your data set and the range of the set margins.
  6. Make it look nice by chaining .nice().
  7. Create the axes by appending graphics onto the svg element, one for each axes.
  8. Set the position of the axes with transform and translate attribute.
  9. Call the scale created for each of the axes to set the ticks or tick formats of the axes.
  10. Select line for styling the ticks and path for styling the axis line. Append texts for the labels.
  11. Now plot dataset in the format of array of objects with .enter() and appending the type of graphic associated for the dataset (circle for scatter plots).
  12. Add attributes or styles for data.
  13. Done!
  14. Bonus: Grid Lines are line appends on each tick of axes that ends at the margins.
  15. Bonus: Update data with transitions. Transitions and duration of those transitions can be added to any updates to the graph (data, scale, axes).
Like what you read? Give Jeffrey Ma a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.