An object-oriented API for business analytics

This release makes Dimple compatible - and reliant upon - D3 version 4.3. I have not marked this as a major version change because any charts using just dimple functionality should continue to work as before, however this is a slightly grey area, as most advanced implementations of dimple charts are likely to also use D3 functionality and may well run into one of its breaking changes.

Therefore I would only recommend migrating existing work to this new version if you have reason to move to the latest d3 release.

This release includes the following fixes and improvements:

• Area and line chart will correctly handle a single point series
• setMargins will no longer invoke draw
• Return value data types from getData have been corrected
• Totals calculated correctly for proportional axes
• Line marker custom class added
• All shapes for a particular series are now grouped
• Zero pie segments will no longer be sizes as NaN
• Parent SVG size no longer depends on deprecated offsetWidth or offsetHeight.
• Adhoc examples fixed

A small release with a few bug fixes:

• Setting chart.noFormats = true will no longer apply formats to the tooltip.
• Line and Areas with color axes defined were broken, this now works correctly.
• New Example showing how to apply classes with the chart.customClassList.

This is an emergency fix for a critical bug in version 2.1.4 causing measure axes to be laid out incorrectly.

Merging in a number of pull requests to deal with the following topics:

• Opacity changes no longer occur when setFormats = false
• Axes are correctly classed so that they can be styled with CSS
• Line marker backs are correctly positioned in the DOM
• Shape ID's are now clean of illegal characters
• Charts no longer fall over with null values (thanks to @younesben)
• Legend spacing can be manually controlled with horizontalPadding and verticalPadding properties (thanks to @guilhermesimoes)
• Copyright information updated
• Auto label rotation can be switched off using the autoRotateLabel property of the axis (thanks to Robert Paskowitz)
• All examples now have html and encoding correctly defined (thanks to @sajith)

• Custom classes are now supported using the object in chart.customClassList. See covered classes here.
• Line markers will now draw correctly on redraw (thanks to @ne8il)
• Empty data arrays will now be handled correctly (#101)
• Division by zero DOM error is now fixed
• Handling of small numbers improved (thanks to @ses4j)
• Erroneous in-line styles have been removed for chart.noFormats = true (thanks to @artsyca)
• The latest dimple release will also be made available in unversioned links here and minified here

Dimple version 2.1 contains a few fixes and features including one new feature which I've had a lot of requests for:

• Pie Charts - After many requests, and despite my own dislike of them, Dimple now supports pie charts in a variety of shapes and sizes. They are really nice to combine with other charts (example) so get creative!
• Require.js and AMD support - Merged pull request (#81) from Stephen James refactoring dimple so that it plays nicely with Require.js and AMD.
• It's now simple to define bubble radius using the new series.radius property. This will either define the size of points on a scatter plot or the maximum size of a bubble in a bubble chart.
• Dual Category Line Charts now order correctly (Issue #71)
• Line Charts now work correctly with a custom event handler (Issue #75)
• Fixed an unusual case where dimple didn't display all points of an area chart where some shared rounded x pixel values (Issue #79)
• Fixed a problem when sorting a list containing a zero string (Issue #84)
• Fixed a bug with the _getOrderedList function (Issue #87)

Classes

All class names have been changed. If you have any old implementations using classes for either styling or shape selection they may break if you choose to migrate them to version 2.

• To avoid conflicts every class added by dimple will now be prefixed with "dimple-" and they will be made lower case with any non-alphanumeric characters replaced with hyphens. For example a series drawn for a SKU called "Roller Cola 2.0L" will have its shapes classed as "dimple-roller-cola-2-0l".
• This includes dimples fixed classes, the tooltip for example is now classed as "dimple-tooltip" rather than "tooltip". This example in particular caused a lot of problems due to a conflict with Bootstrap which will no longer occur (Issue #52).

Transitions

All transitions have been improved. While the API previously supported adding transitions, they were at often janky and sometimes completely broken. All drawing code has been updated for more reliable entry, exit and storyboard transitions.

• The chart.ease property has been added, allowing you to specify a particular d3 ease for your transition. By default "cubic-in-out" is used (as in version 1). All d3 ease values are now supported, the linear transition option can be viewed in this example.
• A new chart.staggerDraw property has been added which when set to true (default false) causes dimple to stagger drawing along a category axis for unconnected series (bars/bubbles). Here's an example showing ease and stagger in action to put a bit of bounce into your standard bar chart.
• Axis transitions have been fixed so that category axis values no longer go haywire when values are added (Issue #18).
• A zero length transition is no longer used by default (dimple now uses no transition at all). Although there is no visible difference the zero length transition caused a race condition meaning shape attributes were not accessible immediately after draw.
• A series.afterDraw property has been added which can receive a function executed against each shape after a transition completes. The bar labels example has been updated to show how - although this chart doesn't use a transition. Setting a transition on draw will cause the chart to work like this.
• Chart drawing also accounts correctly for missing data both in single dimensions (Issue #44) and the entire set (Issue #29).

Areas & Lines

The plotting logic for both the area and line charts has been completely rewritten to fix a number of problems in addition to the transition fixes mentioned above.

• The series.interpolation property has been added to allow line interpolations to be applied to both the area and line charts (Issue #26). Here's a curvy line chart and a curvy area chart for example (Issue #21).
• In addition to all the standard d3 interpolations, dimple also supports a custom interpolation called 'step'. It uses d3's 'step-after' interpolation but shifts it and fills in some points to create a nicer stepped chart. See examples for lots of new step line and area examples.
• Missing values in an area series will no longer cause crashing regions (Issue #7).
• The order that points are connected is now more useful by default but can be correctly overridden with series.addOrderRule (Issue #61).
• Markers no longer get left behind when redrawing.
• Dual measure areas now work. The drawing algorithm connects the fewest number of points necessary to encapsulate all the data points. You can see an example here.

Composite Axes

Composite axes (Issue #38) have now been added, meaning that with a slight change to your code you can now mix dimensions on a single axis. Adding a composite axis is as simple as passing an axis reference into the position parameter of a second axis. So this dual axis example (not new in v2.0):

var monthAxis = myChart.addCategoryAxis("x", "Month");
var volumeAxis = myChart.addMeasureAxis("y", "Unit Sales");
var profitAxis = myChart.addMeasureAxis("y", "Operating Profit");
myChart.addSeries("Quantity",  dimple.plot.line, [monthAxis, volumeAxis]);
myChart.addSeries("Op. Profit",  dimple.plot.line, [monthAxis, profitAxis]);

see it here

Could be changed so that both measures go on the left-hand axis as follows:

var monthAxis = myChart.addCategoryAxis("x", "Month");
var volumeAxis = myChart.addMeasureAxis("y", "Unit Sales");
var profitAxis = myChart.addMeasureAxis(volumeAxis, "Operating Profit");
myChart.addSeries("Quantity",  dimple.plot.line, [monthAxis, volumeAxis]);
myChart.addSeries("Op. Profit",  dimple.plot.line, [monthAxis, profitAxis]);

see it here

Notice the slight change to the third line which turns this into a composite axis meaning both lines are drawn against the same y axis. Measures are probably going to be used in almost all instances of composite axes, but you can also use it for categories, see this rather strange example.

Other Changes

Version 2.0 also brings a host of other changes:

• If bar chart series have their .stacked property set to false, the bars will be drawn as a floating bar using the opposing axis floating bar width. This can be seen here, they are unlikely to be overly valuable themselves however they are very good overlayed on other series to provide bounds markers.
• Previously it was not possible to combine a label and real dimensions in the series dimension array. This has been fixed. E.g. mychart.addSeries(["This dimension exists", "This dimension doesn't"], dimple.plot.line);.
• Axis titles can now be set with a property on the axis myAxis.title = "New Title"; - This can also be seen in the composite axis examples above.
• Series specific data sets no longer confuse drop-lines when plotted against separate axes (Issue #62).
• All objects now have their dynamic font size removed and replaced with a fixed 10 pixel font size. I never had good results with the dynamic sizing so it is no longer the default, instead all objects can have their font manually set (Issue #30). If you would like to use version 2.0 but prefer the original handling this can be set manually myAxis.fontSize = "auto".
• Axes now default to clamped. This means that overriding minimum values works correctly now (Issue #37) but if you prefer you can still override to the previous behaviour using myAxis.clamp = "false".
• Measure axes now have an option to override the number of ticks (Issue #66). For example you can draw just 3 ticks on the axes with myAxis.ticks = 3. This continues to default to 10. This doesn't work with category axes, however there is a method in my answer here which allows you to do this after the fact.
• Tooltip text is now defined in an an accessible method which can be overridden like this.
• Tooltip placement has also been improved to reduce chances of overlapping the edge of the chart.
• Drawing an automatically sized chart in Firefox no longer throws an error (Issue #54).
• Legends (and charts) can now be positioned from the right hand side of the chart using a negative value (Issue #63). This is demonstrated in the responsive sizing example
• Single points for lines and areas will now force a line marker so that something will always be visible.

Example Changes

If you have an implementation based on an example you might want to be aware of these changes:

• Advanced Bar Labels - Previous code relied on bug where height of segments had not been fully loaded after draw due to a zero length transition causing a race condition. The example code has been significantly changed and simplified using the new .afterDraw property to demonstrate drawing after a transition, however patching the old code to work simply requires you to change the line .attr("y", parseFloat(shape.attr("y")) - height / 2 + 3.5) to .attr("y", parseFloat(shape.attr("y")) + height / 2 + 3.5).
• Christmas Tree Example - This has been removed - It was only meant to be a seasonal example and its April already! It also doesn't work in version 2 as it exploited a bug with area drawing, which was needed to get around the old limitation regarding datasets. It could be recoded much more elegantly now, but that will have to wait until next christmas!
• Mekko Matrix - As with the label example this relied on the y coordinate being set at its entry value. This is now correctly set to its actual value and therefore the code needs to be ammended by changing the means of getting the y coordinate from parseFloat(shape.attr("y")) - parseFloat(shape.attr("height")), to the more obvious parseFloat(shape.attr("y")),.
• Waterfall - The code for the waterfall relies on a class name "pad" derived from the series data. As discussed above, dimple now prefixes all class names with "dimple-" meaning the code just needs to be modified so that svg.selectAll(".pad").remove(); becomes svg.selectAll(".dimple-pad").remove();.

Merged Pull Request #49 to fix some problems with tooltip behaviour.

• Correctly judges SVG width for non-pixel based SVG sizes.
• Fixes bug where tooltips were placed with a negative x value.

Independent series datasets

• Data may now be assigned directly to a series, meaning separate filtering or even completely different datasets may now be combined (Pull Request #45).
• Series category values are now correctly converted to class names by replacing spaces with underscores (Issue #4).
• Line and area charts now correctly receive event arguments with custom events (Issue #15)
• Redrawing line or area charts now correctly animate line markers (Issue #28).
• Tooltips are now correctly classed with the .tooltip class for easier styling (Issue #40).

Handling Epoch Dates

• Modified Time Axis to incorporate Pull Request #27 allowing epoch time values by setting a null time format
• Added a festive example.

Mixed Position Attributes

• Positioning attributes now take comma separated lists of values. For example setting a top margin to "10px,20%,5px" will position the chart 20% of svg height + 15 pixels. This is very helpful when creating visualisations with multiple chart objects which you wish to resize (such as a trellis chart).
• Fixed issue #19 drop lines are now correctly positioned.

Chrome v30.x compatibility

• Chrome v30.x broke the selections used in Dimple for certain cases. Dimple relied on selecting descendants using collection.selectAll(".class type") which doesn't seem to work where the type is a 2nd generation descendant of the class. I can't find documentation to explain the change in Chrome but the 2 step selector is actually unnecessary in Dimple so we have reverted to a single type selector. The collection already restricts the selection sufficiently.
• Chrome and Safari were also adding a title at position 0,0 for z axes. This was a dimple bug, all browsers were in fact adding the title but only Chrome and Safari were rendering it due to 0 size. Position is now correctly considered when drawing axis titles.

Responsive Charting

• Any method which previously took an absolute size can now also take a % size which will be based on percentage of the relevant svg size dimension.
• This and all future releases will now use a three digit version code in the name. This means code referencing any previous versions will remain unchanged by this and future releases.

Minor Fix

• Some client code was relying on constructing legend with no parameters. The parameters are marked as required and v1.0.0 made this assumption, however this release includes a small fix allow null parameters without breaking the chart.

Initial Release

• Incorporating all changes so far. From now on releases will be versioned.