Might become a lib

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.

The initialization

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:

See the Pen MrOQvG by Fabio Franchino (@abusedmedia) on CodePen.

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)

See the Pen PEOgPx by Fabio Franchino (@abusedmedia) on CodePen.

Further configurations follow the same principle:

See the Pen BJmEby by Fabio Franchino (@abusedmedia) on CodePen.

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:

See the Pen MrORxm by Fabio Franchino (@abusedmedia) on CodePen.

Other configurations

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:

See the Pen LeOvaJ by Fabio Franchino (@abusedmedia) on CodePen.

Dynamic

The module is designed to accept updates. In this example you can push the 'update' button to add random data points:

See the Pen BJmEEy by Fabio Franchino (@abusedmedia) on CodePen.

Style

I truly believe that styling should belong to CSS as much as possible. This is not always easy nor possible to do because some styles need to be calculated using javascript. Nevertheless, good implementation design can help a lot.

Here an example about how to transform the default style through CSS:

See the Pen EobJJE by Fabio Franchino (@abusedmedia) on CodePen.

Conclusion

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.

Stay tuned.