Skip to content

Commit 33b8036

Browse files
flekschasflekschas
committed
Split the colors property into pointColor, pointColorActive, and pointColorHover for clarity
1 parent 6012e6b commit 33b8036

8 files changed

Lines changed: 284 additions & 161 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
- Fix horizontally-flipped background image (#13)
44
- Rename the `background` property to `backgroundColor` for clarity
5+
- Split the `colors` property into `pointColor`, `pointColorActive`, and `pointColorHover` for clarity
56
- Update camera
67

78
## v0.7.6

‎README.md‎

Lines changed: 40 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -155,27 +155,29 @@ The version number of the scatterplot.
155155

156156
**Properties:**
157157

158-
| Name | Type | Default | Constraints | Settable | Nullifiable |
159-
| ----------------- | --------------- | ---------------------------------- | ---------------------- | -------- | ----------- |
160-
| canvas | object | `document.createElement('canvas')` | | `true` | `false` |
161-
| regl | object | `createRegl(canvas)` | | `true` | `false` |
162-
| version | string | | | `false` | `false` |
163-
| width | number | `300` | > 0 | `true` | `false` |
164-
| height | number | `200` | > 0 | `true` | `false` |
165-
| aspectRatio | number | `1.0` | > 0 | `true` | `false` |
166-
| background | string or array | rgba(0,0,0,1) | hex, rgb, rgba | `true` | `false` |
167-
| backgroundImage | function | `null` | Regl texture | `true` | `true` |
168-
| colorBy | string | `null` | `category` or `value` | `true` | `true` |
169-
| colors | array | _see below_ | list of hex, rgb, rgba | `true` | `false` |
170-
| opacity | number | `1` | > 0 | `true` | `false` |
171-
| pointOutlineWidth | number | `2` | >= 0 | `true` | `false` |
172-
| pointSize | number | `6` | > 0 | `true` | `false` |
173-
| pointSizeSelected | number | `2` | >= 0 | `true` | `false` |
174-
| lassoColor | array | rgba(0, 0.667, 1, 1) | hex, rgb, rgba | `true` | `false` |
175-
| lassoMinDelay | number | 15 | >= 0 | `true` | `false` |
176-
| lassoMinDist | number | 4 | >= 0 | `true` | `false` |
177-
| showRecticle | boolean | `false` | `true` or `false` | `true` | `false` |
178-
| recticleColor | array | rgba(1,1,1,.5) | hex, rgb, rgba | `true` | `false` |
158+
| Name | Type | Default | Constraints | Settable | Nullifiable |
159+
| ----------------- | --------------- | ---------------------------------- | -------------------------------------- | -------- | ----------- |
160+
| canvas | object | `document.createElement('canvas')` | | `true` | `false` |
161+
| regl | object | `createRegl(canvas)` | | `true` | `false` |
162+
| version | string | | | `false` | `false` |
163+
| width | number | `300` | > 0 | `true` | `false` |
164+
| height | number | `200` | > 0 | `true` | `false` |
165+
| aspectRatio | number | `1.0` | > 0 | `true` | `false` |
166+
| background | string or array | rgba(0,0,0,1) | hex, rgb, rgba | `true` | `false` |
167+
| backgroundImage | function | `null` | Regl texture | `true` | `true` |
168+
| colorBy | string | `null` | `category` or `value` | `true` | `true` |
169+
| opacity | number | `1` | > 0 | `true` | `false` |
170+
| pointColor | number | `[0.66, 0.66, 0.66, 1]` | single value or list of hex, rgb, rgba | `true` | `false` |
171+
| pointColorActive | number | `[0, 0.55, 1, 1]` | single value or list of hex, rgb, rgba | `true` | `false` |
172+
| pointColorHover | number | `[1, 1, 1, 1]` | single value or list of hex, rgb, rgba | `true` | `false` |
173+
| pointOutlineWidth | number | `2` | >= 0 | `true` | `false` |
174+
| pointSize | number | `6` | > 0 | `true` | `false` |
175+
| pointSizeSelected | number | `2` | >= 0 | `true` | `false` |
176+
| lassoColor | array | rgba(0, 0.667, 1, 1) | hex, rgb, rgba | `true` | `false` |
177+
| lassoMinDelay | number | 15 | >= 0 | `true` | `false` |
178+
| lassoMinDist | number | 4 | >= 0 | `true` | `false` |
179+
| showRecticle | boolean | `false` | `true` or `false` | `true` | `false` |
180+
| recticleColor | array | rgba(1,1,1,.5) | hex, rgb, rgba | `true` | `false` |
179181

180182
**Notes:**
181183

@@ -191,16 +193,12 @@ The version number of the scatterplot.
191193
- The background image must be a Regl texture. To easily set a remote
192194
image as the background please use [`createTextureFromUrl`](#const-texture--createTextureFromUrlregl-url-isCrossOrigin).
193195

194-
- The scatterplot stores 4 colors per color representing 4 states, representing:
196+
- The scatterplot understan 4 colors per color representing 4 states, representing:
195197

196-
- normal: used by default [default: `[0.66, 0.66, 0.66, 1]`]
197-
- active: used when selecting a point [default: `[0, 0.55, 1, 1]`]
198-
- hover: used when mousing over a point _not implemented yet_ [default: `[1, 1, 1, 1]`]
199-
- background: used as the background color [default: `[0, 0, 0, 1]`]
200-
201-
When defining colors you can either pass in a flat array of _normal_ colors
202-
and regl-scatterplot will fill in the rest or you provide a list of quadruples
203-
where each quadruple defines the colors for all 4 states.
198+
- normal (`pointColor`): the normal color of points.
199+
- active (`pointColorActive`): used for coloring selected points.
200+
- hover (`pointColorHover`): used when mousing over a point.
201+
- background (`backgroundColor`): used as the background color.
204202

205203
- Points can currently by colored by _category_ and _value_.
206204

@@ -223,15 +221,15 @@ const width = scatterplot.get('width');
223221
// in which case you'd have to set the aspect ratio as follows to `2`.
224222
scatterplot.set({ aspectRatio: 2.0 });
225223

226-
// Set background color red
227-
scatterplot.set({ background: '#00ff00' });
228-
scatterplot.set({ background: [255, 0, 0] });
229-
scatterplot.set({ background: [255, 0, 0, 1.0] });
230-
scatterplot.set({ background: [1, 0, 0, 1.0] }); // normalized rgba
224+
// Set background color to red
225+
scatterplot.set({ backgroundColor: '#00ff00' }); // hex string
226+
scatterplot.set({ backgroundColor: [255, 0, 0] }); // rgb array
227+
scatterplot.set({ backgroundColor: [255, 0, 0, 1.0] }); // rgba array
228+
scatterplot.set({ backgroundColor: [1.0, 0, 0, 1.0] }); // normalized rgba
231229

232-
// Set background image to an image with the same origin
230+
// Set background image to an image from the same origin
233231
scatterplot.set({ backgroundImage: 'my-image.png' });
234-
// Set background image to an image with a different origin
232+
// Set background image to an image from a different origin
235233
scatterplot.set({ backgroundImage: { src: 'https://server.com/my-image.png', crossOrigin: true } });
236234
// Set background image to some regl texture
237235
const image = new Image();
@@ -242,7 +240,11 @@ image.onload = () => { scatterplot.set({ backgroundImage: scatterplot.regl.textu
242240
scatterplot.set({ colorBy: 'category' });
243241

244242
// Set color map
245-
scatterplot.set({ colors: ['#ff0000', '#00ff00', '#0000ff'] });
243+
scatterplot.set({
244+
pointColor: ['#ff0000', '#00ff00', '#0000ff'],
245+
pointColorActive: ['#ff0000', '#00ff00', '#0000ff'], // optional
246+
pointColorHover: ['#ff0000', '#00ff00', '#0000ff'], // optional
247+
});
246248

247249
// Set base opacity
248250
scatterplot.set({ opacity: 0.5 });

‎example/index.js‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,7 @@ const selectHandler = ({ points: selectedPoints }) => {
4242
if (selection.length === 1) {
4343
const point = points[selection[0]];
4444
console.log(
45-
`X: ${point[0]}\nY: ${point[1]}\nCategory: ${point[2]}\nValue: ${
46-
point[3]
47-
}`
45+
`X: ${point[0]}\nY: ${point[1]}\nCategory: ${point[2]}\nValue: ${point[3]}`
4846
);
4947
}
5048
};
@@ -65,6 +63,7 @@ const scatterplot = createScatterplot({
6563
recticleColor
6664
});
6765

66+
console.log(scatterplot.get('pointColorActive'));
6867
console.log(`Scatterplot v${scatterplot.get('version')}`);
6968

7069
scatterplot.subscribe('pointover', pointoverHandler);
@@ -134,14 +133,11 @@ const resetClickHandler = () => {
134133

135134
resetEl.addEventListener('click', resetClickHandler);
136135

137-
const colorsCat = [
138-
['#3a78aa', '#008dff', '#008dff'],
139-
['#aa3a99', '#ff00da', '#ff00da']
140-
];
141-
scatterplot.set({ colorBy: 'category', colors: colorsCat });
136+
const colorsCat = ['#3a78aa', '#aa3a99'];
137+
scatterplot.set({ colorBy: 'category', pointColor: colorsCat });
142138

143139
const colorsScale = [
144-
'#002072',
140+
'#002072', // dark blue
145141
'#162b79',
146142
'#233680',
147143
'#2e4186',
@@ -160,9 +156,9 @@ const colorsScale = [
160156
'#b8e0d7',
161157
'#c8ecdc',
162158
'#ddf7df',
163-
'#ffffe0'
159+
'#ffffe0' // bright yellow
164160
];
165-
scatterplot.set({ colorBy: 'value', colors: colorsScale });
161+
scatterplot.set({ colorBy: 'value', pointColor: colorsScale });
166162

167163
setPointSize(pointSize);
168164
setOpacity(opacity);

‎src/constants.js‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,6 @@ export const DEFAULT_COLOR_NORMAL = [0.66, 0.66, 0.66, 1];
2525
export const DEFAULT_COLOR_ACTIVE = [0, 0.55, 1, 1];
2626
export const DEFAULT_COLOR_HOVER = [1, 1, 1, 1];
2727
export const DEFAULT_COLOR_BG = [0, 0, 0, 1];
28-
export const DEFAULT_COLORS = [
29-
DEFAULT_COLOR_NORMAL,
30-
DEFAULT_COLOR_ACTIVE,
31-
DEFAULT_COLOR_HOVER,
32-
DEFAULT_COLOR_BG
33-
];
3428

3529
// Default view
3630
export const DEFAULT_TARGET = [0, 0];

0 commit comments

Comments
 (0)