r/ub-movements-test
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Test speed

Browse source
This commit is contained in:
Ruben van de Ven 2024-04-26 13:40:26 +02:00
parent b2f49645e8
commit 37569ff644
2 changed files with 11 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
index.html
View file

@ -132,6 +132,10 @@
fill: white; fill: white;
font-size: 30pt; font-size: 30pt;
} }
path:not(.selected){
opacity:0;
}
</style> </style>
<script> <script>
function scaleToFit() { function scaleToFit() {

10
js/viz.tsx
View file

@ -124,6 +124,7 @@ function start(parsed_requests) {
// filter nodes with only having both Latitude and Longitude. // filter nodes with only having both Latitude and Longitude.
// then map these coordinates to the canvas space // then map these coordinates to the canvas space
const valid_nodes = nodes.filter((n) => n.lat && n.lon).map((node) => { 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) const { x: x1, y: y1 } = latLonToOffsets(node.lat, node.lon, 100000, 100000)
console.log(x1, y1) console.log(x1, y1)
const x2 = inverse_lerp(1358, 1380, x1); const x2 = inverse_lerp(1358, 1380, x1);
@ -332,10 +333,13 @@ function start(parsed_requests) {
function scene_01_FollowItem() { function scene_01_FollowItem() {
const edgeToSelect = edges.filter(e => e.Barcode == "0133040931")[0] const edgeToSelect = edges.filter(e => e.Barcode == "0133040931")[0]
edgesToHighlight = edges.filter(e => e.Barcode == edgeToSelect.Barcode) edgesToHighlight = edges.filter(e => e.Barcode == edgeToSelect.Barcode)
highlightTrajectory(edgesToHighlight);
const tl = anime.timeline({}) const tl = anime.timeline({})
console.log(tl) // console.log(tl)
for(const edge of edgesToHighlight) { for(const edge of edgesToHighlight) {
// document.getElementById(`#linkpath_${edge.nr}`).dataset.length = document.getElementById(`#linkpath_${edge.nr}`).getTotalLength
tl.add({ tl.add({
targets: `#linkpath_${edge.nr}`, targets: `#linkpath_${edge.nr}`,
stroke: ['rgb(255, 0, 0)', 'rgb(0, 255, 255)'], stroke: ['rgb(255, 0, 0)', 'rgb(0, 255, 255)'],
@ -410,8 +414,8 @@ function highlightTrajectory(edges: Array<Object>) {
console.log(`#linkpath_${edge.nr}`) console.log(`#linkpath_${edge.nr}`)
const selection = d3.select(`#linkpath_${edge.nr}`); const selection = d3.select(`#linkpath_${edge.nr}`);
// console.log(selection); // console.log(selection);
selection.style("stroke", "red"); // selection.style("stroke", "red");
selection.style("stroke-width", "5"); // selection.style("stroke-width", "5");
selection.classed("selected", true); selection.classed("selected", true);
} }
} }