allotaxonometer-ui 0.1.0

package/README.md

@@ -0,0 +1,51 @@
+# Allotaxonometer UI
+
+Headless UI components for allotaxonometer visualizations built with Svelte 5.
+
+## Installation
+
+```bash
+npm install allotaxonometer-ui
+```
+
+Make sure you have these installed:
+
+```bash
+npm install svelte d3 allotaxonometer @ungap/structured-clone
+```
+
+## Usage
+
+```svelte
+<script>
+  import { Dashboard } from 'allotaxonometer-ui';
+  
+  // Your data
+  let sys1 = [...];
+  let sys2 = [...];
+</script>
+
+<Dashboard 
+  test_elem_1={sys1}
+  test_elem_2={sys2}
+  alpha={0.58}
+  title={['System 1', 'System 2']}
+/>
+```
+
+## Components
+
+- Dashboard - Complete dashboard with all visualizations
+- Diamond - Diamond chart component
+- Wordshift - Word shift visualization
+- DivergingBarChart - Diverging bar chart
+- Legend - Legend component
+
+## Development
+
+```bash
+git clone https://github.com/yourusername/allotaxonometer-ui.git
+cd allotaxonometer-ui
+npm install
+npm run build
+```

package/dist/index.js

@@ -0,0 +1,1094 @@
+import 'svelte/internal/disclose-version';
+import * as $ from 'svelte/internal/client';
+import * as d3 from 'd3';
+import { extent, InternSet, range, rollup, scaleLinear, scaleBand, rgb, interpolateInferno, scaleOrdinal, max, scaleLog } from 'd3';
+
+var root_1$7 = $.from_svg(`<g class="xtick"><line x1="0" x2="0" y1="0" y2="6" stroke="hsla(212, 10%, 53%, 1)"></line></g><g class="tick-text"><text font-size="10" dx="13" dy="13"> </text></g>`, 1);
+var root$8 = $.from_svg(`<g class="axis x"><!><g class="xlab svelte-1y8xk6i"><text dy="45">Rank r</text><text dy="63">for</text><text dy="80"> </text><text dy="60" fill="hsla(212, 10%, 53%, 1)" opacity="0.7">more →</text><text dy="75" fill="hsla(212, 10%, 53%, 1)" opacity="0.7">frequent</text><text dy="60" fill="hsla(212, 10%, 53%, 1)" opacity="0.7">← less</text><text dy="75" fill="hsla(212, 10%, 53%, 1)" opacity="0.7">frequent</text></g></g>`);
+
+function AxisX($$anchor, $$props) {
+	$.push($$props, true);
+
+	let logFormat10 = $$props.scale.tickFormat();
+	let xTicks = $$props.scale.ticks();
+	var g = root$8();
+	var node = $.child(g);
+
+	$.each(node, 17, () => xTicks, $.index, ($$anchor, tick) => {
+		var fragment = root_1$7();
+		var g_1 = $.first_child(fragment);
+		var g_2 = $.sibling(g_1);
+		var text = $.child(g_2);
+		var text_1 = $.child(text, true);
+
+		$.reset(text);
+		$.reset(g_2);
+
+		$.template_effect(
+			($0, $1, $2) => {
+				$.set_attribute(g_1, 'transform', `translate(${$0 ?? ''}, 0)`);
+				$.set_attribute(g_2, 'transform', `translate(${$1 ?? ''}, 0) scale(-1,1) rotate(45)`);
+				$.set_text(text_1, $2);
+			},
+			[
+				() => $$props.scale($.get(tick)),
+				() => $$props.scale($.get(tick)),
+				() => logFormat10($.get(tick))
+			]
+		);
+
+		$.append($$anchor, fragment);
+	});
+
+	var g_3 = $.sibling(node);
+	var text_2 = $.child(g_3);
+	var text_3 = $.sibling(text_2);
+	var text_4 = $.sibling(text_3);
+	var text_5 = $.child(text_4, true);
+
+	$.reset(text_4);
+
+	var text_6 = $.sibling(text_4);
+	var text_7 = $.sibling(text_6);
+	var text_8 = $.sibling(text_7);
+
+	$.set_attribute(text_8, 'x', 40);
+
+	var text_9 = $.sibling(text_8);
+
+	$.set_attribute(text_9, 'x', 40);
+	$.reset(g_3);
+	$.reset(g);
+
+	$.template_effect(() => {
+		$.set_attribute(g, 'transform', `translate(0, ${$$props.height ?? ''})`);
+		$.set_attribute(g_3, 'transform', `scale(-1,1) translate(-${$$props.height ?? ''}, 0)`);
+		$.set_attribute(text_2, 'x', $$props.height / 2);
+		$.set_attribute(text_3, 'x', $$props.height / 2);
+		$.set_attribute(text_4, 'x', $$props.height / 2);
+		$.set_text(text_5, $$props.title[1]);
+		$.set_attribute(text_6, 'x', $$props.height - 40);
+		$.set_attribute(text_7, 'x', $$props.height - 40);
+	});
+
+	$.append($$anchor, g);
+	$.pop();
+}
+
+var root_1$6 = $.from_svg(`<g class="ytick"><line x1="0" x2="-6" y1="0" y2="0" stroke="hsla(212, 10%, 53%, 1)"></line></g><g class="tick-text"><text font-size="10" dx="-23" dy="10"> </text></g>`, 1);
+var root$7 = $.from_svg(`<g class="axis y"><!><g class="ylab svelte-1y8visx" transform="rotate(90)"><text dy="45">Rank r</text><text dy="63">for</text><text dy="80"> </text><text dy="60" fill="hsla(212, 10%, 53%, 1)" opacity="0.7">more →</text><text dy="75" fill="hsla(212, 10%, 53%, 1)" opacity="0.7">frequent</text><text dy="60" fill="hsla(212, 10%, 53%, 1)" opacity="0.7">← less</text><text dy="75" fill="hsla(212, 10%, 53%, 1)" opacity="0.7">frequent</text></g></g>`);
+
+function AxisY($$anchor, $$props) {
+	$.push($$props, true);
+
+	let logFormat10 = $$props.scale.tickFormat();
+	let yTicks = $.derived(() => $$props.scale.ticks());
+	var g = root$7();
+	var node = $.child(g);
+
+	$.each(node, 17, () => $.get(yTicks), $.index, ($$anchor, tick) => {
+		var fragment = root_1$6();
+		var g_1 = $.first_child(fragment);
+		var g_2 = $.sibling(g_1);
+		var text = $.child(g_2);
+		var text_1 = $.child(text, true);
+
+		$.reset(text);
+		$.reset(g_2);
+
+		$.template_effect(
+			($0, $1, $2) => {
+				$.set_attribute(g_1, 'transform', `translate(0, ${$0 ?? ''})`);
+				$.set_attribute(g_2, 'transform', `translate(0, ${$1 ?? ''}) rotate(45)`);
+				$.set_text(text_1, $2);
+			},
+			[
+				() => $$props.scale($.get(tick)),
+				() => $$props.scale($.get(tick)),
+				() => logFormat10($.get(tick))
+			]
+		);
+
+		$.append($$anchor, fragment);
+	});
+
+	var g_3 = $.sibling(node);
+	var text_2 = $.child(g_3);
+	var text_3 = $.sibling(text_2);
+	var text_4 = $.sibling(text_3);
+	var text_5 = $.child(text_4, true);
+
+	$.reset(text_4);
+
+	var text_6 = $.sibling(text_4);
+	var text_7 = $.sibling(text_6);
+	var text_8 = $.sibling(text_7);
+
+	$.set_attribute(text_8, 'x', 40);
+
+	var text_9 = $.sibling(text_8);
+
+	$.set_attribute(text_9, 'x', 40);
+	$.reset(g_3);
+	$.reset(g);
+
+	$.template_effect(() => {
+		$.set_attribute(g, 'transform', `translate(${$$props.height ?? ''}, 0) scale(-1, 1)`);
+		$.set_attribute(text_2, 'x', $$props.height / 2);
+		$.set_attribute(text_3, 'x', $$props.height / 2);
+		$.set_attribute(text_4, 'x', $$props.height / 2);
+		$.set_text(text_5, $$props.title[0]);
+		$.set_attribute(text_6, 'x', $$props.height - 40);
+		$.set_attribute(text_7, 'x', $$props.height - 40);
+	});
+
+	$.append($$anchor, g);
+	$.pop();
+}
+
+var root_1$5 = $.from_svg(`<g><line y2="0" stroke="#d3d3d3" stroke-dasharray="3,3"></line></g><g><line x2="0" stroke="#d3d3d3" stroke-dasharray="3,3"></line></g>`, 1);
+var root$6 = $.from_svg(`<g class="grid"></g>`);
+
+function Grid($$anchor, $$props) {
+	$.push($$props, true);
+
+	let xygridLines = $.derived(() => $$props.scale.ticks($$props.ncells / 2));
+	var g = root$6();
+
+	$.each(g, 21, () => $.get(xygridLines), $.index, ($$anchor, yline, index) => {
+		var fragment = root_1$5();
+		var g_1 = $.first_child(fragment);
+		var line = $.child(g_1);
+
+		$.set_attribute(line, 'opacity', index === 0 ? 0 : 1);
+		$.reset(g_1);
+
+		var g_2 = $.sibling(g_1);
+		var line_1 = $.child(g_2);
+
+		$.set_attribute(line_1, 'opacity', index === 0 ? 0 : 1);
+		$.reset(g_2);
+
+		$.template_effect(
+			($0, $1) => {
+				$.set_attribute(g_1, 'transform', `translate(${$0 ?? ''}, 0)`);
+				$.set_attribute(line, 'y1', $$props.height);
+				$.set_attribute(g_2, 'transform', `translate(0, ${$1 ?? ''})`);
+				$.set_attribute(line_1, 'x1', $$props.height);
+			},
+			[
+				() => $$props.wxy($.get(yline)),
+				() => $$props.wxy($.get(yline))
+			]
+		);
+
+		$.append($$anchor, fragment);
+	});
+
+	$.reset(g);
+	$.append($$anchor, g);
+	$.pop();
+}
+
+var root_1$4 = $.from_svg(`<g><path fill="none" stroke="grey" stroke-width="0.9" stroke-opacity="0.9"></path></g>`);
+var root$5 = $.from_svg(`<g class="contours"></g>`);
+
+function Contours($$anchor, $$props) {
+	$.push($$props, true);
+
+	function alpha_norm_type2(x1, x2, alpha) {
+		if (alpha == 0) {
+			return Math.abs(Math.log(x1 / x2));
+		} else if (alpha === Infinity) {
+			return x1 === x2 ? 0 : Math.max(x1, x2);
+		} else {
+			const prefactor = (alpha + 1) / alpha;
+			const power = 1 / (alpha + 1);
+
+			return prefactor * Math.abs(Math.pow(x1, alpha) - Math.pow(x2, alpha)) ** power;
+		}
+	}
+
+	function make_grid(Ninset, tmpr1, tmpr2, alpha, rtd) {
+		// No matrix in js :(
+		// we could try to do like in the original d3.contour, where they do
+		// calculation to work with a flat array. 
+		// Instead we flatten that List of list later.
+		const deltamatrix = Array.from({ length: Ninset }, () => Array(Ninset).fill(0));
+
+		// Populate deltamatrix with alpha_norm_type2 values and set the diagonal and adjacent values
+		for (let i = 0; i < Ninset; i++) {
+			for (let j = 0; j < Ninset; j++) {
+				const divElem = alpha_norm_type2(1 / tmpr1[i], 1 / tmpr2[j], alpha);
+
+				deltamatrix[i][j] = divElem / rtd.normalization;
+			}
+
+			//     %% prevent contours from crossing the center line
+			deltamatrix[i][i] = -1;
+
+			// Set adjacent diagonal elements to -1 if within bounds
+			if (i < Ninset - 1) {
+				deltamatrix[i][i + 1] = -1;
+				deltamatrix[i + 1][i] = -1;
+			}
+		}
+
+		return deltamatrix;
+	}
+
+	function filter_contours(tmpcontours, Ninset, maxlog10) {
+		const chart2val = d3.scaleLinear().domain([0, Ninset]).range([
+			0, // unit: km
+			maxlog10
+		]); // unit: pixels
+
+		let out = [];
+
+		// Extract Coordinates:
+		tmpcontours.forEach((contour) => {
+			contour.coordinates.forEach((pair, i) => {
+				const tmpr1 = pair[0].map((d) => d[0]); // x-coordinates
+				const tmpr2 = pair[0].map((d) => d[1]); // y-coordinates
+				// Array to store filtered coordinate pairs in zipped format
+				const filteredPairs = [];
+
+				// Loop through each coordinate and calculate `tmpxrot`
+				for (let index = 0; index < tmpr1.length - 1; index++) {
+					const x1 = chart2val(tmpr1[index]);
+					const x2 = chart2val(tmpr2[index]);
+					// Calculate tmpxrot 
+					const tmpxrot = Math.abs(x2 - x1) / Math.sqrt(2);
+
+					// If the condition is met, add the coordinate pair [x1, x2] to `filteredPairs`
+					if (Math.abs(tmpxrot) >= 0.1 & x1 != maxlog10 & x2 != 0 & x1 != 0 & x2 != maxlog10) {
+						filteredPairs.push([x1, x2]);
+					}
+				}
+
+				// Only push to `out` if we have filtered pairs
+				if (filteredPairs.length > 0) {
+					out.push(filteredPairs); // Store each set of filtered pairs in `out`
+				}
+			});
+		});
+
+		return out;
+	}
+
+	function get_contours(alpha, maxlog10) {
+		// only for alpha != 0 and alpha != Infinity
+		const Ninset = 10 ** 3;
+		const tmpr1 = d3.range(0, 1000).map((d) => Math.pow(10, d / 999 * 5));
+		const tmpr2 = d3.range(0, 1000).map((d) => Math.pow(10, d / 999 * 5));
+		// Create a scale to generate `Ncontours + 2` values linearly spaced between 1 and `tmpr1Length`
+		const Ncontours = 10;
+		const scale = d3.scaleLinear().domain([0, Ncontours + 1]).range([1, tmpr1.length]);
+		const contour_indices = d3.range(Ncontours + 2).map((i) => Math.round(scale(i)));
+		const grid = make_grid(Ninset, tmpr1, tmpr2, alpha, $$props.rtd);
+		const indices = contour_indices.slice(1, -1);
+		const lastRow = grid[grid.length - 1];
+		const heights = indices.map((index) => lastRow[index]);
+		// equivalent to `contourc`
+		// we first create a generator
+		// then we pass to Z (flatDeltamatrix)
+		const logTmpr = tmpr1.map(Math.log10);
+		const contourGenerator = d3.contours().size([logTmpr.length, logTmpr.length]).thresholds(heights); // Set the grid size
+		// I guess this is equivalent? These are levels.
+		const flatDeltamatrix = grid.flat();
+		const tmpcontours = contourGenerator(flatDeltamatrix);
+
+		return filter_contours(tmpcontours, Ninset, maxlog10);
+	}
+
+	let mycontours = $.derived(() => get_contours($$props.alpha, $$props.maxlog10));
+	const x = $.derived(() => d3.scaleLinear([0, $$props.maxlog10], [0, $$props.DiamondInnerHeight]));
+	const y = $.derived(() => d3.scaleLinear([$$props.maxlog10, 0], [$$props.DiamondInnerHeight, 0]));
+	const pathData = d3.line().x((d, i) => $.get(x)(d[0])).y((d, i) => $.get(y)(d[1]));
+	var g = root$5();
+
+	$.each(g, 21, () => $.get(mycontours), $.index, ($$anchor, contour) => {
+		var g_1 = root_1$4();
+		var path = $.child(g_1);
+
+		$.reset(g_1);
+
+		$.template_effect(
+			($0, $1, $2) => {
+				$.set_attribute(g_1, 'transform', `translate(${$0 ?? ''}, ${$1 ?? ''})`);
+				$.set_attribute(path, 'd', $2);
+			},
+			[
+				() => $.get(x)($.get(contour)),
+				() => $.get(y)($.get(contour)),
+				() => pathData($.get(contour))
+			]
+		);
+
+		$.append($$anchor, g_1);
+	});
+
+	$.reset(g);
+	$.append($$anchor, g);
+	$.pop();
+}
+
+var root_1$3 = $.from_svg(`<rect stroke="black" stroke-width="0.2"></rect>`);
+var root_2$3 = $.from_svg(`<g class="diamond-lab"><text font-size="10"> </text></g>`);
+var root$4 = $.from_svg(`<g class="diamond-chart"><polygon fill="#89CFF0" fill-opacity="0.2" stroke="black" stroke-width="0.5"></polygon><polygon fill="grey" fill-opacity="0.2" stroke="black" stroke-width="0.5"></polygon><!><!><!><!><!><!></g>`);
+
+function Diamond($$anchor, $$props) {
+	$.push($$props, true);
+
+	function get_relevant_types(diamond_dat) {
+		const ncells = 60;
+		const bin_size = 1.5;
+		const cummulative_bin = d3.range(0, ncells, bin_size);
+		const relevant_types = [];
+
+		for (let sys of ["right", "left"]) {
+			for (let i = 1; i < cummulative_bin.length; i++) {
+				const filtered_dat = diamond_dat.filter((d) => d.value > 0 && d.which_sys == sys).filter((d) => d.coord_on_diag >= cummulative_bin[i - 1] && d.coord_on_diag < cummulative_bin[i]);
+
+				if (filtered_dat.length > 0) {
+					const cos_dists = filtered_dat.map((d) => d.cos_dist);
+
+					const max_dist = cos_dists.reduce((a, b) => {
+						return Math.max(a, b);
+					});
+
+					const max_dist_idx = cos_dists.indexOf(max_dist);
+					const name = d3.shuffle(filtered_dat[max_dist_idx]['types'].split(","))[0];
+
+					relevant_types.push(name);
+				}
+			}
+		}
+
+		return relevant_types;
+	}
+
+	function rin(arr1, arr2) {
+		// Find element arr1 presents in arr2, i.e. arr1 %in% arr2
+		//
+		// examples
+		// A = ["bob", "george", "jesus"]
+		// B = ["bob", "jesus", "terrence"]
+		// rin(A, B)
+		// [true, false, true]
+		return Array.from(arr1, (x) => {
+			return arr2.indexOf(x) == -1 ? false : true;
+		});
+	}
+
+	// Wrangling data
+	let relevant_types = $.derived(() => get_relevant_types($$props.diamond_dat));
+	// Extracting constant
+	let max_rank_raw = $.derived(() => d3.range(d3.max($$props.diamond_count, (d) => d.x1)));
+	let max_rank = $.derived(() => d3.max($$props.diamond_dat, (d) => d.rank_L[1]));
+	let rounded_max_rank = $.derived(() => 10 ** Math.ceil(Math.max(Math.log10($.get(max_rank)))));
+	let ncells = $.derived(() => d3.max($.get(max_rank_raw)));
+	let xyDomain = $.derived(() => [1, $.get(rounded_max_rank)]);
+	// All the Scales!
+	let linScale = $.derived(() => d3.scaleLinear().domain([0, $.get(ncells) - 1]).range([0, $$props.DiamondInnerHeight]));
+	let wxy = $.derived(() => d3.scaleBand().domain($.get(max_rank_raw)).range([0, $$props.DiamondInnerHeight]));
+	let logScale = $.derived(() => d3.scaleLog().domain($.get(xyDomain)).range([0, $$props.DiamondInnerHeight]).nice());
+	let xy = $.derived(() => d3.scaleBand().domain($.get(max_rank_raw)).range([0, $$props.trueDiamondHeight]));
+	let color_scale = d3.scaleSequentialLog().domain([$.get(rounded_max_rank), 1]).interpolator(d3.interpolateInferno);
+
+	// Background colors
+	let blue_triangle = [
+		[
+			$$props.DiamondInnerHeight,
+			$$props.DiamondInnerHeight
+		],
+		[0, 0],
+		[0, $$props.DiamondInnerHeight]
+	].join(" ");
+
+	let grey_triangle = [
+		[
+			$$props.DiamondInnerHeight,
+			$$props.DiamondInnerHeight
+		],
+		[0, 0],
+		[$$props.DiamondInnerHeight, 0]
+	].join(" ");
+
+	function filter_labs(d, relevant_types) {
+		return rin(relevant_types, d.types.split(",")).some((x) => x === true);
+	}
+
+	var g = root$4();
+	var polygon = $.child(g);
+	var polygon_1 = $.sibling(polygon);
+	var node = $.sibling(polygon_1);
+
+	AxisX(node, {
+		get height() {
+			return $$props.DiamondInnerHeight;
+		},
+		get scale() {
+			return $.get(logScale);
+		},
+		get title() {
+			return $$props.title;
+		}
+	});
+
+	var node_1 = $.sibling(node);
+
+	AxisY(node_1, {
+		get height() {
+			return $$props.DiamondInnerHeight;
+		},
+		get scale() {
+			return $.get(logScale);
+		},
+		get title() {
+			return $$props.title;
+		}
+	});
+
+	var node_2 = $.sibling(node_1);
+
+	Grid(node_2, {
+		get height() {
+			return $$props.DiamondInnerHeight;
+		},
+		get wxy() {
+			return $.get(wxy);
+		},
+		get ncells() {
+			return $.get(ncells);
+		},
+		get scale() {
+			return $.get(linScale);
+		}
+	});
+
+	var node_3 = $.sibling(node_2);
+
+	$.each(node_3, 17, () => $$props.diamond_dat, $.index, ($$anchor, d) => {
+		var rect = root_1$3();
+
+		$.template_effect(
+			($0, $1, $2, $3, $4) => {
+				$.set_attribute(rect, 'x', $0);
+				$.set_attribute(rect, 'y', $1);
+				$.set_attribute(rect, 'width', $2);
+				$.set_attribute(rect, 'height', $3);
+				$.set_attribute(rect, 'fill', $4);
+				$.set_attribute(rect, 'opacity', $.get(d).value === null ? 0 : 1.);
+			},
+			[
+				() => $.get(xy)($.get(d).x1),
+				() => $.get(xy)($.get(d).y1),
+				() => $.get(xy).bandwidth(),
+				() => $.get(xy).bandwidth(),
+				() => color_scale($.get(d).value)
+			]
+		);
+
+		$.append($$anchor, rect);
+	});
+
+	var node_4 = $.sibling(node_3);
+
+	$.each(node_4, 17, () => $$props.diamond_dat.filter((d) => filter_labs(d, $.get(relevant_types))), $.index, ($$anchor, d) => {
+		var g_1 = root_2$3();
+		var text = $.child(g_1);
+
+		$.set_attribute(text, 'dy', 20);
+
+		var text_1 = $.child(text, true);
+
+		$.reset(text);
+		$.reset(g_1);
+
+		$.template_effect(
+			($0, $1, $2, $3, $4, $5) => {
+				$.set_attribute(g_1, 'transform', `
+            scale(1,-1) 
+            rotate(-90) 
+            rotate(-45, ${$0 ?? ''}, ${$1 ?? ''}) 
+            translate(${$2 ?? ''}, 0)
+        `);
+
+				$.set_attribute(text, 'x', $3);
+				$.set_attribute(text, 'y', $4);
+				$.set_attribute(text, 'text-anchor', $.get(d).x1 - $.get(d).y1 <= 0 ? "start" : "end");
+				$.set_text(text_1, $5);
+			},
+			[
+				() => $.get(xy)($.get(d).x1),
+				() => $.get(xy)($.get(d).y1),
+				() => $.get(d).which_sys === "right" ? $.get(xy)(Math.sqrt($.get(d).cos_dist)) * 1.5 : -$.get(xy)(Math.sqrt($.get(d).cos_dist)) * 1.5,
+				() => $.get(xy)($.get(d).x1),
+				() => Number.isInteger($.get(d).coord_on_diag) ? $.get(xy)($.get(d).y1) : $.get(xy)($.get(d).y1) - 1,
+				() => $.get(d).types.split(",")[0]
+			]
+		);
+
+		$.append($$anchor, g_1);
+	});
+
+	var node_5 = $.sibling(node_4);
+
+	Contours(node_5, {
+		get alpha() {
+			return $$props.alpha;
+		},
+		get maxlog10() {
+			return $$props.maxlog10;
+		},
+		get rtd() {
+			return $$props.rtd;
+		},
+		get DiamondInnerHeight() {
+			return $$props.DiamondInnerHeight;
+		}
+	});
+
+	$.reset(g);
+
+	$.template_effect(() => {
+		$.set_attribute(g, 'transform', `translate(360, 0) scale (-1,1) rotate(45) translate(${$$props.margin.inner / 2}, ${$$props.margin.inner / 2})`);
+		$.set_attribute(polygon, 'points', blue_triangle);
+		$.set_attribute(polygon_1, 'points', grey_triangle);
+	});
+
+	$.append($$anchor, g);
+	$.pop();
+}
+
+var root_1$2 = $.from_svg(`<g class="tick"><line y1="0" stroke="hsla(212, 10%, 53%, 1)" stroke-opacity="0.2"> </line><text y="-12" font-size="0.8em"> </text></g>`);
+var root_2$2 = $.from_svg(`<rect></rect><text dy="14" font-size="0.7em"> </text>`, 1);
+var root$3 = $.from_svg(`<g class="barChart-container svelte-37sv8o"><g class="axis x"></g><!></g>`);
+
+function Wordshift($$anchor, $$props) {
+	$.push($$props, true);
+
+	let margin = { top: 80, left: 140, right: 50, bottom: 10 };
+	let width = 640;
+	let yPadding = 0.2;
+	let Y = $.derived(() => d3.map($$props.barData, (d) => d.type));
+	let max_shift = $.derived(() => d3.max($$props.barData, (d) => Math.abs(d.metric)) * 1.5);
+	let xDomain = $.derived(() => [-$.get(max_shift), $.get(max_shift)]);
+	let yDomain = $.derived(() => new d3.InternSet($.get(Y)));
+
+	let xRange = $.derived(() => [
+		$$props.DashboardWidth - width + margin.left,
+		$$props.DashboardWidth - margin.right
+	]);
+
+	let yRange = $.derived(() => [
+		margin.top,
+		$$props.DashboardHeight - margin.bottom
+	]);
+
+	let xScale = $.derived(() => d3.scaleLinear().domain($.get(xDomain)).range($.get(xRange)));
+	let yScale = $.derived(() => d3.scaleBand($.get(yDomain), $.get(yRange)).padding(yPadding));
+	let xTicks = $.derived(() => $.get(xScale).ticks(width / 80));
+	const colors = ["lightgrey", "lightblue"];
+	var g = root$3();
+	var g_1 = $.child(g);
+
+	$.each(g_1, 21, () => $.get(xTicks), $.index, ($$anchor, tick) => {
+		var g_2 = root_1$2();
+		var line = $.child(g_2);
+		var text = $.child(line, true);
+
+		$.reset(line);
+
+		var text_1 = $.sibling(line);
+		var text_2 = $.child(text_1);
+
+		$.reset(text_1);
+		$.reset(g_2);
+
+		$.template_effect(
+			($0, $1, $2) => {
+				$.set_attribute(line, 'x1', $0);
+				$.set_attribute(line, 'x2', $1);
+				$.set_attribute(line, 'y2', $$props.DashboardHeight - margin.top - margin.bottom);
+				$.set_text(text, $.get(tick));
+				$.set_attribute(text_1, 'x', $2);
+				$.set_text(text_2, `${$.get(tick) * 100}%`);
+			},
+			[
+				() => $.get(xScale)($.get(tick)),
+				() => $.get(xScale)($.get(tick)),
+				() => $.get(xScale)($.get(tick))
+			]
+		);
+
+		$.append($$anchor, g_2);
+	});
+
+	$.reset(g_1);
+
+	var node = $.sibling(g_1);
+
+	$.each(node, 17, () => $$props.barData, $.index, ($$anchor, d) => {
+		var fragment = root_2$2();
+		var rect = $.first_child(fragment);
+		var text_3 = $.sibling(rect);
+		var text_4 = $.child(text_3, true);
+
+		$.reset(text_3);
+
+		$.template_effect(
+			($0, $1, $2, $3, $4, $5) => {
+				$.set_attribute(rect, 'x', $0);
+				$.set_attribute(rect, 'y', $1);
+				$.set_attribute(rect, 'fill', colors[$.get(d).metric > 0 ? colors.length - 1 : 0]);
+				$.set_attribute(rect, 'width', $2);
+				$.set_attribute(rect, 'height', $3);
+				$.set_attribute(text_3, 'x', $4);
+				$.set_attribute(text_3, 'y', $5);
+				$.set_text(text_4, $.get(d).type);
+			},
+			[
+				() => Math.min($.get(xScale)(0), $.get(xScale)($.get(d).metric)),
+				() => $.get(yScale)($.get(d).type),
+				() => Math.abs($.get(xScale)($.get(d).metric) - $.get(xScale)(0)),
+				() => $.get(yScale).bandwidth(),
+				() => Math.min($.get(xScale)(0), $.get(xScale)($.get(d).metric)),
+				() => $.get(yScale)($.get(d).type)
+			]
+		);
+
+		$.append($$anchor, fragment);
+	});
+
+	$.reset(g);
+	$.template_effect(() => $.set_attribute(g_1, 'transform', `translate(0, ${margin.top})`));
+	$.append($$anchor, g);
+	$.pop();
+}
+
+var root_1$1 = $.from_svg(`<rect></rect><text opacity="0.5" dy="0.35em" font-size="10"> </text>`, 1);
+var root_2$1 = $.from_svg(`<g class="diverging-ticks"><text dy="-.9em" dx="-3em" font-size="10"> </text></g>`);
+var root$2 = $.from_svg(`<g class="balance-chart"><!><!></g>`);
+
+function DivergingBarChart($$anchor, $$props) {
+	$.push($$props, true);
+
+	const setdiff = (x, y) => {
+		let a = new Set(x);
+		let b = new Set(y);
+
+		return new Set([...a].filter((x) => !b.has(x)));
+	};
+
+	const union = (x, y) => {
+		let a = new Set(x);
+		let b = new Set(y);
+
+		return new Set([...a, ...b]);
+	};
+
+	let types_1 = $.derived(() => $$props.test_elem_1.map((d) => d.types));
+	let types_2 = $.derived(() => $$props.test_elem_2.map((d) => d.types));
+	let union_types = $.derived(() => union($.get(types_1), $.get(types_2)));
+	let tot_types = $.derived(() => $.get(types_1).length + $.get(types_2).length);
+	let width = 200;
+	let margin = { right: 40, top: 30, left: 40, bottom: 10 };
+	let yPadding = 0.5;
+	let colors = ["lightgrey", "lightblue"];
+
+	let dat = $.proxy([
+		{
+			y_coord: "total count",
+			frequency: +($.get(types_2).length / $.get(tot_types)).toFixed(3)
+		},
+		{
+			y_coord: "total count",
+			frequency: -($.get(types_1).length / $.get(tot_types)).toFixed(3)
+		},
+		{
+			y_coord: "all names",
+			frequency: +($.get(types_2).length / $.get(union_types).size).toFixed(3)
+		},
+		{
+			y_coord: "all names",
+			frequency: -($.get(types_1).length / $.get(union_types).size).toFixed(3)
+		},
+		{
+			y_coord: "exclusive names",
+			frequency: +(setdiff($.get(types_2), $.get(types_1)).size / $.get(types_2).length).toFixed(3)
+		},
+		{
+			y_coord: "exclusive names",
+			frequency: -(setdiff($.get(types_1), $.get(types_2)).size / $.get(types_1).length).toFixed(3)
+		}
+	]);
+
+	let X = $.derived(() => dat.map((d) => d.frequency));
+	let Y = $.derived(() => dat.map((d) => d.y_coord));
+	let xRange = $.derived(() => [margin.left, width - margin.right]);
+	let xDomain = $.derived(() => extent($.get(X)));
+	let yDomain = $.derived(() => new InternSet($.get(Y)));
+	let height = $.derived(() => Math.ceil(($.get(yDomain).size + yPadding) * 25) + margin.top + margin.bottom);
+	let I = $.derived(() => range($.get(X).length).filter((i) => $.get(yDomain).has($.get(Y)[i])));
+	$.derived(() => rollup($.get(I), ([i]) => $.get(X)[i], (i) => $.get(Y)[i]));
+	let xScale = $.derived(() => scaleLinear($.get(xDomain), $.get(xRange)));
+	let yScale = $.derived(() => scaleBand().domain($.get(yDomain)).range([margin.top, $.get(height) - margin.bottom]).padding(yPadding));
+	let format = $.derived(() => $.get(xScale).tickFormat(100, "%"));
+	var g = root$2();
+	var node = $.child(g);
+
+	$.each(node, 17, () => dat, $.index, ($$anchor, d, i) => {
+		var fragment = root_1$1();
+		var rect = $.first_child(fragment);
+		var text_1 = $.sibling(rect);
+		var text_2 = $.child(text_1, true);
+
+		$.reset(text_1);
+
+		$.template_effect(
+			($0, $1, $2, $3, $4, $5, $6) => {
+				$.set_attribute(rect, 'x', $0);
+				$.set_attribute(rect, 'y', $1);
+				$.set_attribute(rect, 'fill', colors[$.get(X)[i] > 0 ? colors.length - 1 : 0]);
+				$.set_attribute(rect, 'width', $2);
+				$.set_attribute(rect, 'height', $3);
+				$.set_attribute(text_1, 'x', $4);
+				$.set_attribute(text_1, 'y', $5);
+				$.set_attribute(text_1, 'text-anchor', $.get(d).frequency < 0 ? "end" : "start");
+				$.set_text(text_2, $6);
+			},
+			[
+				() => Math.min($.get(xScale)(0), $.get(xScale)($.get(d).frequency)),
+				() => $.get(yScale)($.get(d).y_coord),
+				() => Math.abs($.get(xScale)($.get(d).frequency) - $.get(xScale)(0)),
+				() => $.get(yScale).bandwidth(),
+				() => $.get(xScale)($.get(X)[i]) + Math.sign($.get(X)[i] - 0) * 4,
+				() => $.get(yScale)($.get(Y)[i]) + $.get(yScale).bandwidth() / 2,
+				() => $.get(format)(Math.abs($.get(d).frequency))
+			]
+		);
+
+		$.append($$anchor, fragment);
+	});
+
+	var node_1 = $.sibling(node);
+
+	$.each(node_1, 17, () => $.get(yScale).domain(), $.index, ($$anchor, text) => {
+		var g_1 = root_2$1();
+		var text_3 = $.child(g_1);
+		var text_4 = $.child(text_3, true);
+
+		$.reset(text_3);
+		$.reset(g_1);
+
+		$.template_effect(
+			($0, $1) => {
+				$.set_attribute(text_3, 'x', $0);
+				$.set_attribute(text_3, 'y', $1);
+				$.set_text(text_4, $.get(text));
+			},
+			[
+				() => $.get(xScale)(0),
+				() => $.get(yScale)($.get(text)) + $.get(yScale).bandwidth() / 2
+			]
+		);
+
+		$.append($$anchor, g_1);
+	});
+
+	$.reset(g);
+	$.template_effect(() => $.set_attribute(g, 'transform', `translate(${$$props.DiamondWidth - 75}, ${$$props.DiamondHeight + 75})`));
+	$.append($$anchor, g);
+	$.pop();
+}
+
+var root_1 = $.from_svg(`<rect stroke="whitesmoke" stroke-width="1"></rect>`);
+var root_3 = $.from_svg(`<g class="legend-title"><text font-size="13">Counts per cell</text></g>`);
+var root_2 = $.from_svg(`<g class="legend-text"><text font-size="10" dx="20"> </text></g><!>`, 1);
+var root$1 = $.from_svg(`<g class="legend-container"></g><!>`, 1);
+
+function Legend($$anchor, $$props) {
+	$.push($$props, true);
+
+	const N_CATEGO = 20;
+	const myramp = range(N_CATEGO).map((i) => rgb(interpolateInferno(i / (N_CATEGO - 1))).hex());
+	const color = scaleOrdinal(range(N_CATEGO), myramp);
+	let height = 370;
+	const margin = { right: 40, top: 65, left: 10 };
+	let innerHeight = $.derived(() => height - margin.top - margin.right);
+	let max_rank = $.derived(() => max($$props.diamond_dat, (d) => d.rank_L[1]));
+	let y = $.derived(() => scaleBand().domain(color.domain().reverse()).rangeRound([0, $.get(innerHeight)]));
+
+	let logY = $.derived(() => scaleLog().domain([
+		1,
+		10 ** Math.ceil(Math.max(Math.log10($.get(max_rank))) - 1)
+	]).rangeRound([0, $.get(innerHeight)]).nice());
+
+	let logFormat10 = $.derived(() => $.get(logY).tickFormat());
+	let yTicks = $.derived(() => $.get(logY).ticks());
+	var fragment = root$1();
+	var g = $.first_child(fragment);
+
+	$.each(g, 21, () => color.domain(), $.index, ($$anchor, d) => {
+		var rect = root_1();
+
+		$.set_attribute(rect, 'x', 0);
+		$.set_attribute(rect, 'width', 14);
+		$.set_attribute(rect, 'height', 13);
+
+		$.template_effect(
+			($0, $1) => {
+				$.set_attribute(rect, 'y', $0);
+				$.set_attribute(rect, 'fill', $1);
+			},
+			[
+				() => $.get(y)($.get(d)),
+				() => color($.get(d))
+			]
+		);
+
+		$.append($$anchor, rect);
+	});
+
+	$.reset(g);
+
+	var node = $.sibling(g);
+
+	$.each(node, 17, () => $.get(yTicks), $.index, ($$anchor, tick, i) => {
+		var fragment_1 = root_2();
+		var g_1 = $.first_child(fragment_1);
+		var text = $.child(g_1);
+		var text_1 = $.child(text, true);
+
+		$.reset(text);
+		$.reset(g_1);
+
+		var node_1 = $.sibling(g_1);
+
+		{
+			var consequent = ($$anchor) => {
+				var g_2 = root_3();
+				var text_2 = $.child(g_2);
+
+				$.set_attribute(text_2, 'dy', "9");
+				$.reset(g_2);
+
+				$.template_effect(($0) => $.set_attribute(g_2, 'transform', `translate(${margin.left}, ${$0 ?? ''})`), [
+					() => $$props.DiamondHeight + $.get(logY)($.get(tick)) - margin.top
+				]);
+
+				$.append($$anchor, g_2);
+			};
+
+			$.if(node_1, ($$render) => {
+				if (i === $.get(yTicks).length - 1) $$render(consequent);
+			});
+		}
+
+		$.template_effect(
+			($0, $1) => {
+				$.set_attribute(g_1, 'transform', `translate(${margin.left}, ${$0 ?? ''})`);
+				$.set_attribute(text, 'dy', $.get(yTicks).length - 1 == i ? "-3" : "13");
+				$.set_text(text_1, $1);
+			},
+			[
+				() => $$props.DiamondHeight + $.get(logY)($.get(tick)) - margin.top,
+				() => $.get(logFormat10)($.get(tick))
+			]
+		);
+
+		$.append($$anchor, fragment_1);
+	});
+
+	$.template_effect(() => $.set_attribute(g, 'transform', `translate(${margin.left}, ${$$props.DiamondHeight - margin.top})`));
+	$.append($$anchor, fragment);
+	$.pop();
+}
+
+var root = $.from_html(`<div><svg id="allotaxonometer-svg" class="svelte-n6o6ey"><!><!><!><!></svg></div>`);
+
+function Dashboard($$anchor, $$props) {
+	let diamond_count = $.prop($$props, 'diamond_count', 19, () => []),
+		diamond_dat = $.prop($$props, 'diamond_dat', 19, () => []),
+		barData = $.prop($$props, 'barData', 19, () => []),
+		test_elem_1 = $.prop($$props, 'test_elem_1', 3, null),
+		test_elem_2 = $.prop($$props, 'test_elem_2', 3, null),
+		height = $.prop($$props, 'height', 3, 815),
+		width = $.prop($$props, 'width', 3, 1200),
+		DiamondHeight = $.prop($$props, 'DiamondHeight', 3, 600),
+		DiamondWidth = $.prop($$props, 'DiamondWidth', 3, 600),
+		DiamondInnerHeight = $.prop($$props, 'DiamondInnerHeight', 3, 440),
+		margin = $.prop($$props, 'margin', 19, () => ({ inner: 160, diamond: 40 })),
+		trueDiamondHeight = $.prop($$props, 'trueDiamondHeight', 3, 400),
+		alpha = $.prop($$props, 'alpha', 3, 0.58),
+		maxlog10 = $.prop($$props, 'maxlog10', 3, 0),
+		rtd = $.prop($$props, 'rtd', 3, null),
+		title = $.prop($$props, 'title', 19, () => ['System 1', 'System 2']),
+		className = $.prop($$props, 'class', 3, ''),
+		style = $.prop($$props, 'style', 3, ''),
+		showDiamond = $.prop($$props, 'showDiamond', 3, true),
+		showWordshift = $.prop($$props, 'showWordshift', 3, true),
+		showDivergingBar = $.prop($$props, 'showDivergingBar', 3, true),
+		showLegend = $.prop($$props, 'showLegend', 3, true),
+		restProps = $.rest_props($$props, [
+			'$$slots',
+			'$$events',
+			'$$legacy',
+			'diamond_count',
+			'diamond_dat',
+			'barData',
+			'test_elem_1',
+			'test_elem_2',
+			'height',
+			'width',
+			'DiamondHeight',
+			'DiamondWidth',
+			'DiamondInnerHeight',
+			'margin',
+			'trueDiamondHeight',
+			'alpha',
+			'maxlog10',
+			'rtd',
+			'title',
+			'class',
+			'style',
+			'showDiamond',
+			'showWordshift',
+			'showDivergingBar',
+			'showLegend'
+		]);
+
+	var div = root();
+
+	$.attribute_effect(
+		div,
+		() => ({
+			class: `allotaxonometer-dashboard ${className() ?? ''}`,
+			style: style(),
+			...restProps
+		}),
+		undefined,
+		'svelte-n6o6ey'
+	);
+
+	var svg = $.child(div);
+	var node = $.child(svg);
+
+	{
+		var consequent = ($$anchor) => {
+			Diamond($$anchor, {
+				get diamond_count() {
+					return diamond_count();
+				},
+				get diamond_dat() {
+					return diamond_dat();
+				},
+				get DiamondInnerHeight() {
+					return DiamondInnerHeight();
+				},
+				get margin() {
+					return margin();
+				},
+				get trueDiamondHeight() {
+					return trueDiamondHeight();
+				},
+				get alpha() {
+					return alpha();
+				},
+				get maxlog10() {
+					return maxlog10();
+				},
+				get rtd() {
+					return rtd();
+				},
+				get title() {
+					return title();
+				}
+			});
+		};
+
+		$.if(node, ($$render) => {
+			if (showDiamond()) $$render(consequent);
+		});
+	}
+
+	var node_1 = $.sibling(node);
+
+	{
+		var consequent_1 = ($$anchor) => {
+			Wordshift($$anchor, {
+				get barData() {
+					return barData();
+				},
+				get DashboardHeight() {
+					return height();
+				},
+				get DashboardWidth() {
+					return width();
+				}
+			});
+		};
+
+		$.if(node_1, ($$render) => {
+			if (showWordshift()) $$render(consequent_1);
+		});
+	}
+
+	var node_2 = $.sibling(node_1);
+
+	{
+		var consequent_2 = ($$anchor) => {
+			DivergingBarChart($$anchor, {
+				get test_elem_1() {
+					return test_elem_1();
+				},
+				get test_elem_2() {
+					return test_elem_2();
+				},
+				get DiamondHeight() {
+					return DiamondHeight();
+				},
+				get DiamondWidth() {
+					return DiamondWidth();
+				}
+			});
+		};
+
+		$.if(node_2, ($$render) => {
+			if (showDivergingBar()) $$render(consequent_2);
+		});
+	}
+
+	var node_3 = $.sibling(node_2);
+
+	{
+		var consequent_3 = ($$anchor) => {
+			Legend($$anchor, {
+				get diamond_dat() {
+					return diamond_dat();
+				},
+				get DiamondHeight() {
+					return DiamondHeight();
+				}
+			});
+		};
+
+		$.if(node_3, ($$render) => {
+			if (showLegend()) $$render(consequent_3);
+		});
+	}
+
+	$.reset(svg);
+	$.reset(div);
+
+	$.template_effect(() => {
+		$.set_attribute(svg, 'height', height());
+		$.set_attribute(svg, 'width', width());
+	});
+
+	$.append($$anchor, div);
+}
+
+export { Dashboard, Diamond, DivergingBarChart, Legend, Wordshift };

package/dist/style.css

@@ -0,0 +1,28 @@
+
+	.xlab.svelte-1y8xk6i {
+		text-anchor: middle;
+		font-size: 14px;
+		fill: rgb(0, 0, 0);
+	}
+  
+	.ylab.svelte-1y8visx {
+		text-anchor: middle;
+		font-size: 14px;
+		fill: rgb(0, 0, 0);
+	}
+  
+    .barChart-container.svelte-37sv8o {
+        position: relative;
+    }
+
+  .allotaxonometer-dashboard.svelte-n6o6ey {
+    /* Minimal base styles - users can override */
+    display: block;
+    width: 100%;
+  }
+  
+  svg.svelte-n6o6ey {
+    display: block;
+    width: 100%;
+    height: auto;
+  }

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "allotaxonometer-ui",
+  "version": "0.1.0",
+  "description": "Headless UI components for allotaxonometer visualizations",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": ["dist", "README.md"],
+  "keywords": ["svelte", "visualization", "allotaxonometer", "dashboard"],
+  "author": "Your Name <your.email@example.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yourusername/allotaxonometer-ui.git"
+  },
+  "homepage": "https://github.com/yourusername/allotaxonometer-ui#readme",
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "svelte": "^5.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.3"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "prepublishOnly": "npm run build"
+  }
+}