All examples By author By category About

gordlea

D3 v5 Line Chart

D3 v4 Line Chart Example

This is a example for basic line chart using D3. We are using the newest version of D3, version 4. As for all visualizations, we can break down this work into a checklist.

Line Chart Checklist
  1. Add an SVG to draw our line chart on
  2. Use the D3 standard margin convetion
  3. Create an x axis
  4. Create a y axis
  5. Create an x scale
  6. Create a y scale
  7. Create a line generator
  8. Create a random dataset
  9. Create a path object for the line
  10. Bind the data to the path object
  11. Call the line generator on the data-bound path object
  12. Add circles to show each datapoint
  13. Add some basic styling to the chart so its easier on the eyes

Read through the code below to see where each part of the checklist is completed.

forked from pstuffa's block: D3 v4 Line Chart