This repository has been archived by the owner on Jun 8, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
d3-fluid.html
204 lines (164 loc) · 10.4 KB
/
d3-fluid.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
199
200
201
202
203
204
<!DOCTYPE html>
<html data-debug='false' lang='en' prefix='og: http://ogp.me/ns#'>
<head>
<title>GiottoJs</title>
<meta charset='utf-8'>
<meta content='IE=edge' http-equiv='X-UA-Compatible'>
<meta content='width=device-width, initial-scale=1' name='viewport'>
<meta content='#ffffff' name='msapplication-TileColor'>
<meta content='/icons/ms-icon-144x144.png' name='msapplication-TileImage'>
<meta content='#ffffff' name='theme-color'>
<meta content='GiottoJS is a javascript visualization library built on top of d3js. It is designed to visualize both SVG and Canvas elements with a simple API. AngularJS integration' name='description'>
<meta content='eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJMT0NBTEUiOiJlbl9HQiIsInBhZ2UiOnsiZ3JvdXAiOiJzaXRlIiwic2x1ZyI6ImQzLWZsdWlkIiwiYm9keV90ZW1wbGF0ZSI6ImhvbWUuaHRtbCIsImJvZHlfbGVuZ3RoIjo1NTg1LCJwYXRoIjoiL2QzLWZsdWlkIiwiYXBpX3VybCI6Imh0dHBzOi8vZ2lvdHRvanMub3JnL2FwaS9jb250ZW50cy9zaXRlL2QzLWZsdWlkIiwiaW5uZXJfdGVtcGxhdGUiOiJwYXJ0aWFscy9iYXNlLmh0bWwifSwiZGVidWciOmZhbHNlLCJNSU5JRklFRF9NRURJQSI6dHJ1ZSwiQ09QWVJJR0hUIjoiTHV4IiwiQVBQX05BTUUiOiJHaW90dG9KcyIsIkRBVEVUSU1FX0ZPUk1BVCI6ImQgTU1NIHksIGg6bW06c3MgYSIsIkFQSV9VUkwiOiIvYXBpIiwiTUVESUFfVVJMIjoiL21lZGlhLyIsIkRBVEVfRk9STUFUIjoiZCBNTU0geSIsImx1eF92ZXJzaW9uIjoiMC44LjIuZGV2MjAxNjEyMDIxMjAyMDAifQ.syUZFX3J5zHXuek2voLpAdBWD6SPQ8Be6HZQSgt1OU4' name='html-context'>
<meta content='website' property='og:type'>
<meta content='https://giottojs.org/d3-fluid' property='og:url'>
<meta content='GiottoJs' property='og:title'>
<meta content='GiottoJS is a javascript visualization library built on top of d3js. It is designed to visualize both SVG and Canvas elements with a simple API. AngularJS integration' property='og:description'>
<meta content='en_GB' property='og:locale'>
<meta content='GiottoJs' property='og:site_name'>
<meta content='https://giottojs.org/giotto-banner.png' property='og:image'>
<meta content='summary' name='twitter:card'>
<meta content='@giottojs_org' name='twitter:site'>
<meta content='GiottoJs' name='twitter:title'>
<meta content='GiottoJS is a javascript visualization library built on top of d3js. It is designed to visualize both SVG and Canvas elements with a simple API. AngularJS integration' name='twitter:description'>
<meta content='https://giottojs.org/giotto-banner.png' name='twitter:image'>
<link href='https://giottojs.org/d3-fluid' rel='canonical'>
<link href='/giottojs-default.css' rel='stylesheet' type='text/css'>
<link href='/icons/apple-icon-57x57.png' rel='apple-touch-icon' sizes='57x57'>
<link href='/icons/apple-icon-60x60.png' rel='apple-touch-icon' sizes='60x60'>
<link href='/icons/apple-icon-72x72.png' rel='apple-touch-icon' sizes='72x72'>
<link href='/icons/apple-icon-76x76.png' rel='apple-touch-icon' sizes='76x76'>
<link href='/icons/apple-icon-114x114.png' rel='apple-touch-icon' sizes='114x114'>
<link href='/icons/apple-icon-120x120.png' rel='apple-touch-icon' sizes='120x120'>
<link href='/icons/apple-icon-144x144.png' rel='apple-touch-icon' sizes='144x144'>
<link href='/icons/apple-icon-152x152.png' rel='apple-touch-icon' sizes='152x152'>
<link href='/icons/apple-icon-180x180.png' rel='apple-touch-icon' sizes='180x180'>
<link href='/icons/favicon-16x16.png' rel='icon' sizes='16x16' type='image/png'>
<link href='/icons/favicon-32x32.png' rel='icon' sizes='32x32' type='image/png'>
<link href='/icons/favicon-96x96.png' rel='icon' sizes='96x96' type='image/png'>
<link href='/icons/android-icon-192x192.png' rel='icon' sizes='192x192' type='image/png'>
<link href='/icons/manifest.json' rel='manifest'>
<script src='/require.js' type='application/javascript'></script>
<script src='/giotto-dev.js' type='application/javascript'></script>
<script src='/giottojs.min.js' type='application/javascript'></script>
</head>
<body>
<div id="page">
<navbar d3-model="mainNavbar" brand-height="60"></navbar>
<div id="page-main" class="pt100">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="page-header">
<h2></h2>
</div>
<div d3-highlight>
<h1 id="d3-fluid">d3-fluid</h1>
<p>Reactive data visualization components</p>
<p><a href="https://circleci.com/gh/quantmind/d3-fluid"><img alt="CircleCI" src="https://circleci.com/gh/quantmind/d3-fluid.svg?style=svg&circle-token=a224bfec44b5c4ea2457d374283302b0902418f5" /></a>
<a href="https://david-dm.org/quantmind/d3-fluid"><img alt="Dependency Status" src="https://david-dm.org/quantmind/d3-fluid.svg" /></a>
<a href="https://david-dm.org/quantmind/d3-fluid#info=devDependencies"><img alt="devDependency Status" src="https://david-dm.org/quantmind/d3-fluid/dev-status.svg" /></a></p>
<p><a href="https://circleci.com/api/v1/project/quantmind/d3-fluid/latest/artifacts/0/$CIRCLE_ARTIFACTS/coverage/index.html?branch=master&filter=successful">Coverage</a></p>
<p>This is a <a href="https://bost.ocks.org/mike/d3-plugin/">d3 plugin</a> containing
reactive data visualization components.</p>
<h2 id="contents">Contents</h2>
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
<ul>
<li><a href="#installing">Installing</a></li>
<li><a href="#graphics-grammar">Graphics Grammar</a></li>
<li><a href="#paper">Paper</a></li>
<li><a href="#layer">Layer</a></li>
<li><a href="#api-reference">API Reference</a></li>
<li><a href="#components">Components</a></li>
<li><a href="#datastore">dataStore</a></li>
<li><a href="#references">References</a></li>
</ul>
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
<h2 id="installing">Installing</h2>
<p>If you use <a href="https://www.npmjs.com/package/d3-fluid">NPM</a>, <code>npm install d3-fluid</code>.
Otherwise, download the latest release.
AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3 global is exported.
Try <a href="https://runkit.com/npm/d3-fluid">d3-fluid</a> in your browser.</p>
<pre><code class="javascript"><script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://d3js.org/d3-collection.v1.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src="https://d3js.org/d3-ease.v1.min.js"></script>
<script src="https://d3js.org/d3-selection.v1.min.js"></script>
<script src="https://d3js.org/d3-timer.v1.min.js"></script>
<script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-transition.v1.min.js"></script>
<script src="https://giottojs.org/latest/d3-let.min.js"></script>
<script src="https://giottojs.org/latest/d3-view.min.js"></script>
<script src="https://giottojs.org/latest/d3-fluid.min.js"></script>
</code></pre>
<h2 id="layout">Layout</h2>
<h3 id="rows">Rows</h3>
<p>A row is a layout component and it is only used to store information
about the dashboard layout.</p>
<h3 id="columns">Columns</h3>
<p>A row is composed by one or more columns.</p>
<h2 id="paper">Paper</h2>
<p>The paper is another name for a container of data visualizations.
The following components make up a paper:</p>
<ul>
<li>A default data serie name from the <a href="#dataStore">dataStore</a> container</li>
<li>One background layer for plot annotation such as <em>background</em> and <em>grid</em></li>
<li>One or more layers</li>
<li>One foreground layer for user interactions (canvas paper only)</li>
</ul>
<h3 id="layer">Layer</h3>
<p>A layer is defined by:</p>
<ul>
<li>Data, specifically the name of the serie in the <a href="#dataStore">dataStore</a> container</li>
<li>Marks (aestetics) - data mapping</li>
</ul>
<h2 id="api-reference">API Reference</h2>
<h3 id="components">Components</h3>
<h3 id="datastore">dataStore</h3>
<p>The datastore object is at the core of the data retrieval and manipulation:</p>
<pre><code class="javascript">var ds = d3.dataStore();
</code></pre>
<p>It contains a mapping of data provided by one or more data providers.</p>
<p><a name="user-content-datastore-size" href="#datastore-size">#</a> dataStore.<b>size</b>()</p>
<p>Number of data providers registered with this data store.</p>
<p><a name="user-content-datastore-provider" href="#datastore-provider">#</a> dataStore.<b>provider</b>(<i>name</i>, [<i>provider</i>])</p>
<p>If <em>provider</em> is specified, sets a new provider for the specified <em>name</em> and return this dataStore.
If a provider was already registered for the same <em>name</em>, the existing provider is removed. If
<em>provider</em> is <em>null</em>, removes the current provider for the specified <em>name</em>, if any.
If <em>provider</em> is not specified, returns the provider registered with <em>name</em> if any.</p>
<p><a name="user-content-datastore-getList" href="#datastore-getlist">#</a> dataStore.<b>getlist</b>(<i>name</i>, [<i>params</i>])</p>
<p>Fetch data from a registered data provider at <em>name</em> and return a <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a>.
If no data provider is registered for the given name, the promise resolve in an empty list.</p>
<h2 id="references">References</h2>
<ul>
<li><a href="https://assets.fluidily.com/references/wickham-layered-grammar.pdf">A Layered Grammar of Graphics</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="hidden-print">
<div id="footer">
<div class="container">
<div class="row">
<div class="col-sm-12 small">
<p>Library released under the <a href="http://opensource.org/licenses/BSD-3-Clause">BSD License</a>.</p>
<p>Copyright <year></year> <a href="http://lucasbardella.com">Luca Sbardella</a> and <a href="http://quantmind.com">Quantmind</a></p>
</div>
</div>
</div>
</div>
</div>
</div><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-54439804-4', 'auto');
ga('send', 'pageview');
</script></body>
</html>