This is an collection of pure-javascript D3 graphs used in the @meniga/graphs package.
In order to fully understand the components it is necessary to have some basic understanding on D3.js
Some reading:
- basic : http://d3js.org/
- update pattern : http://bl.ocks.org/mbostock/3808218
- thinking with joins : http://bost.ocks.org/mike/join/
- pattern (ignore Extensible) : https://bocoup.com/weblog/reusability-with-d3/
- d3 api: https://github.com/mbostock/d3/wiki/API-Reference
All our charting components follow they same pattern where updateGraph plays the most crucial role. Its responsibility is to bind the data with the elements and update them depending on which “bucket” they fall into; update vs. enter vs. exit (see general update pattern).
It is important that the code remains fairly simple and it is advised not to add to many options in order to maintain code readability. In many cases it is far simpler to create a new graph.
It is worth noting that all D3 gist examples can be viewed by removing the “gist.github.com“ prefix and replacing it with “bl.ocks.org”.