mark.data · Salebarn/plot@9273c0d · GitHub
Skip to content

Commit 9273c0d

Browse files
mbostockmbostock
committed
mark.data
1 parent bc945f3 commit 9273c0d

16 files changed

Lines changed: 240 additions & 199 deletions

File tree

‎src/channels.js‎

Lines changed: 6 additions & 2 deletions

‎src/marks/area.js‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,23 @@
11
import {create} from "d3-selection";
22
import {area} from "d3-shape";
33
import {Curve} from "../curve.js";
4+
import {identity, indexOf, zero} from "../channels.js";
45
import {defined} from "../defined.js";
56

6-
const indexOf = (d, i) => i;
7-
const identity = d => d;
8-
const zero = () => 0;
9-
107
class Area {
11-
constructor({
12-
x1,
13-
y1,
14-
x2,
15-
y2,
16-
curve,
17-
fill = "currentColor",
18-
fillOpacity
19-
} = {}) {
8+
constructor(
9+
data,
10+
{
11+
x1,
12+
y1,
13+
x2,
14+
y2,
15+
curve,
16+
fill = "currentColor",
17+
fillOpacity
18+
} = {}
19+
) {
20+
this.data = data;
2021
this.curve = Curve(curve);
2122
this.fill = fill;
2223
this.fillOpacity = fillOpacity;
@@ -27,7 +28,7 @@ class Area {
2728
y2: y2 && {value: y2, scale: "y"}
2829
};
2930
}
30-
render({x: {scale: x}, y: {scale: y}}) {
31+
render(I, {x: {scale: x}, y: {scale: y}}) {
3132
const {
3233
curve,
3334
channels: {
@@ -37,7 +38,6 @@ class Area {
3738
y2: {value: Y2} = {value: Y1}
3839
}
3940
} = this;
40-
const I = Array.from(X1, (_, i) => i);
4141
const {length} = X1;
4242
if (length !== Y1.length) throw new Error("X1 and Y1 are different length");
4343
if (length !== X2.length) throw new Error("X1 and X2 are different length");
@@ -58,13 +58,13 @@ class Area {
5858
}
5959

6060
export class AreaX extends Area {
61-
constructor({x = identity, x1 = zero, x2 = x, y = indexOf, ...options} = {}) {
62-
super({...options, x1, x2, y1: y, y2: null});
61+
constructor(data, {x = identity, x1 = zero, x2 = x, y = indexOf, ...options} = {}) {
62+
super(data, {...options, x1, x2, y1: y, y2: null});
6363
}
6464
}
6565

6666
export class AreaY extends Area {
67-
constructor({x = indexOf, y = identity, y1 = zero, y2 = y, ...options} = {}) {
68-
super({...options, x1: x, x2: null, y1, y2});
67+
constructor(data, {x = indexOf, y = identity, y1 = zero, y2 = y, ...options} = {}) {
68+
super(data, {...options, x1: x, x2: null, y1, y2});
6969
}
7070
}

‎src/marks/axis.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export class AxisX {
2323
this.labelOffset = labelOffset;
2424
}
2525
render(
26+
_,
2627
{x: {scale: x}},
2728
{width, height, marginTop, marginRight, marginBottom, marginLeft}
2829
) {
@@ -87,6 +88,7 @@ export class AxisY {
8788
this.labelOffset = labelOffset;
8889
}
8990
render(
91+
_,
9092
{y: {scale: y}},
9193
{width, height, marginTop, marginRight, marginBottom, marginLeft}
9294
) {

‎src/marks/bar.js‎

Lines changed: 34 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,26 @@
11
import {create} from "d3-selection";
2+
import {identity, indexOf} from "../channels.js";
23
import {defined} from "../defined.js";
34

4-
const indexOf = (d, i) => i;
5-
const identity = d => d;
6-
75
class Bar {
8-
constructor({
6+
constructor(
97
channels,
10-
fill = "currentColor",
11-
fillOpacity,
12-
stroke,
13-
strokeWidth,
14-
strokeOpacity,
15-
mixBlendMode,
16-
insetTop = 0,
17-
insetRight = 0,
18-
insetBottom = 0,
19-
insetLeft = 0
20-
} = {}) {
8+
data,
9+
{
10+
fill = "currentColor",
11+
fillOpacity,
12+
stroke,
13+
strokeWidth,
14+
strokeOpacity,
15+
mixBlendMode,
16+
insetTop = 0,
17+
insetRight = 0,
18+
insetBottom = 0,
19+
insetLeft = 0
20+
} = {}
21+
) {
22+
this.data = data;
23+
this.channels = channels;
2124
this.fill = fill;
2225
this.fillOpacity = fillOpacity;
2326
this.stroke = stroke;
@@ -28,9 +31,8 @@ class Bar {
2831
this.insetRight = insetRight;
2932
this.insetBottom = insetBottom;
3033
this.insetLeft = insetLeft;
31-
this.channels = channels;
3234
}
33-
render(scales) {
35+
render(I, scales) {
3436
const {
3537
fill,
3638
fillOpacity,
@@ -52,8 +54,7 @@ class Bar {
5254
.attr("stroke-width", strokeWidth)
5355
.attr("stroke-opacity", strokeOpacity)
5456
.call(g => g.selectAll()
55-
.data(Array.from(X, (_, i) => i)
56-
.filter(i => defined(X[i]) && defined(Y[i])))
57+
.data(I.filter(i => defined(X[i]) && defined(Y[i])))
5758
.join("rect")
5859
.style("mix-blend-mode", mixBlendMode)
5960
.attr("x", this._x(scales))
@@ -65,19 +66,16 @@ class Bar {
6566
}
6667

6768
export class BarX extends Bar {
68-
constructor({
69-
x = identity,
70-
y = indexOf,
71-
...options
72-
} = {}) {
73-
super({
74-
...options,
75-
channels: {
69+
constructor(data, {x = identity, y = indexOf, ...options} = {}) {
70+
super(
71+
{
7672
x: {value: x, scale: "x"},
7773
y: {value: y, scale: "y", type: "band"},
7874
x0: {value: [0], scale: "x"} // ensure the x-domain includes zero
79-
}
80-
});
75+
},
76+
data,
77+
options
78+
);
8179
}
8280
_x({x: {scale: x}}) {
8381
const {insetLeft, channels: {x: {value: X}}} = this;
@@ -98,19 +96,16 @@ export class BarX extends Bar {
9896
}
9997

10098
export class BarY extends Bar {
101-
constructor({
102-
x = indexOf,
103-
y = identity,
104-
...options
105-
} = {}) {
106-
super({
107-
...options,
108-
channels: {
99+
constructor(data, {x = indexOf, y = identity, ...options} = {}) {
100+
super(
101+
{
109102
x: {value: x, scale: "x", type: "band"},
110103
y: {value: y, scale: "y"},
111104
y0: {value: [0], scale: "y"} // ensure the y-domain includes zero
112-
}
113-
});
105+
},
106+
data,
107+
options
108+
);
114109
}
115110
_x({x: {scale: x}}) {
116111
const {insetLeft, channels: {x: {value: X}}} = this;

‎src/marks/dot.js‎

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,21 @@ const first = d => d[0];
55
const second = d => d[1];
66

77
export class DotXY {
8-
constructor({
9-
x = first,
10-
y = second,
11-
r = () => 1, // TODO Allow constant?
12-
fill = "none", // TODO Allow function?
13-
fillOpacity,
14-
stroke = () => true, // TODO Allow constant?
15-
strokeWidth = 1.5,
16-
strokeOpacity,
17-
mixBlendMode
18-
} = {}) {
8+
constructor(
9+
data,
10+
{
11+
x = first,
12+
y = second,
13+
r = () => 1, // TODO Allow constant?
14+
fill = "none", // TODO Allow function?
15+
fillOpacity,
16+
stroke = () => true, // TODO Allow constant?
17+
strokeWidth = 1.5,
18+
strokeOpacity,
19+
mixBlendMode
20+
} = {}
21+
) {
22+
this.data = data;
1923
this.fill = fill;
2024
this.fillOpacity = fillOpacity;
2125
this.strokeWidth = strokeWidth;
@@ -28,12 +32,15 @@ export class DotXY {
2832
stroke: {value: stroke, scale: "color"}
2933
};
3034
}
31-
render({
32-
x: {scale: x},
33-
y: {scale: y},
34-
r: {scale: r},
35-
color: {scale: color} = {}
36-
}) {
35+
render(
36+
I,
37+
{
38+
x: {scale: x},
39+
y: {scale: y},
40+
r: {scale: r},
41+
color: {scale: color} = {}
42+
}
43+
) {
3744
const {
3845
fill,
3946
fillOpacity,
@@ -56,8 +63,7 @@ export class DotXY {
5663
.attr("stroke-width", strokeWidth)
5764
.attr("stroke-opacity", strokeOpacity)
5865
.call(g => g.selectAll()
59-
.data(Array.from(X, (_, i) => i)
60-
.filter(i => defined(X[i]) && defined(Y[i]) && defined(R[i])))
66+
.data(I.filter(i => defined(X[i]) && defined(Y[i]) && defined(R[i])))
6167
.join("circle")
6268
.style("mix-blend-mode", mixBlendMode)
6369
.attr("stroke", S && (i => color(S[i])))

‎src/marks/line.js‎

Lines changed: 26 additions & 25 deletions

0 commit comments

Comments
 (0)