Develop Reference

Plotly JS crossfilter on id with multiple graphs

I am trying to build a dashboard with multiple plotly graphs in Javascript. I would like to implement a crossfilter function within the charts where the selected data in a graph will be highlighted in the other graphs on the same id. Please see an example below:
Dataset Graph 1:
[{
"id": "1",
"ItemWidth" : 545,
"ItemLength" : 234
},
{
"id": "2",
"ItemWidth" : 33,
"ItemLength" : 2234234
}]
Dataset Graph 2:
[{
"id": "1",
"ItemSold" : 44,
"AnotherAtt" : 567
},
{
"id": "2",
"ItemSold" : 1213,
"AnotherAtt" : 656
}]
As you can see the datasets are different but they have the same id. I would like to know how to implement a crossfilter on id based on the datasets within multiple graphs where they share the same id.
Any help and advise is appreciated.

Multi-Facing Tree Layout and Reformatting JSON

I'm working on a tree layout like this one: http://www.robschmuecker.com/d3-js-drag-and-drop-zoomable-tree/ that is based off mbostock's original design (http://mbostock.github.io/d3/talk/20111018/tree.html).
I'm having 3 issues with it. I'd like to be able to extend the branches both left and right of the root - in other words I'd like to be able to mirror what the sample looks like.
The second issue I'm having is that the flare.json file for this format needs to be in a very specific format - it needs to look exactly like this
{
"children": [
{
"children": [
{},
{}
]
}
]
}
While mine looks approximately like
"head": {
"title": "titleHere",
"ownerName": "nameHere
},
"body": {
"outline": [
{
"outline": [
{
"_text": "A"
},
{
"_text": "B"
},
{
"_text": "C"
},
{
"_text": "D"
},
{
"_text": "E"
}
],
"_text": "Category Header"
},
{
},
}
I basically need to write an algorithm that re-formats what I have into the correct format so I can feed it into my tree layout, if that makes sense.
The final issue I'd like to work on is to be able to edit the text by double-clicking on the tree chart.

Directed edges in sigma.js - a minimal example

Question
What is necessary to produce directed edges in sigma.js? I'm looking for a minimal example that is preferably based off of the minimal example currently on their home page.
Attempts
I tried adapting the minimal graph example from the sigma.js homepage in the following way
sigma.parsers.json('data.json', {
container: 'container',
settings: {
defaultNodeColor: '#ec5148',
+ defaultEdgeArrow: 'source' // adding this line should add arrows?
}
});
Sadly this did not produce different results.
I also tried modifying the edges in the graph itself
"edges": [
{
"id": "e0",
"source": "n0",
"target": "n1",
+ "arrow": "source"
},
...,
]
But again this had no effect.
More complex examples
Edge arrow rendering was added in this pull request. This links to a couple of examples here and here

I've been struggling with this issue myself. It looks like sigma.js underwent a major redesign in the last few months and the code from the examples is from an older version of sigma.js.
They do have the ability to render arrows, but the settings to generate these have changed and some of the options were lost (no longer can you specify target, source, or both; you only can use target):
"edges": [
{
"id": "e0",
"source": "n0",
"target": "n1",
+ "type": "arrow",
},
...,
]
"curvedArrow" is also a valid option for type.
See this issue transcript: https://github.com/jacomyal/sigma.js/pull/219 for more information.

I was struggling with it for a few hours. I was able to find a working example at https://www.bsimard.com/2018/04/25/graph-viz-with-sigmajs.html .
The things you need:
- add 'type: "arrow"' to the node properties
"edges": [
{
"id": "e0",
"source": "n0",
"target": "n1",
+ "type": "arrow",
},
...,
]
and in the Sigma constructor set minArrowSize, also for me it is only working with canvas.
s = new sigma({
graph: data,
renderer: {
container: document.getElementById('graph-container'),
type: 'canvas'
},
settings: {
minArrowSize: 10
}
});

Coloring edges differently according to group in D3 force layout

I want to create a force directed graph like http://bl.ocks.org/mbostock/4062045 and I am able to do so using the code provided on the website.
The tweak I want to perform in this is: I wanna color the edges(links) in different colors so as to depict the relationship between two nodes distinctly.
I have my json structure looking like:
{
"links": [
{
"group": 2,
"source": "node1",
"target": "node2",
"value": "5"
},
{
"group": 1,
"source": "node2",
"target": "node3",
"value": "5"
}],
"nodes":
[{ "name": "node1" }
{ "name": "node2" }
{ "name": "node3" }]}
I tried:
var color = d3.scale.category10();
and for styling it:
.style("stroke", function(d) { return color(d.group)})
with no success. The thing is if I place the color as "red" or "blue" or any other instead of placing the function, all the edges are colored fine. Also, I am able to color the "nodes" differently as given in the sample force directed graph but the same attribute is not getting applicable for the links.
I tried the most naive way of comparing as
if (d.group == 1) { return "blue"; }
but still with no success. Im clearly missing out something very basic. Can anyone help me out in this. Much appreciated.

Recursive circle packing?

I have a JSON object that I want to be able to visualize as a hierarchy of circles like this (you can zoom in and out of the hierarchy using mouse clicks).
I'm just trying to figure out how to use the d3.layout.pack to generate the hierarchy for the JSON object below and access the data that sits under Franchise. Any pointers would be much appreciated. Thanks.
{
"Consultant":
[
{
"ConsultantID": 1,
"ConsultantName": "Test Consultant",
"Account":
[
{
"AccountID": 1,
"AccountName": "Test Account",
"Site":
[
{
"SiteID": 1,
"SiteName": "Test Site",
"Franchise":
[
{
"FranchiseID": 1,
"FranchiseName": "Test Franchise",
"Data":
{
// Data goes here
}
}
]
}
]
}
]
}
]
}

For the layout, you can use the built in circle packing layout as you suggest.
For formating the data to use it in this layout, you can use the d3.nest() function. If you want some more insight on how nest works, then I suggest you to have a look at the following question: D3 JSON data conversion