Skip to content

Commit

Permalink
basic axes
Browse files Browse the repository at this point in the history
  • Loading branch information
@mcnuttandrew
mcnuttandrew committed Jan 18, 2024
1 parent eebcb0e commit 9bd8fc1
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 76 deletions.
139 changes: 81 additions & 58 deletions src/components/ColorScatterPlotPolarGuide.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,36 +25,36 @@
// $: axisFormatter =
// colorPickerConfig[colorSpace as keyof typeof colorPickerConfig].axisLabel;
// $: points = {
// centerTop: {
// x: (xScale.range()[1] - xScale.range()[0]) / 2,
// y: yScale.range()[0],
// labelAdjust: { x: 0, y: -3 },
// anchor: "middle",
// label: `${config.yChannel}: ${axisFormatter(yScale.domain()[0])}`,
// },
// centerBottom: {
// x: (xScale.range()[1] - xScale.range()[0]) / 2,
// y: yScale.range()[1],
// anchor: "middle",
// labelAdjust: { x: 0, y: 15 },
// label: axisFormatter(yScale.domain()[1]),
// },
// centerLeft: {
// x: xScale.range()[0],
// y: (yScale.range()[1] - yScale.range()[0]) / 2,
// anchor: "start",
// labelAdjust: { x: 5, y: -3 },
// label: axisFormatter(xScale.domain()[0]),
// },
// centerRight: {
// x: xScale.range()[1],
// y: (yScale.range()[1] - yScale.range()[0]) / 2,
// anchor: "end",
// labelAdjust: { x: -5, y: -3 },
// label: `${config.xChannel}: ${axisFormatter(xScale.domain()[1])}`,
// },
// };
$: points = {
centerTop: {
x: (xScale.range()[1] - xScale.range()[0]) / 2,
y: yScale.range()[0],
labelAdjust: { x: 0, y: -3 },
anchor: "middle",
// label: `${config.yChannel}: ${axisFormatter(yScale.domain()[0])}`,
},
centerBottom: {
x: (xScale.range()[1] - xScale.range()[0]) / 2,
y: yScale.range()[1],
anchor: "middle",
labelAdjust: { x: 0, y: 15 },
// label: axisFormatter(yScale.domain()[1]),
},
centerLeft: {
x: xScale.range()[0],
y: (yScale.range()[1] - yScale.range()[0]) / 2,
anchor: "start",
labelAdjust: { x: 5, y: -3 },
// label: axisFormatter(xScale.domain()[0]),
},
centerRight: {
x: xScale.range()[1],
y: (yScale.range()[1] - yScale.range()[0]) / 2,
anchor: "end",
labelAdjust: { x: -5, y: -3 },
// label: `${config.xChannel}: ${axisFormatter(xScale.domain()[1])}`,
},
};
$: miniConfig = {
xIdx: config.xChannelIndex,
yIdx: config.yChannelIndex,
Expand All @@ -67,16 +67,16 @@
nums.reduce((acc, x) => acc + x, 0) / nums.length;
$: fillColor = (i: number, j: number) => {
const { xIdx, yIdx, zIdx } = miniConfig;
if (true || (dragging && focusedColors.length === 1)) {
if (dragging && focusedColors.length === 1) {
const coords = [0, 0, 0] as [number, number, number];
const angle = (j / angleBgResolution) * 360;
const r = rNonDimScale(i / rBgResolution);
coords[xIdx] = r;
coords[yIdx] = angle;
// const avgZChannel = avgNums(
// focusedColors.map((x) => colors[x].toChannels()[zIdx])
// );
const avgZChannel = avgNums(colors.map((x) => x.toChannels()[zIdx]));
const avgZChannel = avgNums(
focusedColors.map((x) => colors[x].toChannels()[zIdx])
);
// const avgZChannel = avgNums(colors.map((x) => x.toChannels()[zIdx]));
coords[zIdx] = avgZChannel;
return colorFromChannels(coords, colorSpace as any).toDisplay();
}
Expand All @@ -88,29 +88,52 @@
.range([0, Math.PI * 2]);
</script>

<g transform="translate({plotWidth / 2}, {plotHeight / 2})">
{#each [...new Array(rBgResolution)] as _, i}
{#each [...new Array(angleBgResolution)] as _, j}
<!-- <rect
x={xScale(xNonDimScale(i / bgResolution))}
y={yScale(yNonDimScale(j / bgResolution))}
width={plotWidth / bgResolution}
height={plotHeight / bgResolution}
class="transition-opacity duration-500 ease-in-out"
fill={fillColor(i, j)}
stroke={"white"}
/> -->
<path
fill={fillColor(i, j)}
stroke={"white"}
d={arcScale({
startAngle: angleScale(j) + Math.PI / 2,
endAngle: angleScale(j + 1) + Math.PI / 2,
innerRadius: rScale(rNonDimScale(i / rBgResolution)),
outerRadius: rScale(rNonDimScale((i + 1) / rBgResolution)),
})}
/>
{#if $configStore.showColorBackground}
<g transform="translate({plotWidth / 2}, {plotHeight / 2})">
{#each [...new Array(rBgResolution)] as _, i}
{#each [...new Array(angleBgResolution)] as _, j}
<path
fill={fillColor(i, j)}
stroke={"white"}
opacity={dragging && focusedColors.length === 1 ? 1 : 0}
class="transition-opacity duration-500 ease-in-out"
d={arcScale({
startAngle: angleScale(j) + Math.PI / 2,
endAngle: angleScale(j + 1) + Math.PI / 2,
innerRadius: rScale(rNonDimScale(i / rBgResolution)),
outerRadius: rScale(rNonDimScale((i + 1) / rBgResolution)),
})}
/>
{/each}
{/each}
</g>
{/if}

<line
x1={points.centerTop.x}
y1={points.centerTop.y}
x2={points.centerBottom.x}
y2={points.centerBottom.y}
stroke={axisColor}
stroke-width="1"
/>
<line
x1={points.centerLeft.x}
y1={points.centerLeft.y}
x2={points.centerRight.x}
y2={points.centerRight.y}
stroke={axisColor}
stroke-width="1"
/>

<g transform="translate({plotWidth / 2}, {plotHeight / 2})">
{#each [...new Array(rBgResolution + 1)] as _, i}
<circle
cx={0}
cy={0}
r={rScale(rNonDimScale(i / rBgResolution))}
fill="none"
stroke={axisColor}
/>
{/each}
</g>
<!-- opacity={dragging && focusedColors.length === 1 ? 1 : 0} -->
3 changes: 2 additions & 1 deletion src/lib/Color.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,11 +166,12 @@ export class CIELAB extends Color {
export class HSV extends Color {
name = "HSV";
channelNames = ["h", "s", "v"];
isPolar = true;
channels = { h: 0, s: 0, v: 0 };
domains = { h: [0, 360], s: [0, 100], v: [0, 100] } as Domain;
chromaBind = chroma.hsv;
spaceName = "hsv" as const;
dimensionToChannel = { x: "s", y: "v", z: "h" };
dimensionToChannel = { x: "v", y: "h", z: "s" };
toString(): string {
const [h, s, v] = this.stringChannels();
return `color(hsv ${h} ${s} ${v})`;
Expand Down
21 changes: 4 additions & 17 deletions src/lib/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,17 +211,11 @@ function makeExtents(arr: number[][]) {
) as { x: number[]; y: number[]; z: number[] };
}

export function makePosAndSizes(
pickedColors: number[][],
config: (typeof colorPickerConfig)[string]
) {
// works over screen space coordinates
export function makePosAndSizes(pickedColors: number[][]) {
const selectionExtents = makeExtents(pickedColors);
console.log(selectionExtents, pickedColors);
const makePos = (key: keyof typeof selectionExtents) => {
// const [a, b] = config[`${key}Domain`];
// return selectionExtents[key][a > b ? 1 : 0];
return selectionExtents[key][0];
};
const makePos = (key: keyof typeof selectionExtents) =>
selectionExtents[key][0];
const diff = (key: keyof typeof selectionExtents) => {
const [a, b] = selectionExtents[key];
return Math.abs(a - b);
Expand All @@ -233,13 +227,6 @@ export function makePosAndSizes(
let selectionWidth = diff("x") + 30;
let selectionHeight = diff("y") + 30;
let selectionDepth = diff("z");
// let xPos = makePos("x");
// let yPos = makePos("y");
// let zPos = makePos("z");

// let selectionWidth = diff("x");
// let selectionHeight = diff("y");
// let selectionDepth = diff("z");
return { xPos, yPos, zPos, selectionWidth, selectionHeight, selectionDepth };
}

Expand Down

0 comments on commit 9bd8fc1

Please sign in to comment.