Develop Reference

Expand nodes on click in cytoscape js

I have a graph of people who interact with each other.
The graph is quite messy since everybody interacts with each other. What I need is:
Display the "main" person in the center
Display only the first level of interactions
When the user clicks on a node toggle its children visibility (without displaying children of children)
I've read about compound nodes, but the thing is that one node (person) can have many parents and it's not supported in Cytoscape.
This is what it should look like. The red circle is the "main" person. The red rectangle is the first level of interactions. The rest should be hidden till the user clicks on a node, which reveals its direct children.
The only idea I got is to manipulate the data I provide for the chart. Right now I have an array of vertices and edges. Edges have source/target. So I probably can handle it in javascript by manipulating these arrays.
But is it possible to somehow simplify the process?

You can use view-utilities extension of cytoscape.js which provides hide/show functionality. See its API that has hide, show and showHiddenNeighbors functions. You can also play with its demo here.

D3 app: creating input toolbars programmatically

Shorter question: how should toolbars be programatically created and dynamically changed in a D3.js app with a Python backend?
I'm trying to create Javascript/D3 visualizations for simulations written in Python and using Flask, as an alternative to using a Tkinter GUI. I want a particular model to be selected by a radio button. Changing the selection not only changes the plot, but also swaps to a toolbar of numerical inputs appropriate for that model. I want to create the toolbars programatically, so that as a new model is added to the code an appropriate toolbar is automatically generated.
My problem is that there are a lot of ways to manipulate the DOM, and it's not clear to me what the best approach would be:
Python/Flask could manipulate the DOM, but I think that requires a
page refresh.
If HTML imports were used, there would have to be a separate .html file for each toolbar.
A unique <div> could be created for each toolbar and hidden/unhidden as needed, but it feels wrong to create a dozen <div>s rather than swap the content of one <div>.
A toolbar <div> could be torn down/built up everytime a toolbar is needed, but it feels wrong to keep building the same toolbars from scratch.
innerHTML could be swapped, but this might be bad? cf. this SO question
There are multiple options for manipulating the DOM at the frontend: JS, D3, JQuery...
To illustrate, here is a screenshot of what I have so far. The radio buttons swap between two models. In lieu of a toolbar, I have a JSON dump of the model's toolbar info. The JSON dump would be replaced by its interpretation as a series of labels and numerical inputs.

Drag and drop lists and virtual repeaters

I need to create sortable drag and drop lists in my application. So, for this I have used angular-drag-and-drop-lists which works fine for an small amount of items.
However, my application migh have thousands of items. So, to improve speed, I need to use md-virtual-repeat offered by Angular Material. It keeps the model in the background with the right number of elements. But, the DOM only renders those that are visible within a virtual container.
Because the library uses the rendered $index to keep track of the elements, using the virtual repeater creates all sort of problems since the $index now is virtual.
Some of these problems for instance are:
Dragged element gets duplicated in the model
Element that was in drop location gets deleted from the model
During dragging some elements might get lost from the original model
Etc...
What do you suggest to attack this problem?
Are there any other easier solutions rather than using this library?
Thank you

How to 'show/hide' specific JSON Objects (TimelineJS)?

I am using Timeline JS with JSONP as my source file.
The final product will be one timeline about two separate histories (which are related).
I need to be able to show/hide each history's timeline elements so that you can view one and not the other.
Default, of course, shows both histories simultaneously.
Thank you

multiple svg images in one file breaks text

I have a web app that uses SVG files to map various sorts of data onto our underlying experimental dataset. Each SVG file represents a mapping of one type of data to the experimental dataset and, in most of the pages on the site, they are displayed one at a time, with the various nodes carrying tooltips to make the maps more informative and links to associated data.
I would like to add a page where maps can be compared side-by-side, which means having multiple self-contained SVG's all on the same page. When I do this, however, the files seem to step on each others' toes in that only the first SVG on the page displays the correct text in the labels and axes. The rest appear to inherit the alphabet used in the first image, leaving the axes and labels garbled and nonsensical.
The snippet below shows how I am currently embedding the SVG's in the page. The object blocks are loaded up with SVG content via javascript/ajax when the user chooses a map on a dropdown menu. Everything functions correctly except for the noted problem with the SVG text.
<object id="map" name="map" class="compBuild" width=800 height=460></object>
Javascript:
$(document).on("change", ".db_field", function(e) {
var tmp = this.name.split("_");
var field = "map_" + tmp[1];
$(document.getElementById(field)).load(getSvgUrl($(this).val()));
// getSvgUrl just makes a Jquery AJAX call to obtain the location of
// the SVG file.
})
Maybe not obvious from the code given, but what actually happens on the page is that the menus and object blocks are dynamically generated, so the actual drop-downs and object blocks are addressed as mapSelect_X map_X, where X is a number appended when the block is created. (code not shown for the sake of brevity!)
I am wondering if there is a workaround for this as I would rather not convert the SVG files to images, since I would lose the functionality in the SVG's. Any help would be appreciated. Thanks!

Check that there are no duplicate id attributes in the two SVGs. ids must be unique on the page, otherwise any SVG features that use id references (like <use>, gradients etc) can't be trusted to point to the right thing.
Since Chrome and FF handle duplicate ids differently, a quick way to check this is the cause would be to see if the two browsers render the two-svg page differently.