dc/welcome.md

A multi-dimensional charting library built to work natively with crossfilter and rendered using d3.js

# dc.js

Welcome to the dc.js documentation.

The entire library is scoped under {@link dc the dc namespace}. Its child namespaces contain utilities.

A class diagram is shown below - mixins are blue and chart classes are green. (Relations between mixins are somewhat subjective.)


<!-- Title: dcHierarchy Pages: 1 -->
<svg width="574pt" height="691pt"
 viewBox="0.00 0.00 574.27 691.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 687)">
<title>dcHierarchy</title>
<polygon fill="white" stroke="none" points="-4,4 -4,-687 570.272,-687 570.272,4 -4,4"/>
<!-- baseMixin -->
<g id="node1" class="node"><title>baseMixin</title>
<g id="a_node1"><a xlink:href="dc.baseMixin.html" xlink:title="baseMixin">
<ellipse fill="lightblue" stroke="black" cx="30.6108" cy="-288" rx="30.7221" ry="18"/>
<text text-anchor="middle" x="30.6108" y="-285" font-family="sans-serif" font-size="10.00">baseMixin</text>
</a>
</g>
</g>
<!-- colorMixin -->
<g id="node2" class="node"><title>colorMixin</title>
<g id="a_node2"><a xlink:href="dc.colorMixin.html" xlink:title="colorMixin">
<ellipse fill="lightblue" stroke="black" cx="141.945" cy="-450" rx="30.7108" ry="18"/>
<text text-anchor="middle" x="141.945" y="-447" font-family="sans-serif" font-size="10.00">colorMixin</text>
</a>
</g>
</g>
<!-- baseMixin&#45;&gt;colorMixin -->
<g id="edge15" class="edge"><title>baseMixin&#45;&gt;colorMixin</title>
<path fill="none" stroke="black" d="M36.7725,-306.042C45.4567,-333.839 65.2432,-387.623 97.2217,-423 100.561,-426.694 104.522,-430.06 108.676,-433.067"/>
<polygon fill="black" stroke="black" points="107.047,-436.184 117.334,-438.721 110.875,-430.323 107.047,-436.184"/>
</g>
<!-- marginMixin -->
<g id="node3" class="node"><title>marginMixin</title>
<g id="a_node3"><a xlink:href="dc.marginMixin.html" xlink:title="marginMixin">
<ellipse fill="lightblue" stroke="black" cx="141.945" cy="-504" rx="35.9791" ry="18"/>
<text text-anchor="middle" x="141.945" y="-501" font-family="sans-serif" font-size="10.00">marginMixin</text>
</a>
</g>
</g>
<!-- baseMixin&#45;&gt;marginMixin -->
<g id="edge17" class="edge"><title>baseMixin&#45;&gt;marginMixin</title>
<path fill="none" stroke="black" d="M33.7942,-306.078C38.9613,-342.157 54.8517,-424.159 97.2217,-477 99.9215,-480.367 103.162,-483.426 106.643,-486.172"/>
<polygon fill="black" stroke="black" points="104.848,-489.187 115.059,-492.013 108.839,-483.436 104.848,-489.187"/>
</g>
<!-- bubbleMixin -->
<g id="node4" class="node"><title>bubbleMixin</title>
<g id="a_node4"><a xlink:href="dc.bubbleMixin.html" xlink:title="bubbleMixin">
<ellipse fill="lightblue" stroke="black" cx="141.945" cy="-616" rx="35.3575" ry="18"/>
<text text-anchor="middle" x="141.945" y="-613" font-family="sans-serif" font-size="10.00">bubbleMixin</text>
</a>
</g>
</g>
<!-- baseMixin&#45;&gt;bubbleMixin -->
<g id="edge8" class="edge"><title>baseMixin&#45;&gt;bubbleMixin</title>
<path fill="none" stroke="black" d="M35.1261,-306.097C43.3705,-347.028 65.6663,-449.499 97.2217,-531 105.085,-551.31 116.378,-573.136 125.516,-589.585"/>
<polygon fill="black" stroke="black" points="122.641,-591.611 130.606,-598.597 128.736,-588.168 122.641,-591.611"/>
</g>
<!-- capMixin -->
<g id="node7" class="node"><title>capMixin</title>
<g id="a_node7"><a xlink:href="dc.capMixin.html" xlink:title="capMixin">
<ellipse fill="lightblue" stroke="black" cx="141.945" cy="-396" rx="27.3002" ry="18"/>
<text text-anchor="middle" x="141.945" y="-393" font-family="sans-serif" font-size="10.00">capMixin</text>
</a>
</g>
</g>
<!-- baseMixin&#45;&gt;capMixin -->
<g id="edge23" class="edge"><title>baseMixin&#45;&gt;capMixin</title>
<path fill="none" stroke="black" d="M42.5282,-304.588C54.5319,-322.004 75.0758,-349.514 97.2217,-369 101.492,-372.757 106.346,-376.317 111.23,-379.546"/>
<polygon fill="black" stroke="black" points="109.593,-382.65 119.931,-384.969 113.296,-376.709 109.593,-382.65"/>
</g>
<!-- dataCount -->
<g id="node14" class="node"><title>dataCount</title>
<g id="a_node14"><a xlink:href="dc.dataCount.html" xlink:title="dataCount">
<ellipse fill="lightgreen" stroke="black" cx="141.945" cy="-342" rx="31.0259" ry="18"/>
<text text-anchor="middle" x="141.945" y="-339" font-family="sans-serif" font-size="10.00">dataCount</text>
</a>
</g>
</g>
<!-- baseMixin&#45;&gt;dataCount -->
<g id="edge12" class="edge"><title>baseMixin&#45;&gt;dataCount</title>
<path fill="none" stroke="black" d="M54.5308,-299.32C70.1696,-307.044 91.1129,-317.388 108.465,-325.958"/>
<polygon fill="black" stroke="black" points="107.163,-329.218 117.679,-330.509 110.262,-322.942 107.163,-329.218"/>
</g>
<!-- dataGrid -->
<g id="node15" class="node"><title>dataGrid</title>
<g id="a_node15"><a xlink:href="dc.dataGrid.html" xlink:title="dataGrid">
<ellipse fill="lightgreen" stroke="black" cx="141.945" cy="-288" rx="27" ry="18"/>
<text text-anchor="middle" x="141.945" y="-285" font-family="sans-serif" font-size="10.00">dataGrid</text>
</a>
</g>
</g>
<!-- baseMixin&#45;&gt;dataGrid -->
<g id="edge13" class="edge"><title>baseMixin&#45;&gt;dataGrid</title>
<path fill="none" stroke="black" d="M61.4869,-288C74.7881,-288 90.5735,-288 104.556,-288"/>
<polygon fill="black" stroke="black" points="104.826,-291.5 114.826,-288 104.826,-284.5 104.826,-291.5"/>
</g>
<!-- dataTable -->
<g id="node16" class="node"><title>dataTable</title>
<g id="a_node16"><a xlink:href="dc.dataTable.html" xlink:title="dataTable">
<ellipse fill="lightgreen" stroke="black" cx="141.945" cy="-234" rx="29.8168" ry="18"/>
<text text-anchor="middle" x="141.945" y="-231" font-family="sans-serif" font-size="10.00">dataTable</text>
</a>
</g>
</g>
<!-- baseMixin&#45;&gt;dataTable -->
<g id="edge14" class="edge"><title>baseMixin&#45;&gt;dataTable</title>
<path fill="none" stroke="black" d="M54.5308,-276.68C70.3809,-268.851 91.68,-258.332 109.166,-249.696"/>
<polygon fill="black" stroke="black" points="111.013,-252.687 118.43,-245.12 107.914,-246.411 111.013,-252.687"/>
</g>
<!-- numberDisplay -->
<g id="node20" class="node"><title>numberDisplay</title>
<g id="a_node20"><a xlink:href="dc.numberDisplay.html" xlink:title="numberDisplay">
<ellipse fill="lightgreen" stroke="black" cx="141.945" cy="-180" rx="43.25" ry="18"/>
<text text-anchor="middle" x="141.945" y="-177" font-family="sans-serif" font-size="10.00">numberDisplay</text>
</a>
</g>
</g>
<!-- baseMixin&#45;&gt;numberDisplay -->
<g id="edge21" class="edge"><title>baseMixin&#45;&gt;numberDisplay</title>
<path fill="none" stroke="black" d="M42.5282,-271.412C54.5319,-253.996 75.0758,-226.486 97.2217,-207 100.068,-204.495 103.175,-202.078 106.376,-199.788"/>
<polygon fill="black" stroke="black" points="108.59,-202.518 114.96,-194.052 104.701,-196.698 108.59,-202.518"/>
</g>
<!-- selectMenu -->
<g id="node24" class="node"><title>selectMenu</title>
<g id="a_node24"><a xlink:href="dc.selectMenu.html" xlink:title="selectMenu">
<ellipse fill="lightgreen" stroke="black" cx="141.945" cy="-126" rx="34.2869" ry="18"/>
<text text-anchor="middle" x="141.945" y="-123" font-family="sans-serif" font-size="10.00">selectMenu</text>
</a>
</g>
</g>
<!-- baseMixin&#45;&gt;selectMenu -->
<g id="edge29" class="edge"><title>baseMixin&#45;&gt;selectMenu</title>
<path fill="none" stroke="black" d="M36.7725,-269.958C45.4567,-242.161 65.2432,-188.377 97.2217,-153 100.265,-149.633 103.826,-146.538 107.578,-143.74"/>
<polygon fill="black" stroke="black" points="109.625,-146.581 115.971,-138.097 105.719,-140.772 109.625,-146.581"/>
</g>
<!-- cboxMenu -->
<g id="node25" class="node"><title>cboxMenu</title>
<g id="a_node25"><a xlink:href="dc.cboxMenu.html" xlink:title="cboxMenu">
<ellipse fill="lightgreen" stroke="black" cx="141.945" cy="-72" rx="31.0147" ry="18"/>
<text text-anchor="middle" x="141.945" y="-69" font-family="sans-serif" font-size="10.00">cboxMenu</text>
</a>
</g>
</g>
<!-- baseMixin&#45;&gt;cboxMenu -->
<g id="edge30" class="edge"><title>baseMixin&#45;&gt;cboxMenu</title>
<path fill="none" stroke="black" d="M33.7942,-269.922C38.9613,-233.843 54.8517,-151.841 97.2217,-99 100.337,-95.1153 104.172,-91.6411 108.264,-88.5831"/>
<polygon fill="black" stroke="black" points="110.465,-91.3242 116.88,-82.8923 106.607,-85.4833 110.465,-91.3242"/>
</g>
<!-- textFilterWidget -->
<g id="node27" class="node"><title>textFilterWidget</title>
<g id="a_node27"><a xlink:href="dc.textFilterWidget.html" xlink:title="textFilterWidget">
<ellipse fill="lightgreen" stroke="black" cx="141.945" cy="-18" rx="44.9476" ry="18"/>
<text text-anchor="middle" x="141.945" y="-15" font-family="sans-serif" font-size="10.00">textFilterWidget</text>
</a>
</g>
</g>
<!-- baseMixin&#45;&gt;textFilterWidget -->
<g id="edge33" class="edge"><title>baseMixin&#45;&gt;textFilterWidget</title>
<path fill="none" stroke="black" d="M32.0797,-269.892C34.0616,-226.698 44.3301,-115.942 97.2217,-45 99.1947,-42.3536 101.511,-39.9082 104.03,-37.6609"/>
<polygon fill="black" stroke="black" points="106.246,-40.3721 112.053,-31.5107 101.987,-34.8164 106.246,-40.3721"/>
</g>
<!-- coordinateGridMixin -->
<g id="node5" class="node"><title>coordinateGridMixin</title>
<g id="a_node5"><a xlink:href="dc.coordinateGridMixin.html" xlink:title="coordinateGridMixin">
<ellipse fill="lightblue" stroke="black" cx="279.282" cy="-558" rx="55.9203" ry="18"/>
<text text-anchor="middle" x="279.282" y="-555" font-family="sans-serif" font-size="10.00">coordinateGridMixin</text>
</a>
</g>
</g>
<!-- colorMixin&#45;&gt;coordinateGridMixin -->
<g id="edge1" class="edge"><title>colorMixin&#45;&gt;coordinateGridMixin</title>
<path fill="none" stroke="black" d="M165.614,-461.485C172.819,-465.766 180.508,-471.05 186.668,-477 207.416,-497.038 200.933,-512.037 222.668,-531 226.081,-533.978 229.881,-536.708 233.846,-539.19"/>
<polygon fill="black" stroke="black" points="232.284,-542.328 242.706,-544.231 235.745,-536.244 232.284,-542.328"/>
</g>
<!-- geoChoroplethChart -->
<g id="node17" class="node"><title>geoChoroplethChart</title>
<g id="a_node17"><a xlink:href="dc.geoChoroplethChart.html" xlink:title="geoChoroplethChart">
<ellipse fill="lightgreen" stroke="black" cx="279.282" cy="-450" rx="56.7285" ry="18"/>
<text text-anchor="middle" x="279.282" y="-447" font-family="sans-serif" font-size="10.00">geoChoroplethChart</text>
</a>
</g>
</g>
<!-- colorMixin&#45;&gt;geoChoroplethChart -->
<g id="edge16" class="edge"><title>colorMixin&#45;&gt;geoChoroplethChart</title>
<path fill="none" stroke="black" d="M172.645,-450C184.416,-450 198.454,-450 212.391,-450"/>
<polygon fill="black" stroke="black" points="212.488,-453.5 222.488,-450 212.488,-446.5 212.488,-453.5"/>
</g>
<!-- heatMap -->
<g id="node18" class="node"><title>heatMap</title>
<g id="a_node18"><a xlink:href="dc.heatMap.html" xlink:title="heatMap">
<ellipse fill="lightgreen" stroke="black" cx="279.282" cy="-504" rx="27.1742" ry="18"/>
<text text-anchor="middle" x="279.282" y="-501" font-family="sans-serif" font-size="10.00">heatMap</text>
</a>
</g>
</g>
<!-- colorMixin&#45;&gt;heatMap -->
<g id="edge19" class="edge"><title>colorMixin&#45;&gt;heatMap</title>
<path fill="none" stroke="black" d="M167.768,-459.904C189.767,-468.682 222.028,-481.555 246.022,-491.128"/>
<polygon fill="black" stroke="black" points="244.835,-494.423 255.42,-494.878 247.429,-487.921 244.835,-494.423"/>
</g>
<!-- pieChart -->
<g id="node21" class="node"><title>pieChart</title>
<g id="a_node21"><a xlink:href="dc.pieChart.html" xlink:title="pieChart">
<ellipse fill="lightgreen" stroke="black" cx="279.282" cy="-342" rx="27" ry="18"/>
<text text-anchor="middle" x="279.282" y="-339" font-family="sans-serif" font-size="10.00">pieChart</text>
</a>
</g>
</g>
<!-- colorMixin&#45;&gt;pieChart -->
<g id="edge22" class="edge"><title>colorMixin&#45;&gt;pieChart</title>
<path fill="none" stroke="black" d="M165.614,-438.515C172.819,-434.234 180.508,-428.95 186.668,-423 207.416,-402.962 200.933,-387.963 222.668,-369 229.411,-363.117 237.661,-358.202 245.721,-354.249"/>
<polygon fill="black" stroke="black" points="247.328,-357.363 254.994,-350.049 244.44,-350.987 247.328,-357.363"/>
</g>
<!-- rowChart -->
<g id="node22" class="node"><title>rowChart</title>
<g id="a_node22"><a xlink:href="dc.rowChart.html" xlink:title="rowChart">
<ellipse fill="lightgreen" stroke="black" cx="279.282" cy="-396" rx="28.0797" ry="18"/>
<text text-anchor="middle" x="279.282" y="-393" font-family="sans-serif" font-size="10.00">rowChart</text>
</a>
</g>
</g>
<!-- colorMixin&#45;&gt;rowChart -->
<g id="edge27" class="edge"><title>colorMixin&#45;&gt;rowChart</title>
<path fill="none" stroke="black" d="M167.768,-440.096C189.632,-431.372 221.635,-418.602 245.582,-409.047"/>
<polygon fill="black" stroke="black" points="246.983,-412.257 254.974,-405.3 244.389,-405.755 246.983,-412.257"/>
</g>
<!-- sunburstChart -->
<g id="node26" class="node"><title>sunburstChart</title>
<g id="a_node26"><a xlink:href="dc.sunburstChart.html" xlink:title="sunburstChart">
<ellipse fill="lightgreen" stroke="black" cx="279.282" cy="-288" rx="40.7619" ry="18"/>
<text text-anchor="middle" x="279.282" y="-285" font-family="sans-serif" font-size="10.00">sunburstChart</text>
</a>
</g>
</g>
<!-- colorMixin&#45;&gt;sunburstChart -->
<g id="edge31" class="edge"><title>colorMixin&#45;&gt;sunburstChart</title>
<path fill="none" stroke="black" d="M167.058,-439.147C174.185,-434.962 181.463,-429.575 186.668,-423 218.075,-383.331 189.295,-353.029 222.668,-315 226.659,-310.452 231.589,-306.598 236.852,-303.353"/>
<polygon fill="black" stroke="black" points="238.784,-306.287 245.914,-298.45 235.453,-300.13 238.784,-306.287"/>
</g>
<!-- marginMixin&#45;&gt;coordinateGridMixin -->
<g id="edge2" class="edge"><title>marginMixin&#45;&gt;coordinateGridMixin</title>
<path fill="none" stroke="black" d="M170.659,-515.058C188.9,-522.336 213.176,-532.022 234.055,-540.353"/>
<polygon fill="black" stroke="black" points="232.79,-543.617 243.375,-544.072 235.384,-537.115 232.79,-543.617"/>
</g>
<!-- marginMixin&#45;&gt;heatMap -->
<g id="edge18" class="edge"><title>marginMixin&#45;&gt;heatMap</title>
<path fill="none" stroke="black" d="M177.798,-504C197.448,-504 221.971,-504 241.871,-504"/>
<polygon fill="black" stroke="black" points="242.098,-507.5 252.098,-504 242.098,-500.5 242.098,-507.5"/>
</g>
<!-- marginMixin&#45;&gt;rowChart -->
<g id="edge26" class="edge"><title>marginMixin&#45;&gt;rowChart</title>
<path fill="none" stroke="black" d="M167.879,-491.145C174.404,-487.126 181.149,-482.33 186.668,-477 207.416,-456.962 200.933,-441.963 222.668,-423 229.165,-417.331 237.062,-412.562 244.839,-408.685"/>
<polygon fill="black" stroke="black" points="246.54,-411.755 254.164,-404.399 243.617,-405.395 246.54,-411.755"/>
</g>
<!-- bubbleChart -->
<g id="node10" class="node"><title>bubbleChart</title>
<g id="a_node10"><a xlink:href="dc.bubbleChart.html" xlink:title="bubbleChart">
<ellipse fill="lightgreen" stroke="black" cx="416.947" cy="-665" rx="36.1486" ry="18"/>
<text text-anchor="middle" x="416.947" y="-662" font-family="sans-serif" font-size="10.00">bubbleChart</text>
</a>
</g>
</g>
<!-- bubbleMixin&#45;&gt;bubbleChart -->
<g id="edge7" class="edge"><title>bubbleMixin&#45;&gt;bubbleChart</title>
<path fill="none" stroke="black" d="M170.57,-626.979C185.727,-632.588 204.984,-639.047 222.668,-643 272.74,-654.194 331.451,-659.85 370.913,-662.598"/>
<polygon fill="black" stroke="black" points="370.802,-666.099 381.011,-663.268 371.265,-659.114 370.802,-666.099"/>
</g>
<!-- bubbleOverlay -->
<g id="node11" class="node"><title>bubbleOverlay</title>
<g id="a_node11"><a xlink:href="dc.bubbleOverlay.html" xlink:title="bubbleOverlay">
<ellipse fill="lightgreen" stroke="black" cx="279.282" cy="-616" rx="41.696" ry="18"/>
<text text-anchor="middle" x="279.282" y="-613" font-family="sans-serif" font-size="10.00">bubbleOverlay</text>
</a>
</g>
</g>
<!-- bubbleMixin&#45;&gt;bubbleOverlay -->
<g id="edge9" class="edge"><title>bubbleMixin&#45;&gt;bubbleOverlay</title>
<path fill="none" stroke="black" d="M177.446,-616C192.493,-616 210.445,-616 227.005,-616"/>
<polygon fill="black" stroke="black" points="227.097,-619.5 237.097,-616 227.097,-612.5 227.097,-619.5"/>
</g>
<!-- stackMixin -->
<g id="node6" class="node"><title>stackMixin</title>
<g id="a_node6"><a xlink:href="dc.stackMixin.html" xlink:title="stackMixin">
<ellipse fill="lightblue" stroke="black" cx="416.947" cy="-449" rx="31.6332" ry="18"/>
<text text-anchor="middle" x="416.947" y="-446" font-family="sans-serif" font-size="10.00">stackMixin</text>
</a>
</g>
</g>
<!-- coordinateGridMixin&#45;&gt;stackMixin -->
<g id="edge3" class="edge"><title>coordinateGridMixin&#45;&gt;stackMixin</title>
<path fill="none" stroke="black" d="M315.891,-544.269C322.965,-540.595 330.014,-536.176 335.896,-531 357.83,-511.701 350.934,-496.349 371.896,-476 375.583,-472.421 379.825,-469.092 384.19,-466.08"/>
<polygon fill="black" stroke="black" points="386.076,-469.029 392.62,-460.697 382.309,-463.129 386.076,-469.029"/>
</g>
<!-- boxPlot -->
<g id="node9" class="node"><title>boxPlot</title>
<g id="a_node9"><a xlink:href="dc.boxPlot.html" xlink:title="boxPlot">
<ellipse fill="lightgreen" stroke="black" cx="416.947" cy="-611" rx="27" ry="18"/>
<text text-anchor="middle" x="416.947" y="-608" font-family="sans-serif" font-size="10.00">boxPlot</text>
</a>
</g>
</g>
<!-- coordinateGridMixin&#45;&gt;boxPlot -->
<g id="edge5" class="edge"><title>coordinateGridMixin&#45;&gt;boxPlot</title>
<path fill="none" stroke="black" d="M315.572,-571.787C336.623,-580.01 363.153,-590.375 383.65,-598.383"/>
<polygon fill="black" stroke="black" points="382.589,-601.726 393.177,-602.105 385.137,-595.206 382.589,-601.726"/>
</g>
<!-- coordinateGridMixin&#45;&gt;bubbleChart -->
<g id="edge6" class="edge"><title>coordinateGridMixin&#45;&gt;bubbleChart</title>
<path fill="none" stroke="black" d="M312.143,-572.697C320.352,-577.279 328.85,-582.785 335.896,-589 356.162,-606.877 352.005,-619.708 371.896,-638 375.09,-640.937 378.65,-643.728 382.324,-646.324"/>
<polygon fill="black" stroke="black" points="380.7,-649.445 390.982,-652.002 384.539,-643.591 380.7,-649.445"/>
</g>
<!-- compositeChart -->
<g id="node12" class="node"><title>compositeChart</title>
<g id="a_node12"><a xlink:href="dc.compositeChart.html" xlink:title="compositeChart">
<ellipse fill="lightgreen" stroke="black" cx="416.947" cy="-557" rx="45.1005" ry="18"/>
<text text-anchor="middle" x="416.947" y="-554" font-family="sans-serif" font-size="10.00">compositeChart</text>
</a>
</g>
</g>
<!-- coordinateGridMixin&#45;&gt;compositeChart -->
<g id="edge10" class="edge"><title>coordinateGridMixin&#45;&gt;compositeChart</title>
<path fill="none" stroke="black" d="M335.462,-557.593C344.015,-557.53 352.847,-557.465 361.386,-557.402"/>
<polygon fill="black" stroke="black" points="361.645,-560.9 371.619,-557.327 361.593,-553.901 361.645,-560.9"/>
</g>
<!-- scatterPlot -->
<g id="node23" class="node"><title>scatterPlot</title>
<g id="a_node23"><a xlink:href="dc.scatterPlot.html" xlink:title="scatterPlot">
<ellipse fill="lightgreen" stroke="black" cx="416.947" cy="-503" rx="31.7874" ry="18"/>
<text text-anchor="middle" x="416.947" y="-500" font-family="sans-serif" font-size="10.00">scatterPlot</text>
</a>
</g>
</g>
<!-- coordinateGridMixin&#45;&gt;scatterPlot -->
<g id="edge28" class="edge"><title>coordinateGridMixin&#45;&gt;scatterPlot</title>
<path fill="none" stroke="black" d="M314.867,-543.979C335.106,-535.774 360.592,-525.441 380.909,-517.205"/>
<polygon fill="black" stroke="black" points="382.469,-520.349 390.422,-513.348 379.839,-513.862 382.469,-520.349"/>
</g>
<!-- barChart -->
<g id="node8" class="node"><title>barChart</title>
<g id="a_node8"><a xlink:href="dc.barChart.html" xlink:title="barChart">
<ellipse fill="lightgreen" stroke="black" cx="532.134" cy="-476" rx="27.1629" ry="18"/>
<text text-anchor="middle" x="532.134" y="-473" font-family="sans-serif" font-size="10.00">barChart</text>
</a>
</g>
</g>
<!-- stackMixin&#45;&gt;barChart -->
<g id="edge4" class="edge"><title>stackMixin&#45;&gt;barChart</title>
<path fill="none" stroke="black" d="M446.217,-455.744C461.364,-459.357 480.158,-463.84 496.212,-467.67"/>
<polygon fill="black" stroke="black" points="495.761,-471.16 506.3,-470.076 497.385,-464.351 495.761,-471.16"/>
</g>
<!-- lineChart -->
<g id="node19" class="node"><title>lineChart</title>
<g id="a_node19"><a xlink:href="dc.lineChart.html" xlink:title="lineChart">
<ellipse fill="lightgreen" stroke="black" cx="532.134" cy="-422" rx="27.95" ry="18"/>
<text text-anchor="middle" x="532.134" y="-419" font-family="sans-serif" font-size="10.00">lineChart</text>
</a>
</g>
</g>
<!-- stackMixin&#45;&gt;lineChart -->
<g id="edge20" class="edge"><title>stackMixin&#45;&gt;lineChart</title>
<path fill="none" stroke="black" d="M446.217,-442.256C461.257,-438.669 479.892,-434.223 495.87,-430.412"/>
<polygon fill="black" stroke="black" points="497.007,-433.739 505.922,-428.014 495.383,-426.93 497.007,-433.739"/>
</g>
<!-- capMixin&#45;&gt;pieChart -->
<g id="edge24" class="edge"><title>capMixin&#45;&gt;pieChart</title>
<path fill="none" stroke="black" d="M165.903,-386.84C188.007,-378.02 221.63,-364.604 246.341,-354.744"/>
<polygon fill="black" stroke="black" points="247.672,-357.982 255.663,-351.025 245.078,-351.48 247.672,-357.982"/>
</g>
<!-- capMixin&#45;&gt;rowChart -->
<g id="edge25" class="edge"><title>capMixin&#45;&gt;rowChart</title>
<path fill="none" stroke="black" d="M169.361,-396C189.681,-396 218.028,-396 240.71,-396"/>
<polygon fill="black" stroke="black" points="241.005,-399.5 251.005,-396 241.005,-392.5 241.005,-399.5"/>
</g>
<!-- capMixin&#45;&gt;sunburstChart -->
<g id="edge32" class="edge"><title>capMixin&#45;&gt;sunburstChart</title>
<path fill="none" stroke="black" d="M164.27,-385.306C171.852,-380.892 180.123,-375.322 186.668,-369 207.416,-348.962 200.933,-333.963 222.668,-315 227.279,-310.977 232.595,-307.407 238.073,-304.287"/>
<polygon fill="black" stroke="black" points="240.093,-307.182 247.349,-299.462 236.862,-300.972 240.093,-307.182"/>
</g>
<!-- seriesChart -->
<g id="node13" class="node"><title>seriesChart</title>
<g id="a_node13"><a xlink:href="dc.seriesChart.html" xlink:title="seriesChart">
<ellipse fill="lightgreen" stroke="black" cx="532.134" cy="-557" rx="34.2756" ry="18"/>
<text text-anchor="middle" x="532.134" y="-554" font-family="sans-serif" font-size="10.00">seriesChart</text>
</a>
</g>
</g>
<!-- compositeChart&#45;&gt;seriesChart -->
<g id="edge11" class="edge"><title>compositeChart&#45;&gt;seriesChart</title>
<path fill="none" stroke="black" d="M462.032,-557C470.505,-557 479.372,-557 487.82,-557"/>
<polygon fill="black" stroke="black" points="487.863,-560.5 497.863,-557 487.863,-553.5 487.863,-560.5"/>
</g>
</g>
</svg>