D3 renders of the test data

js/viz.jsx

@@ -0,0 +1,240 @@
+import * as d3 from "d3";
+import { h, Fragment } from 'start-dom-jsx'
+
+// const projection = d3.geoAitoff();
+
+function degreesToRadians(degrees) {
+	return (degrees * Math.PI) / 180;
+}
+
+function latLonToOffsets(latitude, longitude, mapWidth, mapHeight) {
+	const FE = 180; // false easting
+	const radius = mapWidth / (2 * Math.PI);
+
+	const latRad = degreesToRadians(latitude);
+	const lonRad = degreesToRadians(longitude + FE);
+
+	const x = lonRad * radius;
+
+	const yFromEquator = radius * Math.log(Math.tan(Math.PI / 4 + latRad / 2));
+	const y = mapHeight / 2 - yFromEquator;
+
+	return { x, y };
+}
+
+export function viz(vizEl) {
+	console.log(d3)
+	// vizEl.appendChild(<h2>Hello</h2>);
+
+	fetch("data/parsed_requests.json")
+		.then((response) => response.json())
+		.then(start)
+		.catch((error) => {
+			console.error(error);
+			// alert("Data could not be loaded.")
+		});
+
+	// d3.queue()
+	// 	.defer(d3.json, "data/parsed_requests.json")  // World shape
+	// 	.await(start)
+}
+
+function lerp(X, Y, t) {
+	return X * t + Y * (1 - t)
+}
+
+function inverse_lerp(a, b, x) {
+	return (x - a) / (b - a);
+}
+
+function start(parsed_requests) {
+	const nodes = parsed_requests.nodes;
+	const edges = parsed_requests.edges;
+
+	const svg = d3.select('svg');
+	const g_libraries = svg.append("g").attr("id", "libraries");
+	const g_movements = svg.append("g").attr("id", "movements");
+	const width = +svg.attr("width"),
+		height = +svg.attr("height");
+
+	// let libraries = {}
+	// console.log(nodes, edges)
+	const valid_nodes = nodes.filter((n) => n.lat && n.lon).map((node) => {
+		const { x: x1, y: y1 } = latLonToOffsets(node.lat, node.lon, 100000, 100000)
+		console.log(x1, y1)
+		const x2 = inverse_lerp(1358, 1380, x1);
+		const y2 = inverse_lerp(32862, 32900, y1);
+
+		const margin = 200;
+		const x = x2 * (width - 2 * margin) + margin;
+		const y = y2 * (height - 2 * margin) + margin;
+		// console.log(x2, y2)
+		// console.log(node)
+
+		node['x'] = x;
+		node['y'] = y;
+		return node
+	})
+
+	const nodeMap = Object.fromEntries(valid_nodes.map(d => [d['name'], d]));
+	
+	const links = edges.filter(l => nodeMap[l['Owning Library Name']] && nodeMap[l['Pickup Location']]).map((l, idx) => {
+		l.source = nodeMap[l['Owning Library Name']];
+		l.target = nodeMap[l['Pickup Location']];
+		l.nr = idx;
+		return l;
+	});
+	// .filter((link, index, self) =>
+	// 	// remove incidental duplicates
+	// 	index === self.findIndex((l) => (
+	// 		l.source.id === link.source.id && l.target.id === link.target.id
+	// 	))
+	// );
+
+	// Reformat the list of link. Note that columns in csv file are called long1, long2, lat1, lat2
+	// var link = []
+	// edges.forEach(function (row) {
+	// 	source = [+row.long1, +row.lat1]
+	// 	target = [+row.long2, +row.lat2]
+	// 	topush = { type: "LineString", coordinates: [source, target] }
+	// 	link.push(topush)
+	// })
+
+	// Add the path
+	const libraries = g_libraries.selectAll(".library");
+	libraries.data(valid_nodes, d => d.code)
+		.join((enter) => {
+			let group = enter.append("g")
+				// .attr("class", getClasses)
+				// .attr("id", (n) => getIdForTitle(n.fulltext));
+				.attr("id", (n) => n.code)
+				.attr("transform", (n) => `translate(${n.x}, ${n.y})`);
+
+			// group.on("click", (evt, n) => {
+			// 	evt.stopPropagation(); this.selectNode(n);
+			// });
+			// group.on("mouseover", (evt, n) => {
+			// 	this.hoverNode(evt, n);
+			// });
+			// group.on("mouseout", (evt, n) => {
+			// 	this.endHoverNode(n);
+			// });
+			group.append('circle').attr("r", 5 /*this.nodeSize*/);
+			// group.append('path')
+			// 	.attr('d', (n) => {
+			// 		return getSymbolForNode(n)(n);
+			// 	})
+			var nodeTitle = group.append('text').attr("class", "nodeTitle").attr("y", "4").attr('x', 5).text((n) => n.name);
+			return group
+		})
+
+	const movements_a = g_movements.selectAll(".movement");
+	const movements = movements_a
+		.data(links)
+		.join(
+			enter => {
+				let group = enter.append("g")
+					.attr("class", (l) => "link " /* TODO type of movement */)
+					.attr("id", (l) => `link${l.nr}`);
+				group.append("path")
+					// .attr("marker-end", "url(#arrowHead)")
+					.attr('id', (d, i) => 'linkpath_' + i)
+					// .on("mouseover", (ev, link) => {
+					// 	d3.select(ev.target).classed('hover', true);
+					// 	const nodes = document.getElementsByClassName('node');
+					// 	for (let n of nodes) {
+					// 		const d = d3.select(n).datum();
+					// 		if (d == link.target || d == link.source) {
+					// 			n.classList.add('linkHover');
+					// 		}
+					// 	}
+
+					// 	this.showRelationTooltip(link, ev);
+					// }).on("mouseout", (ev, link) => {
+					// 	this.hideTooltip();
+					// 	d3.select(ev.target).classed('hover', false);
+					// 	const nodes = document.getElementsByClassName('linkHover');
+					// 	while (nodes.length) {
+					// 		nodes[0].classList.remove('linkHover');
+					// 	}
+					// }).on("click", (ev, link) => {
+					// 	ev.stopPropagation();
+					// 	this.selectNode(link.source);
+					// })
+					;
+				// group.filter((l) => l.name != "City").append("text").attr("class", "labelText").text(function (l) {
+				// 	return l.name;
+				// });
+				// group.append("text")
+				//         .attr("class", "labelText")
+				//         .attr("dx", 20)
+				//         .attr("dy", 0)
+				//         .style("fill", "red")
+				//     .append("textPath")
+				//         .attr("xlink:href", function (d, i) { return "#linkid_" + i; })
+				//         .attr("startOffset","50%")
+				//         .text((d,i) => d.name );
+				return group;
+			}
+		)
+		;
+
+		movements.each(function (l) {
+			let sourceX, targetX, midX, dx, dy, angle;
+
+			// This mess makes the arrows exactly perfect.
+			// thanks to http://bl.ocks.org/curran/9b73eb564c1c8a3d8f3ab207de364bf4
+			if (l.source.x < l.target.x) {
+				sourceX = l.source.x;
+				targetX = l.target.x;
+			} else if (l.target.x < l.source.x) {
+				targetX = l.target.x;
+				sourceX = l.source.x;
+			} else if (l.target.isCircle) {
+				targetX = sourceX = l.target.x;
+			} else if (l.source.isCircle) {
+				targetX = sourceX = l.source.x;
+			} else {
+				midX = (l.source.x + l.target.x) / 2;
+				if (midX > l.target.x) {
+					midX = l.target.x;
+				} else if (midX > l.source.x) {
+					midX = l.source.x;
+				} else if (midX < l.target.x) {
+					midX = l.target.x;
+				} else if (midX < l.source.x) {
+					midX = l.source.x;
+				}
+				targetX = sourceX = midX;
+			}
+
+			dx = targetX - sourceX;
+			dy = l.target.y - l.source.y;
+			angle = Math.atan2(dx, dy);
+
+			var srcSize = 5; //_mapGraph.getSizeForNode(l.source);
+			var tgtSize = 5; //_mapGraph.getSizeForNode(l.target);
+
+			// Compute the line endpoint such that the arrow
+			// it not in the center, but rather slightly out of it
+			// use a small ofset for the angle to compensate roughly for the curve 
+			l.sourceX = sourceX + Math.sin(angle+.5) * srcSize;
+			l.targetX = targetX - Math.sin(angle-.5) * tgtSize;
+			l.sourceY = l.source.y + Math.cos(angle+.5) * srcSize;
+			l.targetY = l.target.y - Math.cos(angle-.5) * tgtSize;
+
+
+			// find radius of arc based on distance between points
+			// add a jitter to spread out the lines when links are stacked
+			const dr = Math.sqrt(dx * dx + dy * dy) * (.7 + Math.random()*.6);
+
+			// "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y
+			let rel = d3.select(this);
+			rel.select("path")
+				.attr('d', `M ${l.sourceX},${l.sourceY} A ${dr},${dr} 0 0,1   ${l.targetX},${l.targetY}`)
+
+
+		})
+
+	console.log(libraries)
+}

package.json

@@ -5,12 +5,13 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite", // start dev server, aliases: `vite dev`, `vite serve`
+    "dev": "vite",
-    "build": "vite build", // build for production
+    "build": "vite build",
-    "preview": "vite preview" // locally preview production build
+    "preview": "vite preview"
   },
   "dependencies": {
     "d3": "^7.9.0",
+    "start-dom-jsx": "^1.0.0-beta.1",
     "vite": "^5.2.8"
   }
 }

vite.config.js

@@ -0,0 +1,6 @@
+export default {
+  esbuild: {
+    jsxFactory: 'h',
+    jsxFragment: 'Fragment'
+  }
+}

viz.html

@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UvA UB - movements</title>
+    <style>
+        #canvas {
+            background: white;
+            position: absolute;
+            top: 0;
+            left: 0;
+            transform-origin: top left;
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+        }
+
+        @font-face {
+            font-family: 'Fluxisch Mono', sans-serif;
+            src:
+                url(assets/fonts/FluxischElse-Regular.woff) format('woff');
+            font-weight: normal;
+        }
+
+        @font-face {
+            font-family: 'Fluxisch Mono', sans-serif;
+            src:
+                url(assets/fonts/FluxischElse-Light.woff) format('woff');
+            font-weight: 200;
+        }
+
+        @font-face {
+            font-family: 'Fluxisch Mono', sans-serif;
+            src:
+                url(assets/fonts/FluxischElse-Bold.woff) format('woff');
+            font-weight: bold;
+        }
+
+        body {
+            background: #333;
+        }
+
+        /* animation root */
+        #viz {
+            width: 100%;
+            height: 100%;
+            font-family: "Fluxisch Else";
+            font-weight: 200;
+            color: black;
+            /* background: linear-gradient(180deg, #3a294c 0%, #62487f 100%); */
+            background: rgb(64, 64, 64)
+        }
+
+        h1 {
+            position: absolute;
+            top: calc(50% - 3em);
+            text-align: center;
+            font-weight: 200;
+            font-size: 140pt;
+            left: 0;
+            right: 0;
+        }
+
+        #viz #about {
+            position: absolute;
+            font-size: 8pt;
+            bottom: 20px;
+            right: 20px;
+            width: 450px;
+            text-align: right;
+        }
+
+        #lines {
+            position: absolute;
+            top: 0;
+            right: 0;
+            left: 0;
+            bottom: 0;
+        }
+
+        #motiontitle {
+            /* animation: jitter 5s infinite; */
+            display: inline-block;
+        }
+
+        @keyframes jitter {
+            0% {
+                transform: skew(0, 0);
+            }
+
+            10% {
+                transform: skew(10deg, 2deg);
+            }
+
+            15% {
+                transform: skew(13deg, -2deg);
+            }
+
+            45% {
+                transform: skew(-3deg, -4deg);
+            }
+
+            70% {
+                transform: skew(-20deg, 4deg);
+            }
+
+            95% {
+                transform: skew(20deg, 1deg);
+            }
+
+            100% {
+                transform: skew(0, 0);
+            }
+        }
+
+
+        svg path {
+            fill: none;
+            /* stroke: rgba(255, 255, 0, .1); */
+            stroke: #bc89ff10;
+            stroke-width: 2px;
+        }
+
+        svg circle{
+            fill: white
+        }
+        svg text{
+            fill: white;
+            font-size: 30pt;
+        }
+    </style>
+    <script>
+        function scaleToFit() {
+            const el = document.getElementById('canvas');
+
+
+            const sw = window.innerWidth / parseInt(el.style.width);
+            const sh = window.innerHeight / parseInt(el.style.height);
+
+            const s = Math.min(sw, sh);
+
+            canvas.style.transform = `scale(${s * 100}%)`;
+        }
+        window.addEventListener('resize', scaleToFit);
+        window.addEventListener('load', scaleToFit);
+
+    </script>
+    <script type="module">
+        import { viz } from './js/viz.jsx';
+
+        viz(document.getElementById('viz'));
+    </script>
+</head>
+
+<body>
+    <div id="canvas" style="width: 2160px;height: 3840px;">
+        <div id="viz">
+
+            <h1>library of <span id="motiontitle">motions</span></h1>
+            <div id="about">
+                Work by <em>Ruben van de Ven</em> for the <em>University of Amsterdam Library</em>. Fonts by <em>Open
+                    Source Publishing</em>, map by <em>OpenStreetMap</em>.
+            </div>
+
+            <svg id="lines" height="3840" width="2160"></svg>
+
+            <!--<img src="assets/map-amsterdam-colored.png">-->
+        </div>
+    </div>
+</body>
+
+</html>

yarn.lock

@@ -562,6 +562,11 @@ source-map-js@^1.2.0:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
   integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
 
+start-dom-jsx@^1.0.0-beta.1:
+  version "1.0.0-beta.1"
+  resolved "https://registry.yarnpkg.com/start-dom-jsx/-/start-dom-jsx-1.0.0-beta.1.tgz#f286af1ac7eebe086e820b643bcd25158d322a8d"
+  integrity sha512-1zz3GPeHxO8+HRYo9ZBzmxZ8MRvG5c0yxB3iVryOX6sOWaW+PPdUR1U0sP8yMoELauTy0SrH0768yOqCKiwDsw==
+
 vite@^5.2.8:
   version "5.2.8"
   resolved "https://registry.yarnpkg.com/vite/-/vite-5.2.8.tgz#a99e09939f1a502992381395ce93efa40a2844aa"