vizkit.js is an opinionated little charting library built on top of the amazing and wonderful d3.js visualization framework.
The core design of vizkit was heavily inspired by the article Towards Reusable Charts from d3.js author Mike Bostock. With this approach, getting a visualization on the screen involves just a few quick steps.
var DrawViz = vizkit.linechart(data)
All vizkit charts are closures assigned as properties to the main vizkit library object. When instantiating each chart the data to be visualized is passed along as the sole parameter to the function. ( Note: data format will vary depending on the chart type! )
var DrawViz = vizkit.linechart(data)
.yAxis({title: 'foo'})
.xAxis({title: 'bar'});
Chart configuration is facilitated via chained methods of the chart closure. Configuration in this manner keeps the style of vizkit similar to that of d3.js and also prevents the use of large unweildly configuration objects.
DrawViz(d3.select('.viz'));
The final step is passing vizkit the DOM element you wish to place the visualization within; doing so renders the chart! Notice that the element must be passed using d3.select. Also notice how the vizkit chart function was set to a variable before being rendered, this enables easier redrawing of the visualization should your data or configuration change on the fly.
Keeping the style of a chart defined by CSS is one of the goals of vizkit.js. If something visual about a chart can be controlled easily with css, it likely is. For example, vizkit charts will attempt to inherit the height of their containing element, so it is a good practice to define the height explicitly in css. When looking over the provided example code, be sure to take note of chart specific class name vizkit makes available for styling.