This is a blank dc.js bl.ock template - please fork this bl.ock when asking for help on Stack Overflow or the dc.js user group, or to demonstrate bugs when filing an issue on GitHub.
This was created with blockbuilder.org - you can use blockbuilder to fork and edit this bl.ock interactively. Or you can edit your fork using gist.github.com, or even clone the gist as a git repository.
See this block for a complete example, with data: dc.js example
forked from gordonwoodhull's block: dc.js example
forked from gordonwoodhull's block: dc.js example
xxxxxxxxxx<head> <meta charset="utf-8"> <title>dc.js stocks example</title> <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://unpkg.com/dc@4/dist/style/dc.css" /> <script src="https://unpkg.com/d3@5/dist/d3.js"></script> <script src="https://unpkg.com/crossfilter2@1.5/crossfilter.js"></script> <script src="https://unpkg.com/dc@4/dist/dc.js"></script> <script src="https://cdn.jsdelivr.net/gh/crossfilter/reductio/reductio.js"></script> <script src="https://npmcdn.com/universe@latest/universe.js"></script> <style> div.dc-chart { float: left; } #monthly-volume-chart g.y { display: none; } #logo { margin-right: 2em; margin-top: 2em; } </style></head><body><div class="container"><h2>dc.js stocks example</h2><p> The following charts provide an example of dc.js used against 27 years of Nasdaq 100 index data. Although it is just an example, using it you can already ask some interesting questions. If I am going to gamble whether Nasdaq 100 will gain or lose tomorrow what is my chance? Is Friday or Monday the most unlucky day for investors? Is spring better than winter to invest? Can you find the outliers? When did the outliers occur?</p><h2>Nasdaq 100 Index 1985/11/01-2012/06/29</h2><div class="row"> <div id="yearly-bubble-chart" class="dc-chart"> <strong>Yearly Performance</strong> (radius: fluctuation/index ratio, color: gain/loss) <a class="reset" href="javascript:yearlyBubbleChart.filterAll();dc.redrawAll();" style="display: none;">reset</a> <div class="clearfix"></div> </div></div><div class="row"> <div id="gain-loss-chart"> <strong>Days by Gain/Loss</strong> <a class="reset" href="javascript:gainOrLossChart.filterAll();dc.redrawAll();" style="display: none;">reset</a> <div class="clearfix"></div> </div> <div id="quarter-chart"> <strong>Quarters</strong> <a class="reset" href="javascript:quarterChart.filterAll();dc.redrawAll();" style="display: none;">reset</a> <div class="clearfix"></div> </div> <div id="day-of-week-chart"> <strong>Day of Week</strong> <a class="reset" href="javascript:dayOfWeekChart.filterAll();dc.redrawAll();" style="display: none;">reset</a> <div class="clearfix"></div> </div> <div id="fluctuation-chart"> <strong>Days by Fluctuation(%)</strong> <span class="reset" style="display: none;">range: <span class="filter"></span></span> <a class="reset" href="javascript:fluctuationChart.filterAll();dc.redrawAll();" style="display: none;">reset</a> <div class="clearfix"></div> </div></div><div class="row"> <div id="monthly-move-chart"> <strong>Monthly Index Abs Move & Volume/500,000 Chart</strong> <span class="reset" style="display: none;">range: <span class="filter"></span></span> <a class="reset" href="javascript:moveChart.filterAll();volumeChart.filterAll();dc.redrawAll();" style="display: none;">reset</a> <div class="clearfix"></div> </div></div><div class="row"> <div id="monthly-volume-chart"> </div> <p class="muted pull-right" style="margin-right: 15px;">select a time range to zoom in</p></div><div class="row"> <div> <div class="dc-data-count"> <span class="filter-count"></span> selected out of <span class="total-count"></span> records | <a href="javascript:dc.filterAll(); dc.renderAll();">Reset All</a> </div> </div> <table class="table table-hover dc-data-table"> </table></div><div class="clearfix"></div><a href="https://github.com/dc-js/dc.js"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a></div></div><script type="text/javascript" src="stock.js"></script></body></html> Updated missing url https://rawgit.com/crossfilter/reductio/master/reductio.js to https://cdn.jsdelivr.net/gh/crossfilter/reductio/reductio.js
https://unpkg.com/d3@5/dist/d3.js
https://unpkg.com/crossfilter2@1.5/crossfilter.js
https://unpkg.com/dc@4/dist/dc.js
https://rawgit.com/crossfilter/reductio/master/reductio.js
https://npmcdn.com/universe@latest/universe.js