Create a Bubble Overlay. Unlike other dc charts this chart will not generate a svg element; therefore the bubble overlay chart will not work if svg is not explicitly set. If the underlying image is a bitmap, then an empty svg will need to be created on top of the image.
TODO update example
// create a bubble overlay chart on top of the '#chart-container1 svg' element using the default global chart group
var bubbleChart1 = new BubbleOverlay('#chart-container1').svg(d3.select('#chart-container1 svg'));
// create a bubble overlay chart on top of the '#chart-container2 svg' element using chart group A
var bubbleChart2 = new BubbleOverlay('#chart-container2', 'chartGroupA').svg(d3.select('#chart-container2 svg'));
Chart groups are rendered or redrawn together since it is expected they share the same underlying data set.
chartGroup is passed to teh chart constructor. Setting it directly can have unintended consequences.
Overrides the color selection algorithm, replacing it with a simple function.
Normally colors will be determined by calling the colorAccessor to get a value, and then passing that
value through the colorScale.
But sometimes it is difficult to get a color scale to produce the desired effect. The colorCalculator
takes the datum and index and returns a color directly.
Set or get the current domain for the color mapping function. The domain must be supplied as an array.
Note: previously this method accepted a callback function. Instead, you may use a custom scale set by colorScale.
dc charts use on the ColorHelpers for color.
To color chart elements (like Pie slice, a row, a bar, etc.), typically
the underlying data element will be used to determine the color.
In most of the cases output of colorAccessor(d, i) will be used to determine the color.
Usually charts would used use one of
Different implementations of ColorAccessors provide different functionality:
// TODO example
Use any of d3 scales for color. This method is a shorthand for the following:
chart.scaledColors(scale); // same as chart.colorHelper(new ColorScaleHelper(scale));
Depending on type of scale, it will need either setting domain for the scale or
compute it as per your data using calculateColorDomain.
TODO add details
While creating a new chart, sometimes it may be tricky to find intended coordinates
of the bubbles.
Calling this method with true will enable displaying x/y coordinates on mouse move.
It is intended to be used only during development.
Current height of the chart.
To explicitly set height, please set height as part of the chart configuration.
If not set explicitly the size will be as per the anchor HTML element subject to a minimum as set in minHeight. In that case it will keep automatically resizing as well.
Attach a Legend widget to this chart. The legend widget will automatically draw legend labels based on the color setting and names associated with each group.
chart.legend(new Legend().x(400).y(10).itemHeight(13).gap(5))
Ordinal colors are used most commonly in dc charts.
This call is a shorthand for using an OrdinalColors instance
as colorHelper.
chart.ordinalColors(colorList); // same as chart.colorHelper(new OrdinalColors(colorList));
Get or set the bubble radius scale. By default the bubble chart uses d3.scaleLinear().domain([0, 100]) as its radius scale.
Calling redraw will cause the chart to re-render data changes incrementally. If there is no change in the underlying data dimension then calling this method will have no effect on the chart. Most chart interaction in dc will automatically trigger this method through internal events; therefore, you only need to manually invoke this function if data is manipulated outside of dc's control (for example if data is loaded in the background using crossfilter.add).
Typically you would invoke redrawGroup which will redraw all charts within the chartGroup.
Redraw all charts in the same group as this chart, typically in reaction to a filter change. If the chart has a commitHandler, it will be executed and waited for. It internally calls redrawAll
Redraw all charts in the same group as this chart, typically in reaction to a filter change. If the chart has a commitHandler, it will be executed and waited for. It internally calls redrawAll
Invoking this method will force the chart to re-render everything from scratch. Generally it should only be used to render the chart for the first time on the page or if you want to make sure everything is redrawn from scratch instead of relying on the default incremental redrawing behaviour.
Typically you would invoke renderGroup which will redraw all charts within the chartGroup.
Renders all charts in the same group as this chart. If the chart has a commitHandler, it will be executed and waited for. It internally calls redrawAll
A renderlet is similar to an event listener on rendering event. Multiple renderlets can be added to an individual chart. Each time a chart is rerendered or redrawn the renderlets are invoked right after the chart finishes its transitions, giving you a way to modify the SVGElements. Renderlet functions take the chart instance as the only input parameter and you can use the dc API or use raw d3 to achieve pretty much any effect.
Use on with a 'renderlet' prefix. Generates a random key for the renderlet, which makes it hard to remove.
chart.renderlet has been deprecated. Please use chart.on("renderlet.
// do this instead of .renderlet(function(chart) { ... })
chart.on("renderlet", function(chart){
// mix of dc API and d3 manipulation
chart.select('g.y').style('display', 'none');
// its a closure so you can also access other chart variable available in the closure scope
moveChart.filter(chart.filter());
});
TODO move to compat
Usually generating an SVG Element is handled handled by dc internally. This chart, however, needs an SVG Element to be passed explicitly.
const caChart = new dc.BubbleOverlay("#ca-chart").svg(d3.select("#ca-chart svg"));
Current width of the chart.
To explicitly set width, please set width as part of the chart configuration.
If not set explicitly the size will be as per the anchor HTML element subject to a minimum as set in minWidth. In that case it will keep automatically resizing as well.
Execute the callback without transitions.
Internally it sets transitionDuration to 0 and restores it after
the callback().
Set the domain by determining the min and max values as retrieved by .colorAccessor over the chart's dataset.
This is useful only for certain type of color scales.
In particular it will not work with ordinalColors.
Filter the chart by the given parameter, or return the current filter if no input parameter is given.
Starting version 5, filtering is provided by DataProvider.
Clear all filters associated with this chart. The same effect can be achieved by calling chart.filter(null).
Returns all current filters. This method does not perform defensive cloning of the internal filter array before returning, therefore any modification of the returned array will effect the chart's internal filter storage.
Starting version 5, filtering is provided by DataProvider.
Check whether any active filter or a specific filter is associated with particular chart instance. This function is not chainable.
Starting version 5, filtering is provided by DataProvider.
Optional f: anyCheck whether any active filter or a specific filter is associated with particular chart instance. This function is not chainable.
Starting version 5, filtering is provided by DataProvider.
Optional filter: anyAll dc chart instance supports the following listeners. Supports the following events:
renderlet - This listener function will be invoked after transitions after redraw and render. Replaces the
deprecated renderlet method.pretransition - Like .on('renderlet', ...) but the event is fired before transitions start.preRender - This listener function will be invoked before chart rendering.postRender - This listener function will be invoked after chart finish rendering including
all renderlets' logic.preRedraw - This listener function will be invoked before chart redrawing.postRedraw - This listener function will be invoked after chart finish redrawing
including all renderlets' logic.filtered - This listener function will be invoked after a filter is applied, added or removed.zoomed - This listener function will be invoked after a zoom is triggered..on('renderlet', function(chart, filter){...})
.on('pretransition', function(chart, filter){...})
.on('preRender', function(chart){...})
.on('postRender', function(chart){...})
.on('preRedraw', function(chart){...})
.on('postRedraw', function(chart){...})
.on('filtered', function(chart, filter){...})
.on('zoomed', function(chart, filter){...})
Replace the chart filter. This is equivalent to calling chart.filter(null).filter(filter)
but more efficient because the filter is only applied once.
Starting version 5, filtering is provided by DataProvider.
Execute d3 single selection in the chart's scope using the given selector and return the d3 selection.
This function is not chainable since it does not return a chart instance; however the d3 selection result can be chained to d3 function calls.
This is typically used in augmenting/modifying a chart.
TODO link to example
// Has the same effect as d3.select('#chart-id').select(selector)
chart.select(selector)
CSS selector string
Execute in scope d3 selectAll using the given selector and return d3 selection result.
This function is not chainable since it does not return a chart instance; however the d3 selection result can be chained to d3 function calls.
This is typically used in augmenting/modifying a chart.
TODO link to example
// Has the same effect as d3.select('#chart-id').selectAll(selector)
chart.selectAll(selector)
Execute in scope d3 selectAll using the given selector and return d3 selection result.
This function is not chainable since it does not return a chart instance; however the d3 selection result can be chained to d3 function calls.
This is typically used in augmenting/modifying a chart.
TODO link to example
// Has the same effect as d3.select('#chart-id').selectAll(selector)
chart.selectAll(selector)
CSS selector string
Turn on optional control elements within the root element. dc currently supports the following html control elements.
Set the root SVGElement to either be an existing chart's root; or any valid d3 single selector specifying a dom block element such as a div; or a dom element or d3 selection.
This is internally managed. Invoking it directly may have unintended consequences.
Return charts data, typically group.all(). Some charts override this method.
The derived classes may even use different return type.
Return charts data, typically group.all(). Some charts override this method.
The derived classes may even use different return type.
Protected expireExpire the internal chart cache. dc charts cache some data internally on a per chart basis to speed up rendering and avoid unnecessary calculation; however it might be useful to clear the cache if you have changed state which will affect rendering. For example, if you invoke crossfilter.add function or reset group or dimension after rendering, it is a good idea to clear the cache to make sure charts are rendered properly.
TODO determine if it can be removed, does not seem to be used
Protected handleList of items that will show as legends. The charts implement this method.
This function is passed to d3 as the onClick handler for each chart. The default behavior is to filter on the clicked datum (passed to the callback) and redraw the chart group.
This function can be replaced in order to change the click behavior (but first look at
const oldHandler = chart.onClick;
chart.onClick = function(datum) {
// use datum.
}
This function is passed to d3 as the onClick handler for each chart. The default behavior is to filter on the clicked datum (passed to the callback) and redraw the chart group.
This function can be replaced in order to change the click behavior (but first look at
const oldHandler = chart.onClick;
chart.onClick = function(datum) {
// use datum.
}
Optional i: numberProtected onSet chart options using a configuration object. Each key in the object will cause the method of the same name to be called with the value to set that attribute for the chart. TODO: With concept of conf, this is less relevant now, consider moving it to compat.
chart.options({dimension: myDimension, group: myGroup});
Returns the root element where a chart resides. Usually it will be the parent div element where the SVGElement was created.
Resetting the root element on a chart outside of dc internals may have unexpected consequences.
Generated using TypeDoc
The bubble overlay chart is quite different from the typical bubble chart. With the bubble overlay chart you can arbitrarily place bubbles on an existing svg or bitmap image, thus changing the typical x and y positioning while retaining the capability to visualize data using bubble radius and coloring.
Examples: