KotoJS is HEAVILY inspired by another reusable charting framework maintained by the Miso Project called d3.chart. I think that project is well designed and well documented. For those who are not familiar with d3.chart, the framework provides a logical way to ensure that all data-visualization components that are authored using the framework are done in a way that facilitates re-usablily.
However, as somebody who greatly depends on the d3.chart framework, I’ve gotten concerned that support for the project has dwindled over the past several months. This has prompted me to write my own reusable charting framework, taking all the things the things that I really like about d3.chart and adding a few things that I had always wanted.
I’m a big believer in modules. With KotoJS, all your components are exported as a UMD (Universal Module Definition) module so that they can be integrated with several bundlers/asset managers. So, if you like using CommonJS, or AMD, or nothing at all, these widgets will work exactly like you’d expect them to. I’ve tested them with bundlers like RequireJS, Webpack, and Browserify so I’m confident that koto can be easily integrated into most projects.
In d3.chart, it is a common practice to have each configurable option (ex. Height, Widgth, fill) to have its own getter and setter method attached to the chart. This practice is suggested by Mike Bostock (creator of D3) and generally a good thing. For my own personal use case of this framework, I need the abily to store all the configs to a single object and so I found it much easier to have a common API for getting and setting config items like so:
In an effort to make components authored with this framework truely reusable, it was important to me that widgets could take in data with a variety of schemas. I can then tell my component how to “access” the data that it needs.
In d3.chart, the only “hooks” that were available for you on the chart level was
transform. In KotoJS I have extended the list to include
postDraw. I have also exposed a
hasDrawn property that allows for you check if something is being “re-drawn”. All of the hooks are optional so you don’t have to use them if you don’t want to.
In d3.chart, the API for initalizing a chart was an extension of d3’s selection prototype. I felt wrong to me to extend d3 so I have removed the need to do that and have opted to have charts authored with KotoJS to initialize like any other constructor function.
You can install koto via bower by running:
or via npm by running:
Browse the Wiki.
The goal is to have a large library of pre-built widgets using this framework open sourced and available for all to use. I’m still thinking through the details but be expecting something to be released soon. If you’d like to contribute a widget (or 2 or 43), I’d welcome the support.
This project is HEAVILY inspired by the awesome work done by @jugglinmike and @iros and their charting framework called d3.chart.