Width & Height are props, and movement-paths animate in
This commit is contained in:
Ruben van de Ven
parent
211792acdb
commit
070c3ef848
2 changed files with 91 additions and 30 deletions
114
src/Viz.svelte
114
src/Viz.svelte
|
|
@ -1,11 +1,39 @@
|
|||
<script lang="ts">
|
||||
import parsed_requests from "/data/parsed_requests.json";
|
||||
|
||||
$: console.log(parsed_requests);
|
||||
import { draw } from "svelte/transition";
|
||||
|
||||
// TODO: pass these from main.ts (or vice versaas)
|
||||
const width = 2160;
|
||||
const height = 3840;
|
||||
// these are passed from main.ts (or vice versaas)
|
||||
export let width = 0;
|
||||
export let height = 0;
|
||||
|
||||
const node_positions_percentages = {
|
||||
APM: [13.829853909464873, 11.277305564859935],
|
||||
IWO: [82.20349794238683, 92.52914963452248],
|
||||
BC: [13.829853909464873, 10.235638898193269],
|
||||
ARTIS: [37.36555349794344, 14.373622178489617],
|
||||
BHBPU: [18.895388888889407, 8.009932889956616],
|
||||
CEDLA: [32.88047119341627, 21.36735134591498],
|
||||
UBGW: [7.420491769548115, 13.544746441851984],
|
||||
IVIR: [33.838187242798554, 17.768099884380575],
|
||||
OTM: [80.81460905349795, 93.83123296785581],
|
||||
JB: [34.30115020576152, 19.538933217713907],
|
||||
REC: [32.38571810699577, 16.229534855698518],
|
||||
AMC: [81.82347530864213, 90.12737486852306],
|
||||
PCHH: [10.320697530863542, 3.927002725110166],
|
||||
BETA: [78.14333127572034, 26.257884003417413],
|
||||
UBB: [10.198269547325893, 16.40932977518532],
|
||||
};
|
||||
|
||||
const node_positions = Object.fromEntries(
|
||||
Object.entries(node_positions_percentages).map(([k, p]) => [
|
||||
k,
|
||||
[(p[0] / 100) * width, (p[1] / 100) * height],
|
||||
]),
|
||||
);
|
||||
|
||||
|
||||
$: console.log(parsed_requests);
|
||||
|
||||
// preprocess data
|
||||
const nodes = parsed_requests.nodes;
|
||||
|
|
@ -16,29 +44,31 @@
|
|||
const valid_nodes = nodes
|
||||
.filter((n) => n.lat && n.lon)
|
||||
.map((node) => {
|
||||
// const { x: x1, y: y1 } = latLonToOffsets(node.lat, node.lon, 100000, 100000)
|
||||
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);
|
||||
node["x"] = node_positions[node.code][0];
|
||||
node["y"] = node_positions[node.code][1];
|
||||
// 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)
|
||||
// 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;
|
||||
// node["x"] = x;
|
||||
// node["y"] = y;
|
||||
return node;
|
||||
});
|
||||
|
||||
// create an index to access the node objects by their name
|
||||
|
||||
const nodeMap = Object.fromEntries(valid_nodes.map((d) => [d["name"], d]));
|
||||
const edgeIndexBarcode = buildIndex(edges, "Barcode");
|
||||
// console.log(edgeIndexBarcode);
|
||||
|
|
@ -56,7 +86,7 @@
|
|||
return l;
|
||||
});
|
||||
|
||||
function degreesToRadians(degrees) {
|
||||
function degreesToRadians(degrees: number) {
|
||||
return (degrees * Math.PI) / 180;
|
||||
}
|
||||
|
||||
|
|
@ -76,7 +106,7 @@
|
|||
return { x, y };
|
||||
}
|
||||
|
||||
function lerp(X, Y, t) {
|
||||
function lerp(X: number, Y: number, t: number) {
|
||||
return X * t + Y * (1 - t);
|
||||
}
|
||||
|
||||
|
|
@ -148,7 +178,7 @@
|
|||
|
||||
// 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) * (0.7 + Math.random() * 0.6);
|
||||
const dr = Math.sqrt(dx * dx + dy * dy) * (0.7 + Math.random() * 0.5);
|
||||
|
||||
// "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y
|
||||
return `M ${m.sourceX},${m.sourceY} A ${dr},${dr} 0 0,1 ${m.targetX},${m.targetY}`;
|
||||
|
|
@ -156,7 +186,30 @@
|
|||
|
||||
console.log(movements);
|
||||
|
||||
let drawn_movements = movements;
|
||||
let drawn_movements = movements; //.filter((m, i) => i < 100);
|
||||
|
||||
import { onMount, onDestroy } from "svelte";
|
||||
let paused = false;
|
||||
onMount(() => {
|
||||
let interval = null;
|
||||
|
||||
interval = setInterval(() => {
|
||||
if (paused) {
|
||||
return;
|
||||
}
|
||||
// TODO: change scene
|
||||
// timeElapsed += 1;
|
||||
|
||||
// if (remainingTime === 0) {
|
||||
// clearInterval(interval);
|
||||
// deleteTimer();
|
||||
// }
|
||||
}, 10000);
|
||||
|
||||
return () => {
|
||||
clearInterval(interval);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<h1>library of <span id="motiontitle">motions</span></h1>
|
||||
|
|
@ -169,7 +222,10 @@
|
|||
<svg {width} {height}>
|
||||
<g id="movements">
|
||||
{#each drawn_movements as m}
|
||||
<path d={get_path_d(m)}></path>
|
||||
<path
|
||||
in:draw|global={{ duration: 5000 + Math.random() * 10000 }}
|
||||
d={get_path_d(m)}
|
||||
></path>
|
||||
{/each}
|
||||
</g>
|
||||
<g id="libraries">
|
||||
|
|
@ -177,14 +233,12 @@
|
|||
<g id={node.code} transform="translate({node.x}, {node.y})">
|
||||
<circle r="5"></circle>
|
||||
<circle r="20"></circle>
|
||||
<text class="nodeTitle" y="4" x="35">{node.name}</text>
|
||||
<text class="nodeTitle" y="13" x="35">{node.name}</text>
|
||||
</g>
|
||||
{/each}
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
#about {
|
||||
position: absolute;
|
||||
|
|
@ -204,7 +258,7 @@
|
|||
stroke-width: 10;
|
||||
}
|
||||
path {
|
||||
stroke: #bc89ff10;
|
||||
stroke: #bc89ff15;
|
||||
stroke-width: 2px;
|
||||
fill: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,14 @@ document.getElementById('canvas')!.style.width = `${width}px`;
|
|||
document.getElementById('canvas')!.style.height = `${height}px`;
|
||||
|
||||
const app = new Viz({
|
||||
// see https://svelte.dev/docs/client-side-component-api
|
||||
target: document.getElementById('viz')!,
|
||||
props: {
|
||||
width: width,
|
||||
height: height
|
||||
},
|
||||
// intro: true,
|
||||
})
|
||||
|
||||
|
||||
export default app
|
||||
|
|
|
|||
Loading…
Reference in a new issue