What library or graph drawing algorithm can help me generate a graph of 2^16 nodes and edges with minimal edge-overlap?
How can I, as DM, avoid the Conga Line of Death occurring when implementing some form of flanking rule?
Why is the Sun approximated as a black body at ~ 5800 K?
How do I fix the group tension caused by my character stealing and possibly killing without provocation?
Sound waves in different octaves
Why the "ls" command is showing the permissions of files in a FAT32 partition?
Proving an identity involving cross products and coplanar vectors
Make a Bowl of Alphabet Soup
What does "tick" mean in this sentence?
Does Doodling or Improvising on the Piano Have Any Benefits?
Why would five hundred and five be same as one?
Echo with obfuscation
Should I assume I have passed probation?
How do I Interface a PS/2 Keyboard without Modern Techniques?
Air travel with refrigerated insulin
Do I have to know the General Relativity theory to understand the concept of inertial frame?
Sigmoid with a slope but no asymptotes?
Ways of geometrical multiplication
Can I cause damage to electrical appliances by unplugging them when they are turned on?
Do you waste sorcery points if you try to apply metamagic to a spell from a scroll but fail to cast it?
If Captain Marvel (MCU) were to have a child with a human male, would the child be human or Kree?
Grepping string, but include all non-blank lines following each grep match
How do you justify more code being written by following clean code practices?
What is this high flying aircraft over Pennsylvania?
Why can't the Brexit deadlock in the UK parliament be solved with a plurality vote?
What library or graph drawing algorithm can help me generate a graph of 2^16 nodes and edges with minimal edge-overlap?
$begingroup$
I'm trying to plot a directed graph of $2^16$ nodes and $2^16$ edges (but not simply a cycle). Ultimately, I need to be able to share the graph with others in a way that it can be "explored" (zooming, panning, labels).
Mathematica did a fine job of drawing this graph in a way that minimized edge overlaps:
What you're seeing is a mass of nodes (blue) mashed up, totally hiding all the edges. This isn't a viable solution because it (1) requires an installation of Mathematica, (2) takes several minutes to generate, and (3) can't be saved—exporting the plot as SVG crashed all SVG viewers I tried.
SigmaJS with random initial positions, then ForceAtlas2
It seems for large graphs, rendering with HTML5 Canvas is the way to go, and SigmaJS is a popular choice.
The first problem with SigmaJS though was that it doesn't automatically place nodes the way Mathematica did. So to apply any force-directed drawing algorithm, first I had to supply all nodes with initial positions.
Randomly dispersing the 65,536 nodes in a square caused such a hopeless tangle of edges that, even after several minutes of running ForceAtlas2, I could only see this:
SigmaJS with ring-adjacent placement, then ForceAtlas2
Well, no big deal. Instead of random placement, I decided to do a naive depth-first search and place nodes in a ring as I found them. This way the majority of nodes would start right next to a neighbor. Here's what the evolution of that looked like with ForceAtlas2 at start, a few minutes in, an hour later, and a few hours later:
But this made it really evident that the results of force-directed graphing algorithms depend heavily on their initial states. I can see each of those radial "islands" being stuck in local optima, never reaching the configuration Mathematica did.
About this particular graph, and investigating Mathematica's algorithm
The graph I'm studying is a pseudo-random number generator of the form
$$x_next = 5x_current+273 bmod 65536$$
for the most part. (A quirk in the actual assembly code implementation actually causes shift-by-1s for ~700 of the 65536 edges.) In other words, what I'm graphing is the succession of "random" numbers generated by that formula, e.g.
$$0 rightarrow 273 rightarrow 1365 rightarrow 7098 rightarrow 35763 rightarrow 48016 rightarrow ldots$$
Eventually this succession yields a number we've already seen, closing the loop and forming one of the 3 cycles of this graph. I know this isn't really about data science (much less "Big Data") but the technique I'm looking for would help similar visualization problems on large, sparsely connected graphs.
To see what Mathematica's doing, first I plotted just a single succession for the first 1,000 integers, i.e.
beginalign0 &rightarrow 273\1 &rightarrow 279\2 &rightarrow 285\ &ldots \999 &rightarrow 5268endalign
(There are some 3- and 4-length chains due to the quirk mentioned before.) And here's the same for 10,000 integers:
Clearly Mathematica organizes subgraphs in some order to do with the size of each subgraph.
"Life" begins to form around 40,000 nodes, and as edges connect subgraphs at varying midpoints to produce more and more interesting shapes, and we converge toward the graph we began with:
Okay, so...
a. Is there a library or known algorithm that can do this in Javascript (or any other reasonably shareable output format)? This would be ideal.
b. Or, does anyone have any insights about Mathematica's algorithm? It's clearly not just a force-directed drawing algorithm. I wonder if I can develop a SigmaJS plugin that does something similar.
Here's the Mathematica implementation if anyone is interested in playing around with it.
Hex[exp_] := FromDigits[exp, 16];
LByte[exp_] := BitAnd[exp, Hex@"00ff"];
HByte[exp_] := BitAnd[exp, Hex@"ff00"]~BitShiftRight~8;
PRNG[v_] := Module[L5, H5, v1, v2, carry,
L5 = LByte@v*5;
H5 = HByte@v*5;
v1 = LByte@H5 + HByte@L5 + 1;
carry = HByte@v1~BitGet~0;
v2 = BitShiftLeft[LByte@v1, 8] + LByte@L5;
Mod[v2 + Hex@"0011" + carry, Hex@"ffff" + 1]
];
mappings = # -> PRNG@# & /@ Range[0, Hex@"ffff"];
(* WARNING! GraphPlot takes a long time to generate. *)
(* GraphPlot[mappings] *)
bigdata visualization graphs javascript
asked 6 mins ago
Andrew CheongAndrew Cheong
1011
New contributor
Andrew Cheong is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
$endgroup$
add a comment |
$begingroup$
I'm trying to plot a directed graph of $2^16$ nodes and $2^16$ edges (but not simply a cycle). Ultimately, I need to be able to share the graph with others in a way that it can be "explored" (zooming, panning, labels).
Mathematica did a fine job of drawing this graph in a way that minimized edge overlaps:
What you're seeing is a mass of nodes (blue) mashed up, totally hiding all the edges. This isn't a viable solution because it (1) requires an installation of Mathematica, (2) takes several minutes to generate, and (3) can't be saved—exporting the plot as SVG crashed all SVG viewers I tried.
SigmaJS with random initial positions, then ForceAtlas2
It seems for large graphs, rendering with HTML5 Canvas is the way to go, and SigmaJS is a popular choice.
The first problem with SigmaJS though was that it doesn't automatically place nodes the way Mathematica did. So to apply any force-directed drawing algorithm, first I had to supply all nodes with initial positions.
Randomly dispersing the 65,536 nodes in a square caused such a hopeless tangle of edges that, even after several minutes of running ForceAtlas2, I could only see this:
SigmaJS with ring-adjacent placement, then ForceAtlas2
Well, no big deal. Instead of random placement, I decided to do a naive depth-first search and place nodes in a ring as I found them. This way the majority of nodes would start right next to a neighbor. Here's what the evolution of that looked like with ForceAtlas2 at start, a few minutes in, an hour later, and a few hours later:
But this made it really evident that the results of force-directed graphing algorithms depend heavily on their initial states. I can see each of those radial "islands" being stuck in local optima, never reaching the configuration Mathematica did.
About this particular graph, and investigating Mathematica's algorithm
The graph I'm studying is a pseudo-random number generator of the form
$$x_next = 5x_current+273 bmod 65536$$
for the most part. (A quirk in the actual assembly code implementation actually causes shift-by-1s for ~700 of the 65536 edges.) In other words, what I'm graphing is the succession of "random" numbers generated by that formula, e.g.
$$0 rightarrow 273 rightarrow 1365 rightarrow 7098 rightarrow 35763 rightarrow 48016 rightarrow ldots$$
Eventually this succession yields a number we've already seen, closing the loop and forming one of the 3 cycles of this graph. I know this isn't really about data science (much less "Big Data") but the technique I'm looking for would help similar visualization problems on large, sparsely connected graphs.
To see what Mathematica's doing, first I plotted just a single succession for the first 1,000 integers, i.e.
beginalign0 &rightarrow 273\1 &rightarrow 279\2 &rightarrow 285\ &ldots \999 &rightarrow 5268endalign
(There are some 3- and 4-length chains due to the quirk mentioned before.) And here's the same for 10,000 integers:
Clearly Mathematica organizes subgraphs in some order to do with the size of each subgraph.
"Life" begins to form around 40,000 nodes, and as edges connect subgraphs at varying midpoints to produce more and more interesting shapes, and we converge toward the graph we began with:
Okay, so...
a. Is there a library or known algorithm that can do this in Javascript (or any other reasonably shareable output format)? This would be ideal.
b. Or, does anyone have any insights about Mathematica's algorithm? It's clearly not just a force-directed drawing algorithm. I wonder if I can develop a SigmaJS plugin that does something similar.
Here's the Mathematica implementation if anyone is interested in playing around with it.
Hex[exp_] := FromDigits[exp, 16];
LByte[exp_] := BitAnd[exp, Hex@"00ff"];
HByte[exp_] := BitAnd[exp, Hex@"ff00"]~BitShiftRight~8;
PRNG[v_] := Module[L5, H5, v1, v2, carry,
L5 = LByte@v*5;
H5 = HByte@v*5;
v1 = LByte@H5 + HByte@L5 + 1;
carry = HByte@v1~BitGet~0;
v2 = BitShiftLeft[LByte@v1, 8] + LByte@L5;
Mod[v2 + Hex@"0011" + carry, Hex@"ffff" + 1]
];
mappings = # -> PRNG@# & /@ Range[0, Hex@"ffff"];
(* WARNING! GraphPlot takes a long time to generate. *)
(* GraphPlot[mappings] *)
bigdata visualization graphs javascript
asked 6 mins ago
Andrew CheongAndrew Cheong
1011
New contributor
Andrew Cheong is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
$endgroup$
add a comment |
$begingroup$
I'm trying to plot a directed graph of $2^16$ nodes and $2^16$ edges (but not simply a cycle). Ultimately, I need to be able to share the graph with others in a way that it can be "explored" (zooming, panning, labels).
Mathematica did a fine job of drawing this graph in a way that minimized edge overlaps:
What you're seeing is a mass of nodes (blue) mashed up, totally hiding all the edges. This isn't a viable solution because it (1) requires an installation of Mathematica, (2) takes several minutes to generate, and (3) can't be saved—exporting the plot as SVG crashed all SVG viewers I tried.
SigmaJS with random initial positions, then ForceAtlas2
It seems for large graphs, rendering with HTML5 Canvas is the way to go, and SigmaJS is a popular choice.
The first problem with SigmaJS though was that it doesn't automatically place nodes the way Mathematica did. So to apply any force-directed drawing algorithm, first I had to supply all nodes with initial positions.
Randomly dispersing the 65,536 nodes in a square caused such a hopeless tangle of edges that, even after several minutes of running ForceAtlas2, I could only see this:
SigmaJS with ring-adjacent placement, then ForceAtlas2
Well, no big deal. Instead of random placement, I decided to do a naive depth-first search and place nodes in a ring as I found them. This way the majority of nodes would start right next to a neighbor. Here's what the evolution of that looked like with ForceAtlas2 at start, a few minutes in, an hour later, and a few hours later:
But this made it really evident that the results of force-directed graphing algorithms depend heavily on their initial states. I can see each of those radial "islands" being stuck in local optima, never reaching the configuration Mathematica did.
About this particular graph, and investigating Mathematica's algorithm
The graph I'm studying is a pseudo-random number generator of the form
$$x_next = 5x_current+273 bmod 65536$$
for the most part. (A quirk in the actual assembly code implementation actually causes shift-by-1s for ~700 of the 65536 edges.) In other words, what I'm graphing is the succession of "random" numbers generated by that formula, e.g.
$$0 rightarrow 273 rightarrow 1365 rightarrow 7098 rightarrow 35763 rightarrow 48016 rightarrow ldots$$
Eventually this succession yields a number we've already seen, closing the loop and forming one of the 3 cycles of this graph. I know this isn't really about data science (much less "Big Data") but the technique I'm looking for would help similar visualization problems on large, sparsely connected graphs.
To see what Mathematica's doing, first I plotted just a single succession for the first 1,000 integers, i.e.
beginalign0 &rightarrow 273\1 &rightarrow 279\2 &rightarrow 285\ &ldots \999 &rightarrow 5268endalign
(There are some 3- and 4-length chains due to the quirk mentioned before.) And here's the same for 10,000 integers:
Clearly Mathematica organizes subgraphs in some order to do with the size of each subgraph.
"Life" begins to form around 40,000 nodes, and as edges connect subgraphs at varying midpoints to produce more and more interesting shapes, and we converge toward the graph we began with:
Okay, so...
a. Is there a library or known algorithm that can do this in Javascript (or any other reasonably shareable output format)? This would be ideal.
b. Or, does anyone have any insights about Mathematica's algorithm? It's clearly not just a force-directed drawing algorithm. I wonder if I can develop a SigmaJS plugin that does something similar.
Here's the Mathematica implementation if anyone is interested in playing around with it.
Hex[exp_] := FromDigits[exp, 16];
LByte[exp_] := BitAnd[exp, Hex@"00ff"];
HByte[exp_] := BitAnd[exp, Hex@"ff00"]~BitShiftRight~8;
PRNG[v_] := Module[L5, H5, v1, v2, carry,
L5 = LByte@v*5;
H5 = HByte@v*5;
v1 = LByte@H5 + HByte@L5 + 1;
carry = HByte@v1~BitGet~0;
v2 = BitShiftLeft[LByte@v1, 8] + LByte@L5;
Mod[v2 + Hex@"0011" + carry, Hex@"ffff" + 1]
];
mappings = # -> PRNG@# & /@ Range[0, Hex@"ffff"];
(* WARNING! GraphPlot takes a long time to generate. *)
(* GraphPlot[mappings] *)
bigdata visualization graphs javascript
asked 6 mins ago
Andrew CheongAndrew Cheong
1011
New contributor
Andrew Cheong is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
$endgroup$
I'm trying to plot a directed graph of $2^16$ nodes and $2^16$ edges (but not simply a cycle). Ultimately, I need to be able to share the graph with others in a way that it can be "explored" (zooming, panning, labels).
Mathematica did a fine job of drawing this graph in a way that minimized edge overlaps:
What you're seeing is a mass of nodes (blue) mashed up, totally hiding all the edges. This isn't a viable solution because it (1) requires an installation of Mathematica, (2) takes several minutes to generate, and (3) can't be saved—exporting the plot as SVG crashed all SVG viewers I tried.
SigmaJS with random initial positions, then ForceAtlas2
It seems for large graphs, rendering with HTML5 Canvas is the way to go, and SigmaJS is a popular choice.
The first problem with SigmaJS though was that it doesn't automatically place nodes the way Mathematica did. So to apply any force-directed drawing algorithm, first I had to supply all nodes with initial positions.
Randomly dispersing the 65,536 nodes in a square caused such a hopeless tangle of edges that, even after several minutes of running ForceAtlas2, I could only see this:
SigmaJS with ring-adjacent placement, then ForceAtlas2
Well, no big deal. Instead of random placement, I decided to do a naive depth-first search and place nodes in a ring as I found them. This way the majority of nodes would start right next to a neighbor. Here's what the evolution of that looked like with ForceAtlas2 at start, a few minutes in, an hour later, and a few hours later:
But this made it really evident that the results of force-directed graphing algorithms depend heavily on their initial states. I can see each of those radial "islands" being stuck in local optima, never reaching the configuration Mathematica did.
About this particular graph, and investigating Mathematica's algorithm
The graph I'm studying is a pseudo-random number generator of the form
$$x_next = 5x_current+273 bmod 65536$$
for the most part. (A quirk in the actual assembly code implementation actually causes shift-by-1s for ~700 of the 65536 edges.) In other words, what I'm graphing is the succession of "random" numbers generated by that formula, e.g.
$$0 rightarrow 273 rightarrow 1365 rightarrow 7098 rightarrow 35763 rightarrow 48016 rightarrow ldots$$
Eventually this succession yields a number we've already seen, closing the loop and forming one of the 3 cycles of this graph. I know this isn't really about data science (much less "Big Data") but the technique I'm looking for would help similar visualization problems on large, sparsely connected graphs.
To see what Mathematica's doing, first I plotted just a single succession for the first 1,000 integers, i.e.
beginalign0 &rightarrow 273\1 &rightarrow 279\2 &rightarrow 285\ &ldots \999 &rightarrow 5268endalign
(There are some 3- and 4-length chains due to the quirk mentioned before.) And here's the same for 10,000 integers:
Clearly Mathematica organizes subgraphs in some order to do with the size of each subgraph.
"Life" begins to form around 40,000 nodes, and as edges connect subgraphs at varying midpoints to produce more and more interesting shapes, and we converge toward the graph we began with:
Okay, so...
a. Is there a library or known algorithm that can do this in Javascript (or any other reasonably shareable output format)? This would be ideal.
b. Or, does anyone have any insights about Mathematica's algorithm? It's clearly not just a force-directed drawing algorithm. I wonder if I can develop a SigmaJS plugin that does something similar.
Here's the Mathematica implementation if anyone is interested in playing around with it.
Hex[exp_] := FromDigits[exp, 16];
LByte[exp_] := BitAnd[exp, Hex@"00ff"];
HByte[exp_] := BitAnd[exp, Hex@"ff00"]~BitShiftRight~8;
PRNG[v_] := Module[L5, H5, v1, v2, carry,
L5 = LByte@v*5;
H5 = HByte@v*5;
v1 = LByte@H5 + HByte@L5 + 1;
carry = HByte@v1~BitGet~0;
v2 = BitShiftLeft[LByte@v1, 8] + LByte@L5;
Mod[v2 + Hex@"0011" + carry, Hex@"ffff" + 1]
];
mappings = # -> PRNG@# & /@ Range[0, Hex@"ffff"];
(* WARNING! GraphPlot takes a long time to generate. *)
(* GraphPlot[mappings] *)
bigdata visualization graphs javascript
bigdata visualization graphs javascript
asked 6 mins ago
Andrew CheongAndrew Cheong
1011
New contributor
Andrew Cheong is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 6 mins ago
Andrew CheongAndrew Cheong
1011
New contributor
Andrew Cheong is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 6 mins ago
Andrew CheongAndrew Cheong
1011
New contributor
Andrew Cheong is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 6 mins ago
Andrew CheongAndrew Cheong
1011
asked 6 mins ago
Andrew CheongAndrew Cheong
1011
1011
New contributor
Andrew Cheong is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Andrew Cheong is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Andrew Cheong is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
return StackExchange.using("mathjaxEditing", function ()
StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix)
StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["$", "$"], ["\\(","\\)"]]);
);
);
, "mathjax-editing");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "557"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Andrew Cheong is a new contributor. Be nice, and check out our Code of Conduct.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fdatascience.stackexchange.com%2fquestions%2f47710%2fwhat-library-or-graph-drawing-algorithm-can-help-me-generate-a-graph-of-216-nod%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Andrew Cheong is a new contributor. Be nice, and check out our Code of Conduct.
Andrew Cheong is a new contributor. Be nice, and check out our Code of Conduct.
Andrew Cheong is a new contributor. Be nice, and check out our Code of Conduct.
Andrew Cheong is a new contributor. Be nice, and check out our Code of Conduct.
Thanks for contributing an answer to Data Science Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
Use MathJax to format equations. MathJax reference.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fdatascience.stackexchange.com%2fquestions%2f47710%2fwhat-library-or-graph-drawing-algorithm-can-help-me-generate-a-graph-of-216-nod%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
