← Learn Javascript

Javascript – Data Visualization

Data visualization with Javascript

Frameworks - D3 vs. Chart.js

Chart.js d3.js
Ready-made charts (like Google Charts) Create custom charts, maps, and interactive visualizations
Create a bar chart with a few lines of code More overhead to learn, and more code to create similar charts
Limited options (changing data, basic CSS, and documentation) More options for specialized visualizations
Great for creating basic charts like the samples they provide D3 for everything else

Frameworks - D3 & Chart.js

Chart.js

Tutorials

Examples

D3

Tutorials

Examples

D3 Essential Knowlege

  • Know what version you are using! Code examples you find online might be the wrong version and won't work. Because D3 is somewhat of a specialized project, there are changes each new version.
  • D3 documentation is a pain: Github > D3 organization

D3 - Scale

  • Scale is essentially a map function, where you have input range (domain) and output range (actually called “range”) which you can reuse to “map” values in your data to positions in pixels in your graph.
  • Create a scale based on the type of data then use that to make the axis.

Inspiration