working arc mark with external pie

Author: jackhumbert

src/marks/arc.js

@@ -2,62 +2,50 @@ import {ascending} from "d3-array";
 import {create} from "d3-selection";
 import {arc as shapeArc} from "d3-shape";
 import {filter, nonempty} from "../defined.js";
-import {Mark, maybeColor, maybeNumber, title} from "../mark.js";
-import {Style, applyDirectStyles, applyIndirectStyles, applyTransform} from "../style.js";
+import {Mark, maybeNumber} from "../mark.js";
+import {applyDirectStyles, applyIndirectStyles, applyTransform, applyChannelStyles, offset} from "../style.js";
 
-const constant = x => () => x;
+const defaults = {
+  fill: "currentColor",
+  stroke: "none"
+};
 
 export class Arc extends Mark {
-  constructor(
-    data,
-    {
+  constructor(data, options = {}) {
+    const {
+      x,
+      y,
       startAngle = d => d.startAngle,
       endAngle = d => d.endAngle,
-      x = constant(0),
-      y = constant(0),
       innerRadius,
       outerRadius,
-      padAngle,
+      padAngle,      
       z,
       title,
-      label,
-      fill,
-      stroke,
-      transform,
-      ...style
-    } = {}
-  ) {
-    const [vfill, cfill] = maybeColor(fill, "currentColor");
-    const [vstroke, cstroke] = maybeColor(stroke, cfill === "none" ? "currentColor" : cfill === "currentColor" ? "white" : "none");
+      label
+    } = options;
     const [vsa, csa] = maybeNumber(startAngle, 0);
     const [vea, cea] = maybeNumber(endAngle, 2 * Math.PI);
     const [vpa, cpa] = maybeNumber(padAngle, 0);
-    const [vx, cx] = maybeNumber(x, 0);
-    const [vy, cy] = maybeNumber(y, 0);
     const [vri, cri] = maybeNumber(innerRadius, 0);
     const [vro, cro] = maybeNumber(outerRadius, 100);
-
     super(
       data,
       [
-        {name: "x", value: vx, scale: "x", optional: true},
-        {name: "y", value: vy, scale: "y", optional: true},
+        {name: "x", value: x, scale: "x", optional: true},
+        {name: "y", value: y, scale: "y", optional: true},
         {name: "startAngle", value: vsa, optional: true},
         {name: "endAngle", value: vea, optional: true},
-        {name: "innerRadius", value: vri, optional: true},
-        {name: "outerRadius", value: vro, optional: true},
+        {name: "innerRadius", value: vri, scale: "r", optional: true},
+        {name: "outerRadius", value: vro, scale : "r", optional: true},
         {name: "padAngle", value: vpa, optional: true},
         {name: "z", value: z, optional: true},
         {name: "title", value: title, optional: true},
-        {name: "label", value: label, optional: true},
-        {name: "fill", value: vfill, scale: "color", optional: true},
-        {name: "stroke", value: vstroke, scale: "color", optional: true}
+        {name: "label", value: label, optional: true}
       ],
-      transform
+      options,
+      defaults
     );
-    Style(this, {fill: cfill, stroke: cstroke, ...style});
-    this.x = cx;
-    this.y = cy;
     this.sa = csa;
     this.ea = cea;
     this.ri = cri;
@@ -66,14 +54,25 @@ export class Arc extends Mark {
   }
   render(
     I,
-    {x, y, color},
-    {startAngle: SA, endAngle: EA, innerRadius: RI, outerRadius: RO, padAngle: PA, x: X, y: Y, z: Z, title: T, label: L, fill: F, stroke: S},
-    {marginTop, marginRight, marginBottom, marginLeft, width, height}
+    {x, y},
+    channels,
+    {width, height, marginTop, marginRight, marginBottom, marginLeft}
   ) {
-    const index = filter(I, SA, EA, F, S);
+    const {
+      startAngle: SA, 
+      endAngle: EA, 
+      innerRadius: RI, 
+      outerRadius: RO, 
+      padAngle: PA, 
+      x: X, y: Y, z: Z, 
+      label: L
+    } = channels;    
+    const {dx, dy} = this;
+    let index = filter(I, SA, EA);
     if (Z) index.sort((i, j) => ascending(Z[i], Z[j]));
 
-    const r0 = Math.min(width - marginLeft - marginRight, height - marginTop - marginBottom) / 200;
+    // const r0 = Math.min(width - marginLeft - marginRight, height - marginTop - marginBottom) / 200;
+    const r0 = 1;
 
     const arc = shapeArc()
       .startAngle(SA ? (i => SA[i]) : this.sa)
@@ -83,19 +82,17 @@ export class Arc extends Mark {
       .padAngle(PA ? (i => PA[i]) : this.pa);
 
     const wrapper = create("svg:g")
-        .call(applyTransform, x, y);
-      wrapper
-        .append("g")
+      // wrapper
+      //   .append("g")
         .call(applyIndirectStyles, this)
+        .call(applyTransform, x, y, offset + dx, offset + dy)
         .call(g => g.selectAll()
           .data(index)
           .join("path")
             .call(applyDirectStyles, this)
             .attr("d", arc)
-            .attr("transform", i => `translate(${x(X[i])},${y(Y[i])})`)
-            .attr("fill", F && (i => color(F[i])))
-            .attr("stroke", S && (i => color(S[i])))
-        .call(title(T)));
+            .attr("transform", i => `translate(${X ? X[i] : x},${Y ? Y[i] : y})`)
+            .call(applyChannelStyles, channels));
     if (L) wrapper.append("g").call(_label(L, index, arc));
     return wrapper.node();
 

test/plots/arc.js

@@ -0,0 +1,17 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+export default async function() {
+  const data = d3.pie()([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
+  console.log(data);
+  return Plot.plot({
+    marks: [
+      Plot.arc(data, {
+        x: 0, y: 0,
+          innerRadius: d => 10 * d.value,
+          outerRadius: d => 30 * d.value,
+          fill: d => `a${d.value}`
+        })
+    ]
+  });
+}

test/plots/index.js

@@ -19,6 +19,7 @@ export {default as athletesSportWeight} from "./athletes-sport-weight.js";
 export {default as athletesWeight} from "./athletes-weight.js";
 export {default as athletesWeightCumulative} from "./athletes-weight-cumulative.js";
 export {default as availability} from "./availability.js";
+export {default as arc} from "./arc.js";
 export {default as ballotStatusRace} from "./ballot-status-race.js";
 export {default as beckerBarley} from "./becker-barley.js";
 export {default as caltrain} from "./caltrain.js";