Displaying a very large graph using JIT - javascript

I want to show a unidirectional graph to the user in a webpage. I am currently using JavaScript InfoVis Toolkit (JIT) as the visulization library.
The problem is that the graph has many nodes and edges and the browser cannot keep up with all of it and slows down. Here is a screenshot of part a graph:
I think the problem will be solved if the graph is shown partially. So when user clicks on a node that node and nodes around it should be expanded (shown) and some far nodes should be collapsed (hidden) to prevent performance issues.
Based on this idea I I've written a simple code that expands a node and puts it in center when a user clicks on it and collapse previous centered node. It is not a very efficient and wise way for showing nodes, anyway it doesn't work. It just collapses all the nodes and fails to expand the current clicked node.
Here is the code:
onClick: function(node,eventInfo,e) {
if(node==false)
{
return;
}
if(rgraph.previousexpand!=false)
{
if(rgraph.previousexpand.id!=node.id)
{
rgraph.op.contract(rgraph.previousexpand, {
type: 'animate',
duration: 3000,
hideLabels: true,
transition: $jit.Trans.Quart.easeOut
});
}
}
rgraph.previousexpand = node;
rgraph.op.expand(rgraph.previousexpand, {
type: 'animate',
duration: 3000,
hideLabels: true,
transition: $jit.Trans.Quart.easeOut
});
rgraph.onClick(node.id);
}
And in initialization:
rgraph.previousexpand=false;
First, do you know any better way for showing a very large graph? Is there any other solution in JIT or maybe other library that show graph in this way?
Second, what i am missing in the code?

Related

JS content not working after a page transition using Barba.JS

I am using Barba.js and GSAP to create page transitions for my website. After watching a few tutorials and fiddling around a bit, I managed to create a slide-transition between two pages. Thing is I've also got other javascript content which is for other functionality elements on each page. On the first page load, everything seems to work fine.
I then click on a link to transition to the next page, the transition goes well but suddenly none of the elements I had coded in the very same JS file work anymore.
I can still transition perfectly between each page but none of the other JS content seems to be working. I'm not getting any errors in the console so I have no idea what's exactly happening here.
Here's what my Barba initialization looks like.
barba.init({
sync: true,
transitions: [{
async leave(data) {
const done = this.async();
animationLeave();
await delay(1000);
done();
},
enter(data) {
animationEnter();
},
once(data) {
animationEnter();
}
}, {
name: 'home-transition',
to: {
namespace: ['home']
},
async once(data) {
homeAnimation();
}
}]
});
The AnimationEnter, AnimationLeave and HomeAnimation methods just link to GSAP animations. For example here's what the AnimationLeave one looks like:
function animationLeave() {
var tl = gsap.timeline();
tl.to('.loading-screen', {
duration: 1,
width: '100%',
left: '0%',
ease: 'expo.easeInOut'
});
tl.to('.loading-screen', {
duration: .8,
width: '100%',
left: '100%',
ease: 'expo.easeInOut',
delay: .3
});
tl.set('.loading-screen', {
left: '-100%',
width: '0%'
});
}
Any help is appreciated!
I flipped the internet upside down looking for a solution to this very problem just a few weeks ago.
Essentially, all your JavaScript runs only once on the initial page load when you're working with BarbaJS. It doesn't get reinitialised once you transition from one page to another. This means that when you transition to another page, all JavaScript-powered animations on that new page won't work unless those animated elements existed on the first page loaded when the site is visited.
To get page-specific animations to work from one page to another after a transition, all of those animations have to be reinitialised. You can do this using global Barba hooks:
barba.hooks.beforeEnter(() => {
killEvents();
});
This code will run before the next page is shown between transitions. If you're using something like ScrollTrigger or an instance of a smooth scrolling library, you can kill those instances or else they'll just stick around and be a memory hog. If you're not, then there's no need to remove any events.
barba.hooks.afterEnter(() => {
addEvents();
});
This is the important part. After a transition, you can then re-add your animation events as shown here.
Another really important thing that helped me was initialising your DOM nodes inside the functions that returned or created your animations. If you simply initialise the DOM nodes once on the initial page load and not on each transition, your animation code will assume you're only animating the elements on the initial page even when the page has transitioned to another.
Some Greensock forum posts that helped:
https://greensock.com/forums/topic/26585-scrolltrigger-not-working-after-barba-transition/
https://greensock.com/forums/topic/24365-problem-with-killing-and-reinitialising-scrolltrigger-after-single-page-app-page-transition/
TL;DR, reinitialise your JavaScript on each page transition.

Slidein element is visible before the animation

I'm trying to recreate the animations when loading from this website:
https://uchuhimo.me
I think they are using velocity.js to do the animations.
I tried to recreate some of this and kind of succeeded (though not sure if doing it properly). There is one problem though, that the elements are there and then they animate (slidein), whereas correctly they should be hidden and then they slide in so they become visible (like on the website). I looked into documentation and i think that should be expected behaviour? But here in my example it does not work like that.
https://codepen.io/pokepim/pen/EpyKWR
The sequence of animation I run is the following:
And they should imitate the animation of that website im trying to imitate.
var loading = [
{ elements: $(".logo-line-before"), properties: {width: '100%'}},
{ elements: $(".logo-line-after"), properties: {width: '100%'}, options: { sequenceQueue: false }},
{ elements: $(".ttl"), properties:"transition.slideDownIn"},
{ elements: $(".ui.top.vertical.segment"), properties:"transition.slideDownBigIn"}
];
$.Velocity.RunSequence(loading);
That's all using Velocity V1 so there's limited help available (it's not supported any more), however you do need to pre-load the elements for opacity:0, there's no need for changing the display property on them as it's just a "get it visible" animation on an element that should still take up space.
I'd suggest simply adding a style="opacity:0;" on each of those elements in the HTML source and going from there.

Canvas: Detect if it is visible in browser

I have a list of charts. I use Chart.js to create those charts. Since my list can have 1 to 100 or more entries initializing all charts at once would not be smart because that would make the ui freeze for a long time. So instead I thought it would be much better to only initialize those charts which are visible inside the view bounds of the browser so that for example only the first chart is getting initialized and when the user scrolls down and the second canvas becomes visible the second is getting initialized and so on.
I have everything setup but the only problem that I have right now is: how can I create an eventlistener or anything similiar which I can add to each canvas element that gets triggered when a canvas becomes visible inside the view bounds of the browser so that i can perform the chart initialization for that canvas?
I'm the author of OnScreen, a small library that can call a callback function when a HTMLElement enters the viewport or the boundaries of its container.
// Uses ES6 syntax
import OnScreen from 'onscreen';
const os = new OnScreen();
os.on('enter', 'canvas', (element) => {
if (!element.chartInitialized) {
// Initialize the chart
// Update the `chartInitialized` property
// to avoid initializing it over and over
element.chartInitialized = true;
}
});
For more information, take a look at the documentation. Don't forget to check the demos repo for a couple simple examples.
I have used the onScreen jQuery plugin.
It is very easy. You just have to call for each canvas this:
$('elements').onScreen({
container: window,
direction: 'vertical',
doIn: function() {
// initialize canvas
},
doOut: function() {
// Do something to the matched elements as they get off scren
},
tolerance: 0,
throttle: 50,
toggleClass: 'onScreen',
lazyAttr: null,
lazyPlaceholder: 'someImage.jpg',
debug: false
});

Force expell library for given div-structure

Given a HTML structure like so:
<div id="canvas">
<div class="group group-normal" id="1">hello world</div>
<div class="group group-infiltrated" id="2">whats up dogue</div>
</div>
I currently use jsPlumb to create a graph from that structure:
$(function() {
jsPlumb.Defaults.Container = $("div#canvas");
jsPlumb.draggable($("div.group"), {
containment: $("div#canvas")
});
var stateMachineConnector = {
connector: "Bezier",
paintStyle: { lineWidth: 2, strokeStyle: "#056" },
endpoint: "Blank",
anchor: "Continuous",
overlays:[ ["PlainArrow", { location: 1, width: 15, length: 12 } ]]
};
jsPlumb.connect({
source: "1",
target: "2"
}, stateMachineConnector);
});
Which already gives me a nice, draggable graph:
The problem is, that when initialising the graph, all the divs are in the upper left corner of the canvas. I learned that this is due that jsPlumb only provides functionality to layout a graph, but not to position it.
I then went on a scavenger hunt and found many useful libraries that deal with positioning, like springy, sigma and alike. The problem is: Most of the don't operate on divs, but rather on some (for me) instransparent SVG/Canvas object graph.
I like jsPlumb very much and would like to keep using it. The only thing I need from other libraries is the initial positioning of all the elements.
How can I make the elements be positioned more evenly over the space available, maybe even in a way that makes them arrange the same way every time the graph is initialized?
Here is the plugin for positioning DIV's which has connectivity: https://github.com/lndb/jsPlumb_Liviz.js
Basically the plugin is derived from graphviz js library.
You need to pass the connectivity information to the library through a textarea(id=dot-src). So whenever you establish a connection, store the connectivity info in a string and later pass it to the Liviz library for positioning it.
str='digraph MyGraph {'; // This string will be set to the textarea at the end.
// Whenever connection is created update the string.
jsPlumb.bind("jsPlumbConnection", function(ci) {
console.log($('#'+ci.sourceId).data("prop").dn+"->"+$('#'+ci.targetId).data("prop").dn);
str+=ci.sourceId+"->"+ci.targetId+";";
});
// At the end set the string and call Liviz function
$('#dot-src').text(str+"}"); // Set the string
w_launch(); // call the library to position the DIV's based on connectivity.
You can explore graphviz for different types of options to customise positioning.

jQuery Waypoint Plugin troubles

I'm having slight troubles with the jQuery Waypoint plugin, and any information/help is appreciated.
Ok, so to define what I want to do: I have images, that are hidden prior to being in the view area. I want them to do an animation effect once in the view area. That is the final result, for now, I'm still in testing as I am generally new to jQuery but getting better.
So I started out doing the shake on a single div, and it worked great once the once it was in view. I used the following code:
HTML:
<div class="shown">Shake it</div>
jQuery
jQuery(document).ready(function($){
$(".shown").waypoint(function(direction) {
$(this).effect("shake");
}, { offset: '95%', triggerOnce: true });
});
Then I made two instances of the class='shown' in my HTML (one at top, and one at the bottom), and when I scrolled to them, they both worked great. Plus, they both worked at separate times, which is what I'm trying to gain.
Here's the trouble
When I tried to 'display:none' and then animate to show on scroll, it animates BOTH, instead of just the single at a time.
This is what I'm using
HTML
<div class="shown" style="display: none;">
jQuery
jQuery(document).ready(function($){
$(".shown").waypoint(function(direction) {
$(this).fadeIn( 10000, function() {
// Animation complete
});
}, { offset: '95%', triggerOnce: true });
});
Ok, so just to clarify one more time :D (to be safe)
I want to be able to use the same class for MULTIPLE instances, that will only display once THAT element is in view. Right now it's displaying ALL elements once 1 instance is in view.
Again, any information/help is appreciated. You guys have a great community here, I'm glad I could join!

Categories

Resources