dc

<!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 cs