Motivation

The motivation for Monte stems from working in the UI/UX consulting field where relatively minor changes to charts could result in conflicts, complications, and large amounts of work—or were flat out impossible/impractical. This is all due to the assumptions, restrictions, architecture choices, etc... that other libraries have made.

Monte strives to find the balance between reuse and custom functionality.

Modern Web Ready

Monte uses D3 version 4+ and is written in ES6. Builds are transpiled to ES5 using Babel. SVG is utilized for ease of styling, exporting for other uses, and at a later point to adopt ARIA for accessibility.

Leverage D3 Knowledge

Monte follows D3 practices (like the General Update Pattern and Margin Convention); charts often accept and expose native D3 types without wrapping (such as axes, scales, selections, transitions, lines, symbols, shapes, and others); and limits non-D3 dependencies.

Monte also attempts to use similar terms, names, and overall language as D3 for general consistency.

Basics

Standard charts (Bar, Line, Scatter, etc...) are provided and have enough basic behavior to be used right out of the box. They can be heavily modified through the use of options and extensions.

Options control margins, sizes, data binding, CSS classes, scales, feature placement, and other configurable options. In most cases options can be static values or functions that are invoked at various stages: chart options are generally invoked relatively rarely (such as setting the inner radius on a donut), but data specific options are invoked with data changes (such as color of a given node).

Extensions provide reusable functionality; many of which are chart-type independent. Chart modifications are encouraged and accomplished within the chart's lifecycle events to keep everything in sync.

Modification

Beyond options and extensions charts can be modified directly through callbacks bound to lifecycle events. For example, the updated event fires after the chart has refreshed the drawn items on screen in response to a data change. The chart can use on('updated', function() { ...}) to have a callback execute custom modifications such as updating a label, drawing a reference line, or notifying other charts to react in some way.

Further modifications are accomplished through extending a chart type (i.e. use the ES6 keyword extends). In fact all of the standard charts extend from base charts and many of the standard charts extend from other standard charts: Area charts are extended from Line charts.

Foundation charts (Chart, AxesChart, and PolarChart) can be extended to take advantage of Monte's infrastructure without inheriting the drawing behavior of concrete charts (BarChart, ArcChart, and many others.) Foundation charts are base classes for the concrete charts can be used to build custom charts quickly that follow the same behaviors as the other Monte charts. Allowing for consistency in how charts are consumed throughout an application.

Future Features / Roadmap

There is no particular timeline for support of these features, but they are the ones at the top of mind. In no particular order, expected future features:

• accessibility using ARIA for built-in charts;
• additional chart types, such as Chord, Choropleth, Heat Map, Polar Area (recently added), Matrix Diagram, Radar, and others;
• extensions for interactivity (cross hair reference lines, hover reference line, brushing, lasso selection, tooltips (see monte-ext-d3-tip) Voronoi); and
• extensions for rendering (error bars, error bands, legends, OHLC and Candlestick bars).

Other practical considerations are being made:

• all demos below will be converted into GitHub Gists that will be accessible from jsFiddle/plunkr and bl.ocks.org;
• more involved demos will be created illustrating communication between chart, broader customization, custom chart types, and more;
• reusable SCSS/CSS themes will be added;
• thorough unit test coverage; and
• documentation, tutorials, and other materials for using Monte.