Might become a lib
Posted on January 7, 2018 in
3 min read
I've thought a bit on reusable D3.js chart template lately.
It's an interesting journey that led me to further thoughts with the chance to create even a long-term project.
It's still a working progress and far from having a roadmap. I really want to follow a bottom-up process.
This is the first module, a barchart generator.
Most D3.js based libraries use a specific API to handle the data binding with a selector.
To me, the way D3.js handles that function sounds totally right.
This barchart generator needs to be configured first, in the same way d3-axis or other similar modules require:
var chart = rivela.barchart() .width(200) .height(200)
The module has some defaults and provides some configs, then, D3.js is explicitly required to complete the initialization:
The data structure
Chart libraries usually require specific data structure in order to build something visible. This is perfectly reasonable in order to avoid too much complexity into the lib just to rearrange datasets. On the other hand, it might result annoying restructuring a loaded dataset for a simple chart .
While some structure is required, the user should be able to specify some options about how to use the dataset.
I do really love how D3.js allows this kind of configuration by means of custom accessors. This module borrows the same strategy for custom configurations, such as:
rivela.barchart() .value(d => d.v)
Further configurations follow the same principle:
An additional accessor might allow to specifing the array key in case of more complex dataset structure. This turns very useful on multiple instances of the same chart:
Dynamic accessors can be powerful also in other situation such as how to tint items based on some logic. Instead of putting this logic within the chart generator, let's rely on the full power of D3.js:
The module is designed to accept updates. In this example you can push the 'update' button to add random data points:
Here an example about how to transform the default style through CSS:
I'm quite happy of this stage so far. As I said, I want to conduct a bottom-up process, therefore, we'll see what is going to become in the near future.