The lollipop chart provides a visualization of values compared to their own comparison value. The value is the lollipop and the comparison is the bar.
Look at the Demo
LollipopChart is a UMD module, you can add the javascript in a scripts tag or require it using something like webpack. D3 must either be available in the global namespace or bundled in with your bundle tool. For the global namespace method download lollipopChart.js, put something like the following in your and you should be good to go.
<script src="d3.js" charset="utf-8"></script>
<script src="lollipopChart.js" charset="utf-8"></script>
HTML would look something like this
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="d3.js" charset="utf-8"></script>
<script src="lollipopChart.js" charset="utf-8"></script>
</head>
<body>
<div id="myLollipopChart"></div>
</body>
<script src="index.js"></script>
</html>
And the index.js here would contain something like this
var lollipopChart = LollipopChart('#myLollipopChart'); //you can also use the commonJs way if you're bundling everything with something like webpack
var gradesPerName = [
{name: 'Bobby', value: 80, comparisonValue: 80},
{name: 'Jane', value: 79, comparisonValue: 68},
{name: 'Fred', value: 70, comparisonValue: 78},
{name: 'Alan', value: 75, comparisonValue: 64},
{name: 'Jeeves', value: 75, comparisonValue: 85},
{name: 'Mary', value: 67, comparisonValue: 70},
{name: 'Marsha', value: 60, comparisonValue: 68},
{name: 'Andy', value: 100, comparisonValue: 100},
];
lollipopChartBasic
.render(gradesPerName);
Kind: global class
- LollipopChart
- new LollipopChart(selection)
- .render([data]) ⇒
LollipopChart - .data([data]) ⇒
Object|LollipopChart - .tooltipContent([tooltipContentFunction(datum)]) ⇒
Object|LollipopChart - .colorScale([scale]) ⇒
Object|LollipopChart - .noDataColor([color]) ⇒
string|LollipopChart - .yScale([d3 scale]) ⇒
Object|LollipopChart - .barGap([barGap]) ⇒
number|LollipopChart - .lollipopRadius([radius]) ⇒
number|LollipopChart - .width([width]) ⇒
number|LollipopChart - .height([height]) ⇒
number|LollipopChart - .valueAccessor([valueAccessorFunc]) ⇒
function|LollipopChart - .nameAccessor([nameAccessorFunc]) ⇒
function|LollipopChart - .comparisonValueAccessor([comparisonValueAccessorFunc]) ⇒
function|LollipopChart - .transitionDuration([transitionDuration]) ⇒
number|LollipopChart
Lollipop chart implementation.
| Param | Type | Description |
|---|---|---|
| selection | String |
any valid d3 selector. This selector is used to place the chart. |
lollipopChart.render([data]) ⇒ LollipopChart
Render the LollipopChart instance. Simply renders chart when called with parameter. Updates data, then renders, if called with parameter
Kind: instance method of LollipopChart
| Param | Type |
|---|---|
| [data] | Object |
lollipopChart.data([data]) ⇒ Object | LollipopChart
Get/set the data for the LollipopChart instance. Data should be in the form of an array of objects with name, value, and comparisonValue. Ex. [{name: 'USA', value: 17, comparisonValue: 20}, {name: 'Canada', value: 14, comparisonValue: 10}] Data can also specify a scale to use for only that data object like {name: 'Alberia', value: 23, comparisonValue: 44, scale: d3.scale.linear().domain([0, 50])} For individual scales, a domain must be set for that scale.
Kind: instance method of LollipopChart
Returns: Object - [Acts as getter if called with no parameter]LollipopChart - [Acts as setter if called with parameter]
| Param | Type |
|---|---|
| [data] | Object |
lollipopChart.tooltipContent([tooltipContentFunction(datum)]) ⇒ Object | LollipopChart
Get/set the color tooltip content function for the LollipopChart instance. The default will return a function with content for displaying the Name, Value, and Comparison Value in a tooltip
Kind: instance method of LollipopChart
Returns: Object - [Acts as getter if called with no parameter]LollipopChart - [Acts as setter if called with parameter]
| Param | Type |
|---|---|
| [tooltipContentFunction(datum)] | function |
lollipopChart.colorScale([scale]) ⇒ Object | LollipopChart
Get/set the color scale for the LollipopChart instance. The color scale is set by default to d3.scale.category10
Kind: instance method of LollipopChart
Returns: Object - [Acts as getter if called with no parameter]LollipopChart - [Acts as setter if called with parameter]
| Param | Type |
|---|---|
| [scale] | Object |
lollipopChart.noDataColor([color]) ⇒ string | LollipopChart
Get/set the no-data-color for the LollipopChart instance.
Kind: instance method of LollipopChart
Returns: string - [Acts as getter if called with no parameter]LollipopChart - [Acts as setter if called with parameter]
| Param | Type |
|---|---|
| [color] | string |
lollipopChart.yScale([d3 scale]) ⇒ Object | LollipopChart
Get/set the y-scale for the LollipopChart instance. If this is not set, the chart will calculate the scale domain as the min and max of the data values passed into the chart. Set this scale if you need a global scale. Note that individual scales are allowed if any data object has a scale property on it like {name: 'Bob', value: 25, comparisonValue: 45, scale: d3.scale.linear()}
Kind: instance method of LollipopChart
Returns: Object - [Acts as getter if called with no parameter]LollipopChart - [Acts as setter if called with parameter]
| Param | Type |
|---|---|
| [d3 scale] | Object |
lollipopChart.barGap([barGap]) ⇒ number | LollipopChart
Get/set the gap between bars for the LollipopChart instance.
Kind: instance method of LollipopChart
Returns: number - [Acts as getter if called with no parameter]LollipopChart - [Acts as setter if called with parameter]
| Param | Type |
|---|---|
| [barGap] | number |
lollipopChart.lollipopRadius([radius]) ⇒ number | LollipopChart
Get/set the lollipop radius for the LollipopChart instance.
Kind: instance method of LollipopChart
Returns: number - [Acts as getter if called with no parameter]LollipopChart - [Acts as setter if called with parameter]
| Param | Type |
|---|---|
| [radius] | number |
lollipopChart.width([width]) ⇒ number | LollipopChart
Get/set the chart width for the LollipopChart instance.
Kind: instance method of LollipopChart
Returns: number - [Acts as getter if called with no parameter]LollipopChart - [Acts as setter if called with parameter]
| Param | Type |
|---|---|
| [width] | number |
lollipopChart.height([height]) ⇒ number | LollipopChart
Get/set the chart height for the LollipopChart instance.
Kind: instance method of LollipopChart
Returns: number - [Acts as getter if called with no parameter]LollipopChart - [Acts as setter if called with parameter]
| Param | Type |
|---|---|
| [height] | number |
lollipopChart.valueAccessor([valueAccessorFunc]) ⇒ function | LollipopChart
Get/set the value accessor for the LollipopChart instance.
Kind: instance method of LollipopChart
Returns: function - [Acts as getter if called with no parameter]LollipopChart - [Acts as setter if called with parameter]
| Param | Type |
|---|---|
| [valueAccessorFunc] | function |
lollipopChart.nameAccessor([nameAccessorFunc]) ⇒ function | LollipopChart
Get/set the name accessor for the LollipopChart instance.
Kind: instance method of LollipopChart
Returns: function - [Acts as getter if called with no parameter]LollipopChart - [Acts as setter if called with parameter]
| Param | Type |
|---|---|
| [nameAccessorFunc] | function |
lollipopChart.comparisonValueAccessor([comparisonValueAccessorFunc]) ⇒ function | LollipopChart
Get/set the comparison value accessor for the LollipopChart instance.
Kind: instance method of LollipopChart
Returns: function - [Acts as getter if called with no parameter]LollipopChart - [Acts as setter if called with parameter]
| Param | Type |
|---|---|
| [comparisonValueAccessorFunc] | function |
lollipopChart.transitionDuration([transitionDuration]) ⇒ number | LollipopChart
Get/set the transition duration for the LollipopChart instance.
Kind: instance method of LollipopChart
Returns: number - [transitionDuration]LollipopChart - [Acts as setter if called with parameter]
| Param | Type |
|---|---|
| [transitionDuration] | number |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent