You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+1-107
Original file line number
Diff line number
Diff line change
@@ -15,7 +15,7 @@ These components were developed for use in [ExploSig](https://github.com/lrgr/ex
15
15
### Features
16
16
17
17
-**Declarative**: declare scales, data, and styling options
18
-
-**Interactive**: hover and click events, axis brushing, downloading (to PNG)
18
+
-**Interactive**: hover and click events, axis brushing, downloading (to SVG)
19
19
-**Fast**: canvas plots
20
20
-**Linked**: declarative API enables automatic linking of scales across plots
21
21
-**History**: record interactions for forward/backward navigation, import/export (via JSON)
@@ -111,112 +111,6 @@ yarn run docs
111
111
```
112
112
113
113
114
-
115
-
116
-
117
-
### Goals:
118
-
-[x] props should declare visual encodings of data
119
-
- example: the StackedBarPlot component will accept the following props:
120
-
```js
121
-
x="sample_id"
122
-
y="exposure"
123
-
c="signature" // color
124
-
```
125
-
-[x] props should declare where to find the data
126
-
- data will never be passed directly to a plot - instead it will be globally accessible by a key
127
-
- for now, assume data is stored in a global JSON object with `<key>: <data>` mappings
128
-
- example: for a dataset with key `exposures_data`, the following prop would specify to a plot component that this dataset should be used:
129
-
```js
130
-
data="exposures_data"
131
-
```
132
-
- [x] props should declare where to find the scales
133
-
- [x] scales will be ES6 classes with different APIs depending on whether categorical, continuous, etc...
134
-
- [x] scales will always expose a domain
135
-
- [x] scales will always expose a domain-var-to-color function
136
-
- [x] the color scale (orevenindividualcolors) should also be able to be changed programmatically
137
-
- [x] scales will always expose a domain-var-to-human-readable-text function
138
-
- [x] categorical scales will always expose a sort function that takes in a specification of the data that will define the ordering
139
-
- [x] scales will always expose a filter function (and a corresponding filter-reset function)
140
-
- if categorical, this will accept an array of new values
141
-
- if continuous, this will accept a `[min, max]` array
142
-
- if binary, this will accept a boolean value
143
-
- scales should contain all of the information necessary to draw a legend
144
-
- scales will never be passed directly to a plot - instead they will be globally accessible by a key
145
-
- for now, assume scales are stored in a global JSON object with `<variable>: <scale>` mappings
146
-
- example: for a variable `sample_id`, the following prop would specify to a plot component that this scale object should be used for the x axis:
147
-
```js
148
-
x="sample_id"
149
-
```
150
-
- [x] plots should assume which type of scale is on which axis
151
-
- for example, a bar plot (with vertical bars) would assume a continuous y scale and a categorical x
152
-
- [x] events should alert plots when a scale has been mutated
153
-
- these alerts should specify which scale has been updated using a key
154
-
- plot components should listen for these updates and re-draw if necessary
155
-
- scales may be mutated upon filter or zoom
156
-
- [x] data should be immutable
157
-
- even small variations of data sets should be stored in a separate `DataContainer` instance
158
-
- however, plots may need to subscribe to data updates for asynchronous loading reasons
159
-
- [x] plots should NOT draw their own axes
160
-
- axes should be independent of plots
161
-
- axes should be contained in their own components
162
-
- [x] axes should accept props specifying which scale to use, and where to draw
163
-
- example:
164
-
```js
165
-
variable="sample_id"
166
-
side="bottom"
167
-
```
168
-
- [x] axes should be brush-able
169
-
- but also should have the option to disable brushing
170
-
- brushing along an axis should trigger a zoom event
171
-
- axes, if their corresponding scale has been "zoomed", should display a "zoomed out"/full view beside the "zoomed-in" view in order to show [context](https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172)
172
-
- categorical axes should [snap](https://bl.ocks.org/mbostock/6232537)
173
-
- [x] plots and axes should accept `width` and `height` props
174
-
- container components should be responsible for keeping plot and axis props in sync if they are dynamic
175
-
- example:
176
-
```js
177
-
:pWidth="windowWidth"
178
-
:pHeight="300"
179
-
```
180
-
- [x] plots should accept margin props
181
-
- container components should be responsible for keeping margin props in sync if they are dynamic
182
-
- example:
183
-
```js
184
-
:pMarginTop="10"
185
-
:pMarginLeft="50"
186
-
:pMarginRight="20"
187
-
:pMarginBottom="0"
188
-
```
189
-
- [x] plots should emit click events, specifying variables in a predefined order to a prop-supplied callback
190
-
- example:
191
-
```js
192
-
:clickHandler="chooseSample" // will be called with chooseSample(x, y, c)
193
-
```
194
-
- [x] plots should have tooltips
195
-
- tooltips should obtain human-readable variable names from the appropriate scale
196
-
- [x] plots should dispatch applicable hover events
197
-
- dispatching should be done through the scale
198
-
- example:
199
-
- hovering on a section of a bar on a stacked bar plot would cause dispatches for (at least) the `x` and `color` variables
200
-
- [x] the internals of the drawing of the plots should be abstracted away as much as possible
201
-
- details of SVG, canvas, etc. implementation should be contained
202
-
- [x] all *meaningful* interactions will be stored in a history stack
203
-
- meaningful interactions: scale filter/zoom/sort
204
-
- will allow backward(undo)/forward(redo) operations
205
-
- will allow "replaying" of the user's interactions
206
-
- will allow sharing of a user session, so that others may replay or step through the interactions
207
-
- but this should also be optional, for example if the user chooses not to supply the stack to a plot via prop
208
-
- [x] because of the emphasis of linked scales across datasets, for now this implies that legends are NOT "attached" to plots
209
-
- rather, legends should be contained in a separate container component that is fixed on the screen
210
-
- this container should house all of the legends for all of the plots, then based on highlighting, scroll to the specified inner legend
211
-
- for example, through a `ScrollingLegendContainer` component
212
-
- could instead prioritize which legends are showing in the container based on what plots are currently visible on the screen
213
-
- for example, through a `PriorityLegendContainer` component
214
-
- this will allow legend styles to be fixed no matter the height (font sizes, listing heights/widths, etc)
215
-
216
-
- but the great thing is that because everything is decoupled, in the future this assumption could easily be relaxed through creation of components that act how the axes currently work (fill the space on one side of the plot through the `pMargin***` prop and the `side` prop, then lay out based on available space)
217
-
- for example, through a set of `AttachedLegend` components
0 commit comments