-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
198 lines (159 loc) · 7.66 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<html lang="en">
<head>
<title>dc.js - Dimensional Charting Javascript Library</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/dc.css"/>
<link rel="icon" type="image/x-icon" href="dc.logo.png"/>
<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">
<h1 style="margin: 50px 0px;color: red;">WIP - Documentation for dc-v5 </h1>
<img id="logo" src="dc.logo.png" style="float:left" width=125 height=125></img>
<h2>dc.js - Dimensional Charting Javascript Library</h2>
<p>
<b>dc.js</b> is a javascript charting library with
native <a href="http://crossfilter.github.io/crossfilter/">crossfilter</a> support, allowing
highly efficient exploration on large multi-dimensional datasets (inspired by crossfilter's
demo). It leverages <a href="http://d3js.org/">d3</a> to render charts in CSS-friendly SVG
format. Charts rendered using dc.js are data driven and reactive and therefore provide instant
feedback to user interaction.
</p>
<p>
<b>dc.js</b> is an easy yet powerful javascript library for data visualization and
analysis in the browser and on mobile devices.
</p>
<h4>Version Status</h4>
<p>This page is running dc.js version <span id="version"></span></p>
<h4>Getting Started</h4>
<p>
Take a look at the <a href="docs/stock.html">annotated source</a> to the Nasdaq Example shown below.
</p>
<h4>For more information and assistance</h4>
<ul>
<li><a href="https://github.com/dc-js/dc.js/blob/develop/Changelog.md">Changelog</a></li>
<li><a href="https://github.com/dc-js/dc.js/wiki/FAQ">Frequently Asked Questions</a> and <a href="https://github.com/dc-js/dc.js/wiki">Wiki</a></li>
<li><a href="api-docs/">API Reference</a></li>
<li><a href="http://stackoverflow.com/questions/tagged/dc.js">dc.js on StackOverflow</a> - ask questions and get help</li>
<li><a href="https://groups.google.com/forum/?fromgroups#!forum/dc-js-user-group">User Group</a> ("mailing list") - discussion and longer topics</li>
<li><a href="https://github.com/dc-js/dc.js/issues">GitHub Issues</a> - bug reports and feature requests</li>
</ul>
<p><i>Please direct questions and support requests to Stack Overflow or the user group.</i></p>
<p>
Get help faster with a working example! Fork these to get started:<br>
<a href="https://jsfiddle.net/gordonwoodhull/rL82bguk/1">blank jsFiddle</a> - <a href="https://jsfiddle.net/gordonwoodhull/5ztavmjy/2">example jsFiddle</a> - <a href="https://blockbuilder.org/gordonwoodhull/f6bab3d2f5b34018548207014b4056bf">blank bl.ock</a> - <a href="https://blockbuilder.org/gordonwoodhull/bcf9eaa0bfc2c84373cffac06d5755e5">example bl.ock</a>
</p>
<h3>Examples</h3>
<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>
<p>
Public data source: <a href="http://pitrading.com/free_market_data.htm" target="_blank">PiTrading.com</a>.
</p>
<p>
Try it out or check out these other examples.
</p>
<ul>
<li><a href="vc/index.html">US Venture Capital Landscape 2011 (choropleth chart, bubble chart)</a></li>
<li><a href="crime/index.html">Major Canadian City Crime Stats 1998-2011 (bubble overlay, bar chart, line chart)</a></li>
<li><a href="https://github.com/dc-js/dc.js/wiki#examples-contributed-by-community">List of Community Contributed Examples</a></li>
<li><a href="./examples">Simple, Specific Chart Examples</a> (<a href="https://github.com/dc-js/dc.js/tree/master/web-src/examples">source</a>)</li>
</ul>
<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();chartGroup.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();chartGroup.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();chartGroup.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();chartGroup.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();chartGroup.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();chartGroup.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:chartGroup.filterAll(); chartGroup.redrawAll();">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; width: 149px; height: 149px"
src="https://github.blog/wp-content/uploads/2008/12/forkme_right_gray_6d6d6d.png?resize=149%2C149"
alt="Fork me on GitHub"></a>
</div>
</div>
<script type="text/javascript" src="js/d3.js"></script>
<script type="text/javascript" src="js/crossfilter.js"></script>
<script type="text/javascript" src="js/dc.js"></script>
<script type="text/javascript" src="stock.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-33628816-1']);
_gaq.push(['_trackPageview']);
(function () {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>