dc
Version:
A multi-dimensional charting library built to work natively with crossfilter and rendered using d3.js
2,501 lines • 104 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>dc.js Getting Started and How-To Guide</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
<div id="container">
<div id="background"></div>
<ul class="sections">
<li id="section-1">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-1">¶</a>
</div>
<h1 id="dc-js-getting-started-and-how-to-guide">dc.js Getting Started and How-To Guide</h1>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-meta">'use strict'</span>;
<span class="hljs-comment">/* jshint globalstrict: true */</span>
<span class="hljs-comment">/* global dc,d3,crossfilter,colorbrewer */</span></pre></div></div>
</li>
<li id="section-2">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-2">¶</a>
</div>
<h3 id="create-chart-objects">Create Chart Objects</h3>
</div>
</li>
<li id="section-3">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-3">¶</a>
</div>
<p>Create chart objects associated with the container elements identified by the css selector.
Note: It is often a good idea to have these objects accessible at the global scope so that they can be modified or
filtered by other page controls.</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">var</span> gainOrLossChart = dc.pieChart(<span class="hljs-string">'#gain-loss-chart'</span>);
<span class="hljs-keyword">var</span> fluctuationChart = dc.barChart(<span class="hljs-string">'#fluctuation-chart'</span>);
<span class="hljs-keyword">var</span> quarterChart = dc.pieChart(<span class="hljs-string">'#quarter-chart'</span>);
<span class="hljs-keyword">var</span> dayOfWeekChart = dc.rowChart(<span class="hljs-string">'#day-of-week-chart'</span>);
<span class="hljs-keyword">var</span> moveChart = dc.lineChart(<span class="hljs-string">'#monthly-move-chart'</span>);
<span class="hljs-keyword">var</span> volumeChart = dc.barChart(<span class="hljs-string">'#monthly-volume-chart'</span>);
<span class="hljs-keyword">var</span> yearlyBubbleChart = dc.bubbleChart(<span class="hljs-string">'#yearly-bubble-chart'</span>);
<span class="hljs-keyword">var</span> nasdaqCount = dc.dataCount(<span class="hljs-string">'.dc-data-count'</span>);
<span class="hljs-keyword">var</span> nasdaqTable = dc.dataTable(<span class="hljs-string">'.dc-data-table'</span>);</pre></div></div>
</li>
<li id="section-4">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-4">¶</a>
</div>
<h3 id="anchor-div-for-charts">Anchor Div for Charts</h3>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-comment">/*
</span></pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-5">¶</a>
</div>
<p>A div anchor that can be identified by id</p>
</div>
<div class="content"><div class='highlight'><pre> <div id=<span class="hljs-string">'your-chart'</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">div</span>></span></span></pre></div></div>
</li>
<li id="section-6">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-6">¶</a>
</div>
<p>Title or anything you want to add above the chart</p>
</div>
<div class="content"><div class='highlight'><pre> <div id=<span class="hljs-string">'chart'</span>><span class="xml"><span class="hljs-tag"><<span class="hljs-name">span</span>></span>Days by Gain or Loss<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">div</span>></span></span></pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-7">¶</a>
</div>
<h5 id="-turnoncontrols-">.turnOnControls()</h5>
</div>
</li>
<li id="section-8">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-8">¶</a>
</div>
<p>If a link with css class <code>reset</code> is present then the chart
will automatically hide/show it based on whether there is a filter
set on the chart (e.g. slice selection for pie chart and brush
selection for bar chart). Enable this with <code>chart.turnOnControls(true)</code></p>
</div>
</li>
<li id="section-9">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-9">¶</a>
</div>
<p>dc.js >=2.1 uses <code>visibility: hidden</code> to hide/show controls without
disrupting the layout. To return the old <code>display: none</code> behavior,
set <code>chart.controlsUseVisibility(false)</code> and use that style instead.</p>
</div>
<div class="content"><div class='highlight'><pre> <div id='chart'>
<a class='reset'
href='javascript:myChart.filterAll();dc.redrawAll();'
style='visibility: hidden;'>reset</a>
</div></pre></div></div>
</li>
<li id="section-10">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-10">¶</a>
</div>
<p>dc.js will also automatically inject the current filter value into
any html element with its css class set to <code>filter</code></p>
</div>
<div class="content"><div class='highlight'><pre> <div id='chart'>
<span class='reset' style='visibility: hidden;'>
Current filter: <span class='filter'></span>
</span>
</div>
*/</pre></div></div>
</li>
<li id="section-11">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-11">¶</a>
</div>
<h3 id="load-your-data">Load your data</h3>
</div>
</li>
<li id="section-12">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-12">¶</a>
</div>
<p>Data can be loaded through regular means with your
favorite javascript library</p>
<pre><code class="lang-javascript">d3.csv(<span class="hljs-string">'data.csv'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">data</span>) </span>{...});
d3.json(<span class="hljs-string">'data.json'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">data</span>) </span>{...});
jQuery.getJson(<span class="hljs-string">'data.json'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">data</span>)</span>{...});
</code></pre>
</div>
<div class="content"><div class='highlight'><pre>d3.csv(<span class="hljs-string">'ndx.csv'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">data</span>) </span>{</pre></div></div>
</li>
<li id="section-13">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-13">¶</a>
</div>
<p>Since its a csv file we need to format the data a bit.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> dateFormat = d3.time.format(<span class="hljs-string">'%m/%d/%Y'</span>);
<span class="hljs-keyword">var</span> numberFormat = d3.format(<span class="hljs-string">'.2f'</span>);
data.forEach(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">d</span>) </span>{
d.dd = dateFormat.parse(d.date);
d.month = d3.time.month(d.dd); <span class="hljs-comment">// pre-calculate month for better performance</span>
d.close = +d.close; <span class="hljs-comment">// coerce to number</span>
d.open = +d.open;
});</pre></div></div>
</li>
<li id="section-14">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-14">¶</a>
</div>
<h3 id="create-crossfilter-dimensions-and-groups">Create Crossfilter Dimensions and Groups</h3>
</div>
</li>
<li id="section-15">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-15">¶</a>
</div>
<p>See the <a href="https://github.com/square/crossfilter/wiki/API-Reference">crossfilter API</a> for reference.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> ndx = crossfilter(data);
<span class="hljs-keyword">var</span> all = ndx.groupAll();</pre></div></div>
</li>
<li id="section-16">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-16">¶</a>
</div>
<p>Dimension by year</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> yearlyDimension = ndx.dimension(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">d</span>) </span>{
<span class="hljs-keyword">return</span> d3.time.year(d.dd).getFullYear();
});</pre></div></div>
</li>
<li id="section-17">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-17">¶</a>
</div>
<p>Maintain running tallies by year as filters are applied or removed</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> yearlyPerformanceGroup = yearlyDimension.group().reduce(
<span class="hljs-comment">/* callback for when data is added to the current filter results */</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">p, v</span>) </span>{
++p.count;
p.absGain += v.close - v.open;
p.fluctuation += <span class="hljs-built_in">Math</span>.abs(v.close - v.open);
p.sumIndex += (v.open + v.close) / <span class="hljs-number">2</span>;
p.avgIndex = p.sumIndex / p.count;
p.percentageGain = p.avgIndex ? (p.absGain / p.avgIndex) * <span class="hljs-number">100</span> : <span class="hljs-number">0</span>;
p.fluctuationPercentage = p.avgIndex ? (p.fluctuation / p.avgIndex) * <span class="hljs-number">100</span> : <span class="hljs-number">0</span>;
<span class="hljs-keyword">return</span> p;
},
<span class="hljs-comment">/* callback for when data is removed from the current filter results */</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">p, v</span>) </span>{
--p.count;
p.absGain -= v.close - v.open;
p.fluctuation -= <span class="hljs-built_in">Math</span>.abs(v.close - v.open);
p.sumIndex -= (v.open + v.close) / <span class="hljs-number">2</span>;
p.avgIndex = p.count ? p.sumIndex / p.count : <span class="hljs-number">0</span>;
p.percentageGain = p.avgIndex ? (p.absGain / p.avgIndex) * <span class="hljs-number">100</span> : <span class="hljs-number">0</span>;
p.fluctuationPercentage = p.avgIndex ? (p.fluctuation / p.avgIndex) * <span class="hljs-number">100</span> : <span class="hljs-number">0</span>;
<span class="hljs-keyword">return</span> p;
},
<span class="hljs-comment">/* initialize p */</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">return</span> {
<span class="hljs-attr">count</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">absGain</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">fluctuation</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">fluctuationPercentage</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">sumIndex</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">avgIndex</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">percentageGain</span>: <span class="hljs-number">0</span>
};
}
);</pre></div></div>
</li>
<li id="section-18">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-18">¶</a>
</div>
<p>Dimension by full date</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> dateDimension = ndx.dimension(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">d</span>) </span>{
<span class="hljs-keyword">return</span> d.dd;
});</pre></div></div>
</li>
<li id="section-19">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-19">¶</a>
</div>
<p>Dimension by month</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> moveMonths = ndx.dimension(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">d</span>) </span>{
<span class="hljs-keyword">return</span> d.month;
});</pre></div></div>
</li>
<li id="section-20">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-20">¶</a>
</div>
<p>Group by total movement within month</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> monthlyMoveGroup = moveMonths.group().reduceSum(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">d</span>) </span>{
<span class="hljs-keyword">return</span> <span class="hljs-built_in">Math</span>.abs(d.close - d.open);
});</pre></div></div>
</li>
<li id="section-21">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-21">¶</a>
</div>
<p>Group by total volume within move, and scale down result</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> volumeByMonthGroup = moveMonths.group().reduceSum(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">d</span>) </span>{
<span class="hljs-keyword">return</span> d.volume / <span class="hljs-number">500000</span>;
});
<span class="hljs-keyword">var</span> indexAvgByMonthGroup = moveMonths.group().reduce(
<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">p, v</span>) </span>{
++p.days;
p.total += (v.open + v.close) / <span class="hljs-number">2</span>;
p.avg = <span class="hljs-built_in">Math</span>.round(p.total / p.days);
<span class="hljs-keyword">return</span> p;
},
<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">p, v</span>) </span>{
--p.days;
p.total -= (v.open + v.close) / <span class="hljs-number">2</span>;
p.avg = p.days ? <span class="hljs-built_in">Math</span>.round(p.total / p.days) : <span class="hljs-number">0</span>;
<span class="hljs-keyword">return</span> p;
},
<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">return</span> {<span class="hljs-attr">days</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">total</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">avg</span>: <span class="hljs-number">0</span>};
}
);</pre></div></div>
</li>
<li id="section-22">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-22">¶</a>
</div>
<p>Create categorical dimension</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> gainOrLoss = ndx.dimension(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">d</span>) </span>{
<span class="hljs-keyword">return</span> d.open > d.close ? <span class="hljs-string">'Loss'</span> : <span class="hljs-string">'Gain'</span>;
});</pre></div></div>
</li>
<li id="section-23">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-23">¶</a>
</div>
<p>Produce counts records in the dimension</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> gainOrLossGroup = gainOrLoss.group();</pre></div></div>
</li>
<li id="section-24">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-24">¶</a>
</div>
<p>Determine a histogram of percent changes</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> fluctuation = ndx.dimension(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">d</span>) </span>{
<span class="hljs-keyword">return</span> <span class="hljs-built_in">Math</span>.round((d.close - d.open) / d.open * <span class="hljs-number">100</span>);
});
<span class="hljs-keyword">var</span> fluctuationGroup = fluctuation.group();</pre></div></div>
</li>
<li id="section-25">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-25">¶</a>
</div>
<p>Summarize volume by quarter</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> quarter = ndx.dimension(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">d</span>) </span>{
<span class="hljs-keyword">var</span> month = d.dd.getMonth();
<span class="hljs-keyword">if</span> (month <= <span class="hljs-number">2</span>) {
<span class="hljs-keyword">return</span> <span class="hljs-string">'Q1'</span>;
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (month > <span class="hljs-number">2</span> && month <= <span class="hljs-number">5</span>) {
<span class="hljs-keyword">return</span> <span class="hljs-string">'Q2'</span>;
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (month > <span class="hljs-number">5</span> && month <= <span class="hljs-number">8</span>) {
<span class="hljs-keyword">return</span> <span class="hljs-string">'Q3'</span>;
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">return</span> <span class="hljs-string">'Q4'</span>;
}
});
<span class="hljs-keyword">var</span> quarterGroup = quarter.group().reduceSum(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">d</span>) </span>{
<span class="hljs-keyword">return</span> d.volume;
});</pre></div></div>
</li>
<li id="section-26">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-26">¶</a>
</div>
<p>Counts per weekday</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> dayOfWeek = ndx.dimension(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">d</span>) </span>{
<span class="hljs-keyword">var</span> day = d.dd.getDay();
<span class="hljs-keyword">var</span> name = [<span class="hljs-string">'Sun'</span>, <span class="hljs-string">'Mon'</span>, <span class="hljs-string">'Tue'</span>, <span class="hljs-string">'Wed'</span>, <span class="hljs-string">'Thu'</span>, <span class="hljs-string">'Fri'</span>, <span class="hljs-string">'Sat'</span>];
<span class="hljs-keyword">return</span> day + <span class="hljs-string">'.'</span> + name[day];
});
<span class="hljs-keyword">var</span> dayOfWeekGroup = dayOfWeek.group();</pre></div></div>
</li>
<li id="section-27">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-27">¶</a>
</div>
<h3 id="define-chart-attributes">Define Chart Attributes</h3>
<p>Define chart attributes using fluent methods. See the
<a href="https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md">dc.js API Reference</a> for more information</p>
</div>
</li>
<li id="section-28">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-28">¶</a>
</div>
<h4 id="bubble-chart">Bubble Chart</h4>
</div>
</li>
<li id="section-29">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-29">¶</a>
</div>
<p>Create a bubble chart and use the given css selector as anchor. You can also specify
an optional chart group for this chart to be scoped within. When a chart belongs
to a specific group then any interaction with the chart will only trigger redraws
on charts within the same chart group.
<br>API: <a href="https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#bubble-chart">Bubble Chart</a></p>
</div>
<div class="content"><div class='highlight'><pre>
yearlyBubbleChart <span class="hljs-comment">/* dc.bubbleChart('#yearly-bubble-chart', 'chartGroup') */</span></pre></div></div>
</li>
<li id="section-30">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-30">¶</a>
</div>
<p>(<em>optional</em>) define chart width, <code>default = 200</code></p>
</div>
<div class="content"><div class='highlight'><pre> .width(<span class="hljs-number">990</span>)</pre></div></div>
</li>
<li id="section-31">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-31">¶</a>
</div>
<p>(<em>optional</em>) define chart height, <code>default = 200</code></p>
</div>
<div class="content"><div class='highlight'><pre> .height(<span class="hljs-number">250</span>)</pre></div></div>
</li>
<li id="section-32">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-32">¶</a>
</div>
<p>(<em>optional</em>) define chart transition duration, <code>default = 750</code></p>
</div>
<div class="content"><div class='highlight'><pre> .transitionDuration(<span class="hljs-number">1500</span>)
.margins({<span class="hljs-attr">top</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">right</span>: <span class="hljs-number">50</span>, <span class="hljs-attr">bottom</span>: <span class="hljs-number">30</span>, <span class="hljs-attr">left</span>: <span class="hljs-number">40</span>})
.dimension(yearlyDimension)</pre></div></div>
</li>
<li id="section-33">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-33">¶</a>
</div>
<p>The bubble chart expects the groups are reduced to multiple values which are used
to generate x, y, and radius for each key (bubble) in the group</p>
</div>
<div class="content"><div class='highlight'><pre> .group(yearlyPerformanceGroup)</pre></div></div>
</li>
<li id="section-34">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-34">¶</a>
</div>
<p>(<em>optional</em>) define color function or array for bubbles: <a href="http://colorbrewer2.org/">ColorBrewer</a></p>
</div>
<div class="content"><div class='highlight'><pre> .colors(colorbrewer.RdYlGn[<span class="hljs-number">9</span>])</pre></div></div>
</li>
<li id="section-35">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-35">¶</a>
</div>
<p>(optional) define color domain to match your data domain if you want to bind data or color</p>
</div>
<div class="content"><div class='highlight'><pre> .colorDomain([<span class="hljs-number">-500</span>, <span class="hljs-number">500</span>])</pre></div></div>
</li>
<li id="section-36">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-36">¶</a>
</div>
<h5 id="accessors">Accessors</h5>
</div>
</li>
<li id="section-37">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-37">¶</a>
</div>
<p>Accessor functions are applied to each value returned by the grouping</p>
</div>
</li>
<li id="section-38">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-38">¶</a>
</div>
<p><code>.colorAccessor</code> - the returned value will be passed to the <code>.colors()</code> scale to determine a fill color</p>
</div>
<div class="content"><div class='highlight'><pre> .colorAccessor(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">d</span>) </span>{
<span class="hljs-keyword">return</span> d.value.absGain;
})</pre></div></div>
</li>
<li id="section-39">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-39">¶</a>
</div>
<p><code>.keyAccessor</code> - the <code>X</code> value will be passed to the <code>.x()</code> scale to determine pixel location</p>
</div>
<div class="content"><div class='highlight'><pre> .keyAccessor(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">p</span>) </span>{
<span class="hljs-keyword">return</span> p.value.absGain;
})</pre></div></div>
</li>
<li id="section-40">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-40">¶</a>
</div>
<p><code>.valueAccessor</code> - the <code>Y</code> value will be passed to the <code>.y()</code> scale to determine pixel location</p>
</div>
<div class="content"><div class='highlight'><pre> .valueAccessor(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">p</span>) </span>{
<span class="hljs-keyword">return</span> p.value.percentageGain;
})</pre></div></div>
</li>
<li id="section-41">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-41">¶</a>
</div>
<p><code>.radiusValueAccessor</code> - the value will be passed to the <code>.r()</code> scale to determine radius size;
by default this maps linearly to [0,100]</p>
</div>
<div class="content"><div class='highlight'><pre> .radiusValueAccessor(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">p</span>) </span>{
<span class="hljs-keyword">return</span> p.value.fluctuationPercentage;
})
.maxBubbleRelativeSize(<span class="hljs-number">0.3</span>)
.x(d3.scale.linear().domain([<span class="hljs-number">-2500</span>, <span class="hljs-number">2500</span>]))
.y(d3.scale.linear().domain([<span class="hljs-number">-100</span>, <span class="hljs-number">100</span>]))
.r(d3.scale.linear().domain([<span class="hljs-number">0</span>, <span class="hljs-number">4000</span>]))</pre></div></div>
</li>
<li id="section-42">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-42">¶</a>
</div>
<h5 id="elastic-scaling">Elastic Scaling</h5>
</div>
</li>
<li id="section-43">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-43">¶</a>
</div>
<p><code>.elasticY</code> and <code>.elasticX</code> determine whether the chart should rescale each axis to fit the data.</p>
</div>
<div class="content"><div class='highlight'><pre> .elasticY(<span class="hljs-literal">true</span>)
.elasticX(<span class="hljs-literal">true</span>)</pre></div></div>
</li>
<li id="section-44">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-44">¶</a>
</div>
<p><code>.yAxisPadding</code> and <code>.xAxisPadding</code> add padding to data above and below their max values in the same unit
domains as the Accessors.</p>
</div>
<div class="content"><div class='highlight'><pre> .yAxisPadding(<span class="hljs-number">100</span>)
.xAxisPadding(<span class="hljs-number">500</span>)</pre></div></div>
</li>
<li id="section-45">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-45">¶</a>
</div>
<p>(<em>optional</em>) render horizontal grid lines, <code>default=false</code></p>
</div>
<div class="content"><div class='highlight'><pre> .renderHorizontalGridLines(<span class="hljs-literal">true</span>)</pre></div></div>
</li>
<li id="section-46">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-46">¶</a>
</div>
<p>(<em>optional</em>) render vertical grid lines, <code>default=false</code></p>
</div>
<div class="content"><div class='highlight'><pre> .renderVerticalGridLines(<span class="hljs-literal">true</span>)</pre></div></div>
</li>
<li id="section-47">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-47">¶</a>
</div>
<p>(<em>optional</em>) render an axis label below the x axis</p>
</div>
<div class="content"><div class='highlight'><pre> .xAxisLabel(<span class="hljs-string">'Index Gain'</span>)</pre></div></div>
</li>
<li id="section-48">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-48">¶</a>
</div>
<p>(<em>optional</em>) render a vertical axis lable left of the y axis</p>
</div>
<div class="content"><div class='highlight'><pre> .yAxisLabel(<span class="hljs-string">'Index Gain %'</span>)</pre></div></div>
</li>
<li id="section-49">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-49">¶</a>
</div>
<h5 id="labels-and-titles">Labels and Titles</h5>
</div>
</li>
<li id="section-50">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-50">¶</a>
</div>
<p>Labels are displayed on the chart for each bubble. Titles displayed on mouseover.
(<em>optional</em>) whether chart should render labels, <code>default = true</code></p>
</div>
<div class="content"><div class='highlight'><pre> .renderLabel(<span class="hljs-literal">true</span>)
.label(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">p</span>) </span>{
<span class="hljs-keyword">return</span> p.key;
})</pre></div></div>
</li>
<li id="section-51">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-51">¶</a>
</div>
<p>(<em>optional</em>) whether chart should render titles, <code>default = false</code></p>
</div>
<div class="content"><div class='highlight'><pre> .renderTitle(<span class="hljs-literal">true</span>)
.title(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">p</span>) </span>{
<span class="hljs-keyword">return</span> [
p.key,
<span class="hljs-string">'Index Gain: '</span> + numberFormat(p.value.absGain),
<span class="hljs-string">'Index Gain in Percentage: '</span> + numberFormat(p.value.percentageGain) + <span class="hljs-string">'%'</span>,
<span class="hljs-string">'Fluctuation / Index Ratio: '</span> + numberFormat(p.value.fluctuationPercentage) + <span class="hljs-string">'%'</span>
].join(<span class="hljs-string">'\n'</span>);
})</pre></div></div>
</li>
<li id="section-52">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-52">¶</a>
</div>
<h4 id="customize-axes">Customize Axes</h4>
</div>
</li>
<li id="section-53">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-53">¶</a>
</div>
<p>Set a custom tick format. Both <code>.yAxis()</code> and <code>.xAxis()</code> return an axis object,
so any additional method chaining applies to the axis, not the chart.</p>
</div>
<div class="content"><div class='highlight'><pre> .yAxis().tickFormat(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">v</span>) </span>{
<span class="hljs-keyword">return</span> v + <span class="hljs-string">'%'</span>;
});</pre></div></div>
</li>
<li id="section-54">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-54">¶</a>
</div>
<h4 id="pie-donut-charts">Pie/Donut Charts</h4>
</div>
</li>
<li id="section-55">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-55">¶</a>
</div>
<p>Create a pie chart and use the given css selector as anchor. You can also specify
an optional chart group for this chart to be scoped within. When a chart belongs
to a specific group then any interaction with such chart will only trigger redraw
on other charts within the same chart group.
<br>API: <a href="https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#pie-chart">Pie Chart</a></p>
</div>
<div class="content"><div class='highlight'><pre>
gainOrLossChart <span class="hljs-comment">/* dc.pieChart('#gain-loss-chart', 'chartGroup') */</span></pre></div></div>
</li>
<li id="section-56">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-56">¶</a>
</div>
<p>(<em>optional</em>) define chart width, <code>default = 200</code></p>
</div>
<div class="content"><div class='highlight'><pre> .width(<span class="hljs-number">180</span>)</pre></div></div>
</li>
<li id="section-57">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-57">¶</a>
</div>
<p>(optional) define chart height, <code>default = 200</code></p>
</div>
<div class="content"><div class='highlight'><pre> .height(<span class="hljs-number">180</span>)</pre></div></div>
</li>
<li id="section-58">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-58">¶</a>
</div>
<p>Define pie radius</p>
</div>
<div class="content"><div class='highlight'><pre> .radius(<span class="hljs-number">80</span>)</pre></div></div>
</li>
<li id="section-59">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-59">¶</a>
</div>
<p>Set dimension</p>
</div>
<div class="content"><div class='highlight'><pre> .dimension(gainOrLoss)</pre></div></div>
</li>
<li id="section-60">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-60">¶</a>
</div>
<p>Set group</p>
</div>
<div class="content"><div class='highlight'><pre> .group(gainOrLossGroup)</pre></div></div>
</li>
<li id="section-61">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-61">¶</a>
</div>
<p>(<em>optional</em>) by default pie chart will use <code>group.key</code> as its label but you can overwrite it with a closure.</p>
</div>
<div class="content"><div class='highlight'><pre> .label(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">d</span>) </span>{
<span class="hljs-keyword">if</span> (gainOrLossChart.hasFilter() && !gainOrLossChart.hasFilter(d.key)) {
<span class="hljs-keyword">return</span> d.key + <span class="hljs-string">'(0%)'</span>;
}
<span class="hljs-keyword">var</span> label = d.key;
<span class="hljs-keyword">if</span> (all.value()) {
label += <span class="hljs-string">'('</span> + <span class="hljs-built_in">Math</span>.floor(d.value / all.value() * <span class="hljs-number">100</span>) + <span class="hljs-string">'%)'</span>;
}
<span class="hljs-keyword">return</span> label;
})
<span class="hljs-comment">/*
</span></pre></div></div>
</li>
<li id="section-62">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-62">¶</a>
</div>
<p>(<em>optional</em>) whether chart should render labels, <code>default = true</code></p>
</div>
<div class="content"><div class='highlight'><pre> .renderLabel(<span class="hljs-literal">true</span>)</pre></div></div>
</li>
<li id="section-63">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-63">¶</a>
</div>
<p>(<em>optional</em>) if inner radius is used then a donut chart will be generated instead of pie chart</p>
</div>
<div class="content"><div class='highlight'><pre> .innerRadius(<span class="hljs-number">40</span>)</pre></div></div>
</li>
<li id="section-64">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-64">¶</a>
</div>
<p>(<em>optional</em>) define chart transition duration, <code>default = 350</code></p>
</div>
<div class="content"><div class='highlight'><pre> .transitionDuration(<span class="hljs-number">500</span>)</pre></div></div>
</li>
<li id="section-65">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-65">¶</a>
</div>
<p>(<em>optional</em>) define color array for slices</p>
</div>
<div class="content"><div class='highlight'><pre> .colors([<span class="hljs-string">'#3182bd'</span>, <span class="hljs-string">'#6baed6'</span>, <span class="hljs-string">'#9ecae1'</span>, <span class="hljs-string">'#c6dbef'</span>, <span class="hljs-string">'#dadaeb'</span>])</pre></div></div>
</li>
<li id="section-66">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-66">¶</a>
</div>
<p>(<em>optional</em>) define color domain to match your data domain if you want to bind data or color</p>
</div>
<div class="content"><div class='highlight'><pre> .colorDomain([<span class="hljs-number">-1750</span>, <span class="hljs-number">1644</span>])</pre></div></div>
</li>
<li id="section-67">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-67">¶</a>
</div>
<p>(<em>optional</em>) define color value accessor</p>
</div>
<div class="content"><div class='highlight'><pre> .colorAccessor(function(d, i){return d.value;})
*/;
quarterChart /* dc.pieChart('#quarter-chart', 'chartGroup') */
.width(180)
.height(180)
.radius(80)
.innerRadius(30)
.dimension(quarter)
.group(quarterGroup);</pre></div></div>
</li>
<li id="section-68">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-68">¶</a>
</div>
<h4 id="row-chart">Row Chart</h4>
</div>
</li>
<li id="section-69">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-69">¶</a>
</div>
<p>Create a row chart and use the given css selector as anchor. You can also specify
an optional chart group for this chart to be scoped within. When a chart belongs
to a specific group then any interaction with such chart will only trigger redraw
on other charts within the same chart group.
<br>API: <a href="https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#row-chart">Row Chart</a></p>
</div>
<div class="content"><div class='highlight'><pre> dayOfWeekChart <span class="hljs-comment">/* dc.rowChart('#day-of-week-chart', 'chartGroup') */</span>
.width(<span class="hljs-number">180</span>)
.height(<span class="hljs-number">180</span>)
.margins({<span class="hljs-attr">top</span>: <span class="hljs-number">20</span>, <span class="hljs-attr">left</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">right</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">bottom</span>: <span class="hljs-number">20</span>})
.group(dayOfWeekGroup)
.dimension(dayOfWeek)</pre></div></div>
</li>
<li id="section-70">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-70">¶</a>
</div>
<p>Assign colors to each value in the x scale domain</p>
</div>
<div class="content"><div class='highlight'><pre> .ordinalColors([<span class="hljs-string">'#3182bd'</span>, <span class="hljs-string">'#6baed6'</span>, <span class="hljs-string">'#9ecae1'</span>, <span class="hljs-string">'#c6dbef'</span>, <span class="hljs-string">'#dadaeb'</span>])
.label(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">d</span>) </span>{
<span class="hljs-keyword">return</span> d.key.split(<span class="hljs-string">'.'</span>)[<span class="hljs-number">1</span>];
})</pre></div></div>
</li>
<li id="section-71">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-71">¶</a>
</div>
<p>Title sets the row text</p>
</div>
<div class="content"><div class='highlight'><pre> .title(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">d</span>) </span>{
<span class="hljs-keyword">return</span> d.value;
})
.elasticX(<span class="hljs-literal">true</span>)
.xAxis().ticks(<span class="hljs-number">4</span>);</pre></div></div>
</li>
<li id="section-72">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-72">¶</a>
</div>
<h4 id="bar-chart">Bar Chart</h4>
</div>
</li>
<li id="section-73">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-73">¶</a>
</div>
<p>Create a bar chart and use the given css selector as anchor. You can also specify
an optional chart group for this chart to be scoped within. When a chart belongs
to a specific group then any interaction with such chart will only trigger redraw
on other charts within the same chart group.
<br>API: <a href="https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#bar-chart">Bar Chart</a></p>
</div>
<div class="content"><div class='highlight'><pre> fluctuationChart <span class="hljs-comment">/* dc.barChart('#volume-month-chart', 'chartGroup') */</span>
.width(<span class="hljs-number">420</span>)
.height(<span class="hljs-number">180</span>)
.margins({<span class="hljs-attr">top</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">right</span>: <span class="hljs-number">50</span>, <span class="hljs-attr">bottom</span>: <span class="hljs-number">30</span>, <span class="hljs-attr">left</span>: <span class="hljs-number">40</span>})
.dimension(fluctuation)
.group(fluctuationGroup)
.elasticY(<span class="hljs-literal">true</span>)</pre></div></div>
</li>
<li id="section-74">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-74">¶</a>
</div>
<p>(<em>optional</em>) whether bar should be center to its x value. Not needed for ordinal chart, <code>default=false</code></p>
</div>
<div class="content"><div class='highlight'><pre> .centerBar(<span class="hljs-literal">true</span>)</pre></div></div>
</li>
<li id="section-75">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-75">¶</a>
</div>
<p>(<em>optional</em>) set gap between bars manually in px, <code>default=2</code></p>
</div>
<div class="content"><div class='highlight'><pre> .gap(<span class="hljs-number">1</span>)</pre></div></div>
</li>
<li id="section-76">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-76">¶</a>
</div>
<p>(<em>optional</em>) set filter brush rounding</p>
</div>
<div class="content"><div class='highlight'><pre> .round(dc.round.floor)
.alwaysUseRounding(<span class="hljs-literal">true</span>)
.x(d3.scale.linear().domain([<span class="hljs-number">-25</span>, <span class="hljs-number">25</span>]))
.renderHorizontalGridLines(<span class="hljs-literal">true</span>)</pre></div></div>
</li>
<li id="section-77">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-77">¶</a>
</div>
<p>Customize the filter displayed in the control span</p>
</div>
<div class="content"><div class='highlight'><pre> .filterPrinter(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">filters</span>) </span>{
<span class="hljs-keyword">var</span> filter = filters[<span class="hljs-number">0</span>], s = <span class="hljs-string">''</span>;
s += numberFormat(filter[<span class="hljs-number">0</span>]) + <span class="hljs-string">'% -> '</span> + numberFormat(filter[<span class="hljs-number">1</span>]) + <span class="hljs-string">'%'</span>;
<span class="hljs-keyword">return</span> s;
});</pre></div></div>
</li>
<li id="section-78">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-78">¶</a>
</div>
<p>Customize axes</p>
</div>
<div class="content"><div class='highlight'><pre> fluctuationChart.xAxis().tickFormat(
<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">v</span>) </span>{ <span class="hljs-keyword">return</span> v + <span class="hljs-string">'%'</span>; });
fluctuationChart.yAxis().ticks(<span class="hljs-number">5</span>);</pre></div></div>
</li>
<li id="section-79">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-79">¶</a>
</div>
<h4 id="stacked-area-chart">Stacked Area Chart</h4>
</div>
</li>
<li id="section-80">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-80">¶</a>
</div>
<p>Specify an area chart by using a line chart with <code>.renderArea(true)</code>.
<br>API: <a href="https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#stack-mixin">Stack Mixin</a>,
<a href="https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#line-chart">Line Chart</a></p>
</div>
<div class="content"><div class='highlight'><pre> moveChart <span class="hljs-comment">/* dc.lineChart('#monthly-move-chart', 'chartGroup') */</span>
.renderArea(<span class="hljs-literal">true</span>)
.width(<span class="hljs-number">990</span>)
.height(<span class="hljs-number">200</span>)
.transitionDuration(<span class="hljs-number">1000</span>)
.margins({<span class="hljs-attr">top</span>: <span class="hljs-number">30</span>, <span class="hljs-attr">right</span>: <span class="hljs-number">50</span>, <span class="hljs-attr">bottom</span>: <span class="hljs-number">25</span>, <span class="hljs-attr">left</span>: <span class="hljs-number">40</span>})
.dimension(moveMonths)
.mouseZoomable(<span class="hljs-literal">true</span>)</pre></div></div>
</li>
<li id="section-81">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-81">¶</a>
</div>
<p>Specify a “range chart” to link its brush extent with the zoom of the current “focus chart”.</p>
</div>
<div class="content"><div class='highlight'><pre> .rangeChart(volumeChart)
.x(d3.time.scale().domain([<span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(<span class="hljs-number">1985</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>), <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(<span class="hljs-number">2012</span>, <span class="hljs-number">11</span>, <span class="hljs-number">31</span>)]))
.round(d3.time.month.round)
.xUnits(d3.time.months)
.elasticY(<span class="hljs-literal">true</span>)
.renderHorizontalGridLines(<span class="hljs-literal">true</span>)</pre></div></div>
</li>
<li id="section-82">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-82">¶</a>
</div>
<h5 id="legend">Legend</h5>
</div>
</li>
<li id="section-83">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-83">¶</a>
</div>
<p>Position the legend relative to the chart origin and specify items’ height and separation.</p>
</div>
<div class="content"><div class='highlight'><pre> .legend(dc.legend().x(<span class="hljs-number">800</span>).y(<span class="hljs-number">10</span>).itemHeight(<span class="hljs-number">13</span>).gap(<span class="hljs-number">5</span>))
.brushOn(<span class="hljs-literal">false</span>)</pre></div></div>
</li>
<li id="section-84">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-84">¶</a>
</div>
<p>Add the base layer of the stack with group. The second parameter specifies a series name for use in the
legend.
The <code>.valueAccessor</code> will be used for the base layer</p>
</div>
<div class="content"><div class='highlight'><pre> .group(indexAvgByMonthGroup, <span class="hljs-string">'Monthly Index Average'</span>)
.valueAccessor(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">d</span>) </span>{
<span class="hljs-keyword">return</span> d.value.avg;
})</pre></div></div>
</li>
<li id="section-85">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-85">¶</a>
</div>
<p>Stack additional layers with <code>.stack</code>. The first paramenter is a new group.
The second parameter is the series name. The third is a value accessor.</p>
</div>
<div class="content"><div class='highlight'><pre> .stack(monthlyMoveGroup, <span class="hljs-string">'Monthly Index Move'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">d</span>) </span>{
<span class="hljs-keyword">return</span> d.value;
})</pre></div></div>
</li>
<li id="section-86">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-86">¶</a>
</div>
<p>Title can be called by any stack layer.</p>
</div>
<div class="content"><div class='highlight'><pre> .title(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">d</span>) </span>{
<span class="hljs-keyword">var</span> value = d.value.avg ? d.value.avg : d.value;
<span class="hljs-keyword">if</span> (<span class="hljs-built_in">isNaN</span>(value)) {
value = <span class="hljs-number">0</span>;
}
<span class="hljs-keyword">return</span> dateFormat(d.key) + <span class="hljs-string">'\n'</span> + numberFormat(value);
});</pre></div></div>
</li>
<li id="section-87">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-87">¶</a>
</div>
<h4 id="range-chart">Range Chart</h4>
</div>
</li>
<li id="section-88">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-88">¶</a>
</div>
<p>Since this bar chart is specified as “range chart” for the area chart, its brush extent
will always match the zoom of the area chart.</p>
</div>
<div class="content"><div class='highlight'><pre> volumeChart.width(<span class="hljs-number">990</span>) <span class="hljs-comment">/* dc.barChart('#monthly-volume-chart', 'chartGroup'); */</span>
.height(<span class="hljs-number">40</span>)
.margins({<span class="hljs-attr">top</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">right</span>: <span class="hljs-number">50</span>, <span class="hljs-attr">bottom</span>: <span class="hljs-number">20</span>, <span class="hljs-attr">left</span>: <span class="hljs-number">40</span>})
.dimension(moveMonths)
.group(volumeByMonthGroup)
.centerBar(<span class="hljs-literal">true</span>)
.gap(<span class="hljs-number">1</span>)
.x(d3.time.scale().domain([<span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(<span class="hljs-number">1985</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>), <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(<span class="hljs-number">2012</span>, <span class="hljs-number">11</span>, <span class="hljs-number">31</span>)]))
.round(d3.time.month.round)
.alwaysUseRounding(<span class="hljs-literal">true</span>)
.xUnits(d3.time.months);</pre></div></div>
</li>
<li id="section-89">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-89">¶</a>
</div>
<h4 id="data-count">Data Count</h4>
</div>
</li>
<li id="section-90">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-90">¶</a>
</div>
<p>Create a data count widget and use the given css selector as anchor. You can also specify
an optional chart group for this chart to be scoped within. When a chart belongs
to a specific group then any interaction with such chart will only trigger redraw
on other charts within the same chart group.
<br>API: <a href="https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#data-count-widget">Data Count Widget</a></p>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'dc-data-count'</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'filter-count'</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span>
selected out of <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'total-count'</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span> records.
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</code></pre>
</div>
<div class="content"><div class='highlight'><pre>
nasdaqCount <span class="hljs-comment">/* dc.dataCount('.dc-data-count', 'chartGroup'); */</span>
.dimension(ndx)
.group(all)</pre></div></div>
</li>
<li id="section-91">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-91">¶</a>
</div>
<p>(<em>optional</em>) <code>.html</code> sets different html when some records or all records are selected.
<code>.html</code> replaces everything in the anchor with the html given using the following function.
<code>%filter-count</code> and <code>%total-count</code> are replaced with the values obtained.</p>
</div>
<div class="content"><div class='highlight'><pre> .html({
<span class="hljs-attr">some</span>: <span class="hljs-string">'<strong>%filter-count</strong> selected out of <strong>%total-count</strong> records'</span> +
<span class="hljs-string">' | <a href=\'javascript:dc.filterAll(); dc.renderAll();\'>Reset All</a>'</span>,
<span class="hljs-attr">all</span>: <span class="hljs-string">'All records selected. Please click on the graph to apply filters.'</span>
});</pre></div></div>
</li>
<li id="section-92">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-92">¶</a>
</div>
<h4 id="data-table">Data Table</h4>
</div>
</li>
<li id="section-93">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-93">¶</a>
</div>
<p>Create a data table widget and use the given css selector as anchor. You can also specify
an optional chart group for this chart to be scoped within. When a chart belongs
to a specific group then any interaction with such chart will only trigger redraw
on other charts within the same chart group.
<br>API: <a href="https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#data-table-widget">Data Table Widget</a></p>
<p>You can statically define the headers like in</p>
<pre><code class="lang-html"> <span class="hljs-comment"><!-- anchor div for data table --></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">'data-table'</span>></span>
<span class="hljs-comment"><!-- create a custom header --></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'header'</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span>></span>Date<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span>></span>Open<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span>></span>Close<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span>></span>Change<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span>></span>Volume<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-comment"><!-- data rows will filled in here --></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</code></pre>
<p>or do it programmatically using <code>.columns()</code>.</p>
</div>
<div class="content"><div class='highlight'><pre>
nasdaqTable <span class="hljs-comment">/* dc.dataTable('.dc-data-table', 'chartGroup') */</span>
.dimension(dateDimension)</pre></div></div>
</li>
<li id="section-94">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-94">¶</a>
</div>
<p>Data table does not use crossfilter group but rather a closure
as a grouping function</p>
</div>
<div class="content"><div class='highlight'><pre> .group(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">d</span>) </span>{
<span class="hljs-keyword">var</span> format = d3.format(<span class="hljs-string">'02d'</span>);
<span class="hljs-keyword">return</span> d.dd.getFullYear() + <span class="hljs-string">'/'</span> + format((d.dd.getMonth() + <span class="hljs-number">1</span>));
})</pre></div></div>
</li>
<li id="section-95">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-95">¶</a>
</div>
<p>(<em>optional</em>) max number of records to be shown, <code>default = 25</code></p>
</div>
<div class="content"><div class='highlight'><pre> .size(<span class="hljs-number">10</span>)</pre></div></div>
</li>
<li id="section-96">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-96">¶</a>
</div>
<p>There are several ways to specify the columns; see the data-table documentation.
This code demonstrates generating the column header automatically based on the columns.</p>
</div>
<div class="content"><div class='highlight'><pre> .columns([</pre></div></div>
</li>
<li id="section-97">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-97">¶</a>
</div>
<p>Use the <code>d.date</code> field; capitalized automatically</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-string">'date'</span>,</pre></div></div>
</li>
<li id="section-98">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-98">¶</a>
</div>
<p>Use <code>d.open</code>, <code>d.close</code></p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-string">'open'</span>,
<span class="hljs-string">'close'</span>,
{</pre></div></div>
</li>
<li id="section-99">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-99">¶</a>
</div>
<p>Specify a custom format for column ‘Change’ by using a label with a function.</p>
</div>
<div class="content"><div class='highlight'><pre> label: <span class="hljs-string">'Change'</span>,
<span class="hljs-attr">format</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">d</span>) </span>{
<span class="hljs-keyword">return</span> numberFormat(d.close - d.open);
}
},</pre></div></div>
</li>
<li id="section-100">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-100">¶</a>
</div>
<p>Use <code>d.volume</code></p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-string">'volume'</span>
])</pre></div></div>
</li>
<li id="section-101">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-101">¶</a>
</div>
<p>(<em>optional</em>) sort using the given field, <code>default = function(d){return d;}</code></p>
</div>
<div class="content"><div class='highlight'><pre> .sortBy(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">d</span>) </span>{
<span class="hljs-keyword">return</span> d.dd;
})</pre></div></div>
</li>
<li id="section-102">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-102">¶</a>
</div>
<p>(<em>optional</em>) sort order, <code>default = d3.ascending</code></p>
</div>
<div class="content"><div class='highlight'><pre> .order(d3.ascending)</pre></div></div>
</li>
<li id="section-103">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-103">¶</a>
</div>
<p>(<em>optional</em>) custom renderlet to post-process chart using <a href="http://d3js.org">D3</a></p>
</div>
<div class="content"><div class='highlight'><pre> .on(<span class="hljs-string">'renderlet'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">table</span>) </span>{
table.selectAll(<span class="hljs-string">'.dc-table-group'</span>).classed(<span class="hljs-string">'info'</span>, <span class="hljs-literal">true</span>);
});
<span class="hljs-comment">/*
</span></pre></div></div>
</li>
<li id="section-104">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-104">¶</a>
</div>
<h4 id="geo-choropleth-chart">Geo Choropleth Chart</h4>
</div>
</li>
<li id="section-105">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-105">¶</a>
</div>
<p>Create a choropleth chart and use the given css selector as anchor. You can also specify
an optional chart group for this chart to be scoped within. When a chart belongs
to a specific group then any interaction with such chart will only trigger redraw
on other charts within the same chart group.
<br>API: <a href="https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#geo-choropleth-chart">Geo Chroropleth Chart</a></p>
</div>
<div class="content"><div class='highlight'><pre> dc.geoChoroplethChart(<span class="hljs-string">'#us-chart'</span>)</pre></div></div>
</li>
<li id="section-106">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-106">¶</a>
</div>
<p>(<em>optional</em>) define chart width, default 200</p>
</div>
<div class="content"><div class='highlight'><pre> .width(<span class="hljs-number">990</span>)</pre></div></div>
</li>
<li id="section-107">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-107">¶</a>
</div>
<p>(optional) define chart height, default 200</p>
</div>
<div class="content"><div class='highlight'><pre> .height(<span class="hljs-number">500</span>)</pre></div></div>
</li>
<li id="section-108">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-108">¶</a>
</div>
<p>(optional) define chart transition duration, default 1000</p>
</div>
<div class="content"><div class='highlight'><pre> .transitionDuration(<span class="hljs-number">1000</span>)</pre></div></div>
</li>
<li id="section-109">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-109">¶</a>
</div>
<p>set crossfilter dimension, dimension key should match the name retrieved in geojson layer</p>
</div>
<div class="content"><div class='highlight'><pre> .dimension(states)</pre></div></div>
</li>
<li id="section-110">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-110">¶</a>
</div>
<p>set crossfilter group</p>
</div>
<div class="content"><div class='highlight'><pre> .group(stateRaisedSum)</pre></div></div>
</li>
<li id="section-111">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-111">¶</a>
</div>
<p>(<em>optional</em>) define color function or array for bubbles</p>
</div>
<div class="content"><div class='highlight'><pre> .colors([<span class="hljs-string">'#ccc'</span>, <span class="hljs-string">'#E2F2FF'</span>,<span class="hljs-string">'#C4E4FF'</span>,<span class="hljs-string">'#9ED2FF'</span>,<span class="hljs-string">'#81C5FF'</span>,<span class="hljs-string">'#6BBAFF'</span>,<span class="hljs-string">'#51AEFF'</span>,<span class="hljs-string">'#36A2FF'</span>,<span class="hljs-string">'#1E96FF'</span>,<span class="hljs-string">'#0089FF'</span>,
<span class="hljs-string">'#0061B5'</span>])</pre></div></div>
</li>
<li id="section-112">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-112">¶</a>
</div>
<p>(<em>optional</em>) define color domain to match your data domain if you want to bind data or color</p>
</div>
<div class="content"><div class='highlight'><pre> .colorDomain([<span class="hljs-number">-5</span>, <span class="hljs-number">200</span>])</pre></div></div>
</li>
<li id="section-113">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-113">¶</a>
</div>
<p>(<em>optional</em>) define color value accessor</p>
</div>
<div class="content"><div class='highlight'><pre> .colorAccessor(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">d, i</span>)</span>{<span class="hljs-keyword">return</span> d.value;})</pre></div></div>
</li>
<li id="section-114">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-114">¶</a>
</div>
<p>Project the given geojson. You can call this function multiple times with different geojson feed to generate
multiple layers of geo paths.</p>
<ul>
<li>1st param - geojson data</li>
<li>2nd param - name of the layer which will be used to generate css class</li>
<li>3rd param - (<em>optional</em>) a function used to generate key for geo path, it should match the dimension key
in order for the coloring to work properly</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> .overlayGeoJson(statesJson.features, <span class="hljs-string">'state'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">d</span>) </span>{
<span class="hljs-keyword">return</span> d.properties.name;
})</pre></div></div>
</li>
<li id="section-115">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-115">¶</a>
</div>
<p>(<em>optional</em>) closure to generate title for path, <code>default = d.key + ': ' + d.value</code></p>
</div>
<div class="content"><div class='highlight'><pre> .title(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">d</span>) </span>{
<span class="hljs-keyword">return</span> <span class="hljs-string">'State: '</span> + d.key + <span class="hljs-string">'\nTotal Amount Raised: '</span> + numberFormat(d.value ? d.value : <span class="hljs-number">0</span>) + <span class="hljs-string">'M'</span>;
});</pre></div></div>
</li>
<li id="section-116">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-116">¶</a>
</div>
<h4 id="bubble-overlay-chart">Bubble Overlay Chart</h4>
</div>
</li>
<li id="section-117">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-117">¶</a>
</div>
<p>Create a overlay bubble chart and use the given css selector as anchor. You can also specify
an optional chart group for this chart to be scoped within. When a chart belongs
to a specific group then any interaction with the chart will only trigger redraw
on charts within the same chart group.
<br>API: <a href="https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#bubble-overlay-chart">Bubble Overlay Chart</a></p>
</div>
<div class="content"><div class='highlight'><pre> dc.bubbleOverlay(<span class="hljs-string">'#bubble-overlay'</span>, <span class="hljs-string">'chartGroup'</span>)</pre></div></div>
</li>
<li id="section-118">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-118">¶</a>
</div>
<p>The bubble overlay chart does not generate its own svg element but rather reuses an existing
svg to generate its overlay layer</p>
</div>
<div class="content"><div class='highlight'><pre> .svg(d3.select(<span class="hljs-string">'#bubble-overlay svg'</span>))</pre></div></div>
</li>
<li id="section-119">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-119">¶</a>
</div>
<p>(<em>optional</em>) define chart width, <code>default = 200</code></p>
</div>
<div class="content"><div class='highlight'><pre> .width(<span class="hljs-number">990</span>)</pre></div></div>
</li>
<li id="section-120">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-120">¶</a>
</div>
<p>(<em>optional</em>) define chart height, <code>default = 200</code></p>
</div>
<div class="content"><div class='highlight'><pre> .height(<span class="hljs-number">500</span>)</pre></div></div>
</li>
<li id="section-121">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-121">¶</a>
</div>
<p>(<em>optional</em>) define chart transition duration, <code>default = 1000</code></p>
</div>
<div class="content"><div class='highlight'><pre> .transitionDuration(<span class="hljs-number">1000</span>)</pre></div></div>
</li>
<li id="section-122">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-122">¶</a>
</div>
<p>Set crossfilter dimension, dimension key should match the name retrieved in geo json layer</p>
</div>
<div class="content"><div class='highlight'><pre> .dimension(states)</pre></div></div>
</li>
<li id="section-123">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-123">¶</a>
</div>
<p>Set crossfilter group</p>
</div>
<div class="content"><div class='highlight'><pre> .group(stateRaisedSum)</pre></div></div>
</li>
<li id="section-124">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-124">¶</a>
</div>
<p>Closure used to retrieve x value from multi-value group</p>
</div>
<div class="content"><div class='highlight'><pre> .keyAccessor(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">p</span>) </span>{<span class="hljs-keyword">return</span> p.value.absGain;})</pre></div></div>
</li>
<li id="section-125">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-125">¶</a>
</div>
<p>Closure used to retrieve y value from multi-value group</p>
</div>
<div class="content"><div class='highlight'><pre> .valueAccessor(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">p</span>) </span>{<span class="hljs-keyword">return</span> p.value.percentageGain;})</pre></div></div>
</li>
<li id="section-126">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-126">¶</a>
</div>
<p>(<em>optional</em>) define color function or array for bubbles</p>
</div>
<div class="content"><div class='highlight'><pre> .colors([<span class="hljs-string">'#ccc'</span>, <span class="hljs-string">'#E2F2FF'</span>,<span class="hljs-string">'#C4E4FF'</span>,<span class="hljs-string">'#9ED2FF'</span>,<span class="hljs-string">'#81C5FF'</span>,<span class="hljs-string">'#6BBAFF'</span>,<span class="hljs-string">'#51AEFF'</span>,<span class="hljs-string">'#36A2FF'</span>,<span class="hljs-string">'#1E96FF'</span>,<span class="hljs-string">'#0089FF'</span>,
<span class="hljs-string">'#0061B5'</span>])</pre></div></div>
</li>
<li id="section-127">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-127">¶</a>
</div>
<p>(<em>optional</em>) define color domain to match your data domain if you want to bind data or color</p>
</div>
<div class="content"><div class='highlight'><pre> .colorDomain([<span class="hljs-number">-5</span>, <span class="hljs-number">200</span>])</pre></div></div>
</li>
<li id="section-128">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-128">¶</a>
</div>
<p>(<em>optional</em>) define color value accessor</p>
</div>
<div class="content"><div class='highlight'><pre> .colorAccessor(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">d, i</span>)</span>{<span class="hljs-keyword">return</span> d.value;})</pre></div></div>
</li>
<li id="section-129">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-129">¶</a>
</div>
<p>Closure used to retrieve radius value from multi-value group</p>
</div>
<div class="content"><div class='highlight'><pre> .radiusValueAccessor(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">p</span>) </span>{<span class="hljs-keyword">return</span> p.value.fluctuationPercentage;})</pre></div></div>
</li>
<li id="section-130">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-130">¶</a>
</div>
<p>set radius scale</p>
</div>
<div class="content"><div class='highlight'><pre> .r(d3.scale.linear().domain([<span class="hljs-number">0</span>, <span class="hljs-number">3</span>]))</pre></div></div>
</li>
<li id="section-131">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-131">¶</a>
</div>
<p>(<em>optional</em>) whether chart should render labels, <code>default = true</code></p>
</div>
<div class="content"><div class='highlight'><pre> .renderLabel(<span class="hljs-literal">true</span>)</pre></div></div>
</li>
<li id="section-132">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-132">¶</a>
</div>
<p>(<em>optional</em>) closure to generate label per bubble, <code>default = group.key</code></p>
</div>
<div class="content"><div class='highlight'><pre> .label(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">p</span>) </span>{<span class="hljs-keyword">return</span> p.key.getFullYear();})</pre></div></div>
</li>
<li id="section-133">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-133">¶</a>
</div>
<p>(<em>optional</em>) whether chart should render titles, <code>default = false</code></p>
</div>
<div class="content"><div class='highlight'><pre> .renderTitle(<span class="hljs-literal">true</span>)</pre></div></div>
</li>
<li id="section-134">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-134">¶</a>
</div>
<p>(<em>optional</em>) closure to generate title per bubble, <code>default = d.key + ': ' + d.value</code></p>
</div>
<div class="content"><div class='highlight'><pre> .title(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">d</span>) </span>{
<span class="hljs-keyword">return</span> <span class="hljs-string">'Title: '</span> + d.key;
})</pre></div></div>
</li>
<li id="section-135">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-135">¶</a>
</div>
<p>add data point to its layer dimension key that matches point name: it will be used to
generate a bubble. Multiple data points can be added to the bubble overlay to generate
multiple bubbles.</p>
</div>
<div class="content"><div class='highlight'><pre> .point(<span class="hljs-string">'California'</span>, <span class="hljs-number">100</span>, <span class="hljs-number">120</span>)
.point(<span class="hljs-string">'Colorado'</span>, <span class="hljs-number">300</span>, <span class="hljs-number">120</span>)</pre></div></div>
</li>
<li id="section-136">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-136">¶</a>
</div>
<p>(<em>optional</em>) setting debug flag to true will generate a transparent layer on top of
bubble overlay which can be used to obtain relative <code>x</code>,<code>y</code> coordinate for specific
data point, <code>default = false</code></p>
</div>
<div class="content"><div class='highlight'><pre> .debug(true);
*/</pre></div></div>
</li>
<li id="section-137">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-137">¶</a>
</div>
<h4 id="rendering">Rendering</h4>
</div>
</li>
<li id="section-138">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-138">¶</a>
</div>
<p>simply call <code>.renderAll()</code> to render all charts on the page</p>
</div>
<div class="content"><div class='highlight'><pre> dc.renderAll();
<span class="hljs-comment">/*
</span></pre></div></div>
</li>
<li id="section-139">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-139">¶</a>
</div>
<p>Or you can render charts belonging to a specific chart group</p>
</div>
<div class="content"><div class='highlight'><pre> dc.renderAll(<span class="hljs-string">'group'</span>);</pre></div></div>
</li>
<li id="section-140">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-140">¶</a>
</div>
<p>Once rendered you can call <code>.redrawAll()</code> to update charts incrementally when the data
changes, without re-rendering everything</p>
</div>
<div class="content"><div class='highlight'><pre> dc.redrawAll();</pre></div></div>
</li>
<li id="section-141">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-141">¶</a>
</div>
<p>Or you can choose to redraw only those charts associated with a specific chart group</p>
</div>
<div class="content"><div class='highlight'><pre> dc.redrawAll('group');
*/
});</pre></div></div>
</li>
<li id="section-142">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-142">¶</a>
</div>
<h4 id="versions">Versions</h4>
</div>
</li>
<li id="section-143">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-143">¶</a>
</div>
<p>Determine the current version of dc with <code>dc.version</code></p>
</div>
<div class="content"><div class='highlight'><pre>d3.selectAll(<span class="hljs-string">'#version'</span>).text(dc.version);</pre></div></div>
</li>
<li id="section-144">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-144">¶</a>
</div>
<p>Determine latest stable version in the repo via Github API</p>
</div>
<div class="content"><div class='highlight'><pre>d3.json(<span class="hljs-string">'https://api.github.com/repos/dc-js/dc.js/releases/latest'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">error, latestRelease</span>) </span>{
<span class="hljs-comment">/*jshint camelcase: false */</span>
<span class="hljs-comment">/* jscs:disable */</span>
d3.selectAll(<span class="hljs-string">'#latest'</span>).text(latestRelease.tag_name);
});</pre></div></div>
</li>
</ul>
</div>
</body>
</html>