Apparently, I can only load: node_modules/sigma/build/sigma.require.js
as trying to load things in the src directory commit another sigma to the global window object.
Getting error that the stylesheet cannot be loaded and the graph is not rendered with require...
See sigma.js issue https://github.com/jacomyal/sigma.js/issues/186 and look for some tests for the sigma function.
Also, here is webpack: https://github.com/jacomyal/sigma.js/issues/730
Here is one with browserify: https://github.com/jacomyal/sigma.js/issues/680
How to use bower: https://github.com/jacomyal/sigma.js/issues/439
Browserify: http://browserify.org/
Thursday, August 31, 2017
Load SigmaJS with Require
Load sigmajs through requirejs
-- Stackoverflow (use the npm module sigma)
(https://stackoverflow.com/questions/24955125/load-sigmajs-through-requirejs#24991689)
https://github.com/jacomyal/sigma.js/issues/396
Bug:
Monday, August 28, 2017
Modified createprimatives.js works with SIgma.js (decoupled)
Feed the output from:http://localhost/cp3-bc-node-arc-d3/node-arc-d3/js/createprimitives.js via http://localhost/cp3-bc-node-arc-d3/node-arc-d3/index.html with document.write overwrite.
http://localhost/sigma.js/br-examples/edge2-render-d-index-old-aug22.html
Compare to the d3 graph earlier:
Changing the JSON format for display in node-arc-d3
Modify createprimitives.js so it's output changes from d3.js JSON format to Sigma.js format:
Triples fed for the creation of the json object for d3sketch (node-arc-d3)
From:
base5:old-Food-Growing-Methods.ttl,dcterms:title,"Food Growing Methods",base5:old-Food-Growing-Methods.ttl,rdfs:comment,"For independence and resource...,base5:old-Food-Growing-Methods.ttl,lsi:averageEstInvestmentCost,"0.0(investment cost pulled fr...,base5:old-Food-Growing-Methods.ttl,lsi:averageEstTimetoMaturity,"0.0 (time to maturity pulled ...,base5:old-Food-Growing-Methods.ttl,lsi:commercialStatus,"Research",base5:old-Food-Growing-Methods.ttl,lsi:relatedIndustriesFields,"Health and Medicine",base5:old-Food-Growing-Methods.ttl,lsi:label,ns1:biological-support,base5:old-Food-Growing-Methods.ttl,lsi:label,ns1:habitation-infrastructure
To:
{"links":[{"source":"base5:old-Food-Growing-Methods.ttl","target":"\"Food Growing Methods\"","value":1,"label":"dcterms:title"},{"source":"base5:old-Food-Growing-Methods.ttl","target":"\"For independence and resource...","value":1,"label":"rdfs:comment"},{"source":"base5:old-Food-Growing-Methods.ttl","target":"\"0.0(investment cost pulled fr...","value":1,"label":"lsi:averageEstInvestmentCost"},{"source":"base5:old-Food-Growing-Methods.ttl","target":"\"0.0 (time to maturity pulled ...","value":1,"label":"lsi:averageEstTimetoMaturity"},{"source":"base5:old-Food-Growing-Methods.ttl","target":"\"Research\"","value":1,"label":"lsi:commercialStatus"},{"source":"base5:old-Food-Growing-Methods.ttl","target":"\"Health and Medicine\"","value":1,"label":"lsi:relatedIndustriesFields"},{"source":"base5:old-Food-Growing-Methods.ttl","target":"ns1:biological-support","value":1,"label":"lsi:label"},{"source":"base5:old-Food-Growing-Methods.ttl","target":"ns1:habitation-infrastructure","value":1,"label":"lsi:label"}],"nodes":[{"id":"\"0.0 (time to maturity pulled ...","group":1},{"id":"\"0.0(investment cost pulled fr...","group":1},{"id":"\"Food Growing Methods\"","group":1},{"id":"\"For independence and resource...","group":1},{"id":"\"Health and Medicine\"","group":1},{"id":"\"Research\"","group":1},{"id":"base5:old-Food-Growing-Methods.ttl","group":1},{"id":"ns1:biological-support","group":1},{"id":"ns1:habitation-infrastructure","group":1}]}
base5:old-Food-Growing-Methods.ttl,dcterms:title,"Food Growing Methods",base5:old-Food-Growing-Methods.ttl,rdfs:comment,"For independence and resource...,base5:old-Food-Growing-Methods.ttl,lsi:averageEstInvestmentCost,"0.0(investment cost pulled fr...,base5:old-Food-Growing-Methods.ttl,lsi:averageEstTimetoMaturity,"0.0 (time to maturity pulled ...,base5:old-Food-Growing-Methods.ttl,lsi:commercialStatus,"Research",base5:old-Food-Growing-Methods.ttl,lsi:relatedIndustriesFields,"Health and Medicine",base5:old-Food-Growing-Methods.ttl,lsi:label,ns1:biological-support,base5:old-Food-Growing-Methods.ttl,lsi:label,ns1:habitation-infrastructure
To:
{"links":[{"source":"base5:old-Food-Growing-Methods.ttl","target":"\"Food Growing Methods\"","value":1,"label":"dcterms:title"},{"source":"base5:old-Food-Growing-Methods.ttl","target":"\"For independence and resource...","value":1,"label":"rdfs:comment"},{"source":"base5:old-Food-Growing-Methods.ttl","target":"\"0.0(investment cost pulled fr...","value":1,"label":"lsi:averageEstInvestmentCost"},{"source":"base5:old-Food-Growing-Methods.ttl","target":"\"0.0 (time to maturity pulled ...","value":1,"label":"lsi:averageEstTimetoMaturity"},{"source":"base5:old-Food-Growing-Methods.ttl","target":"\"Research\"","value":1,"label":"lsi:commercialStatus"},{"source":"base5:old-Food-Growing-Methods.ttl","target":"\"Health and Medicine\"","value":1,"label":"lsi:relatedIndustriesFields"},{"source":"base5:old-Food-Growing-Methods.ttl","target":"ns1:biological-support","value":1,"label":"lsi:label"},{"source":"base5:old-Food-Growing-Methods.ttl","target":"ns1:habitation-infrastructure","value":1,"label":"lsi:label"}],"nodes":[{"id":"\"0.0 (time to maturity pulled ...","group":1},{"id":"\"0.0(investment cost pulled fr...","group":1},{"id":"\"Food Growing Methods\"","group":1},{"id":"\"For independence and resource...","group":1},{"id":"\"Health and Medicine\"","group":1},{"id":"\"Research\"","group":1},{"id":"base5:old-Food-Growing-Methods.ttl","group":1},{"id":"ns1:biological-support","group":1},{"id":"ns1:habitation-infrastructure","group":1}]}
Saturday, August 26, 2017
Friday, August 25, 2017
How do I rotate the edge label so that it is at an angle to the edge...perhaps parallel to a side of the screen
Draw Edge Label in Sigma.js (look at the rotate function):
https://stackoverflow.com/questions/19401147/show-edge-label-in-sigma-js#27558504
https://stackoverflow.com/questions/19401147/show-edge-label-in-sigma-js#27558504
Sigma Layout does not fit in Container Window??
http://localhost/sigma.js/br-examples/d-index-old-aug22.html
Following a previous blog post:
http://raptorlicious.blogspot.com/2017/08/debugging-window-thing-in-sigmajs.html
document.getElementById('graph-container').offsetWidth == 821
document.getElementById('graph-container').clientWidth == 811 (want?)
document.getElementById('graph-container').offSetHeight == 256
document.getElementById('graph-container').clientHeight == 247 (want?)
Previously, in D3 I fit the container by:
Following a previous blog post:
http://raptorlicious.blogspot.com/2017/08/debugging-window-thing-in-sigmajs.html
document.getElementById('graph-container').offsetWidth == 821
document.getElementById('graph-container').clientWidth == 811 (want?)
document.getElementById('graph-container').offSetHeight == 256
document.getElementById('graph-container').clientHeight == 247 (want?)
Previously, in D3 I fit the container by:
var height = document.getElementById('graphcontainer').clientHeight - 4
* document.getElementById('graphcontainer').clientTop;
var width = document.getElementById('graphcontainer').clientWidth - 2
* document.getElementById('graphcontainer').clientLeft; ++++++++++++++++++++++++++++++++++++ Do not worry about layout for now. You can fix this and the buttons later. For now look at
preparing the data for sigma.js instead of D3.
Making the Node Labels always visibke is as easy as setting labelThreshold to 1
s = new sigma({
graph: g,
settings: {
minNodeSize: 4,
maxNodeSize: 2,
minEdgeSize: 1,
maxEdgeSize: 1,
labelThreshold: 1
}
});
https://github.com/jacomyal/sigma.js/wiki/Settings
(thanks to:
https://stackoverflow.com/questions/22434121/how-to-inactive-sigma-js-node-hover)
graph: g,
settings: {
minNodeSize: 4,
maxNodeSize: 2,
minEdgeSize: 1,
maxEdgeSize: 1,
labelThreshold: 1
}
});
https://github.com/jacomyal/sigma.js/wiki/Settings
(thanks to:
https://stackoverflow.com/questions/22434121/how-to-inactive-sigma-js-node-hover)
I like this plotting from json behaviour, but how about showing node labels?
How do I show the node labels??
I have something I like, but I want to show the node labels.
https://gist.github.com/bshambaugh/9b9b4f89c321deea8f1f8b5c9948048d
The code at http://localhost/sigma.js/br-examples/custom-node-renderer.html seems to show the node labels by default, what is the code that does this???
I have something I like, but I want to show the node labels.
https://gist.github.com/bshambaugh/9b9b4f89c321deea8f1f8b5c9948048d
The code at http://localhost/sigma.js/br-examples/custom-node-renderer.html seems to show the node labels by default, what is the code that does this???
Thursday, August 24, 2017
Precalculating positions for Sigma.js
Precalculating positions (using ForceAtlas2) of graph in sigma.js using node.js
https://stackoverflow.com/questions/28844080/pre-calculating-positions-using-forceatlas2-of-graph-in-sigma-js-using-node-js
http://www.ezdev.org/view/sigma-js/67
Interesting examples or experiments from Sigma.js
http://localhost/sigma.js/br-examples/br2-load-external-json.html
http://localhost/sigma.js/br-examples/c-events.html
http://localhost/sigma.js/br-examples/index-old-aug22.html
http://localhost/sigma.js/br-examples/noverlap.html
Also try adding: http://localhost/sigma.js/br-examples/drag-nodes.html
Wednesday, August 23, 2017
javascript button links
http://javascript-coder.com/button/javascript-button-p1.phtml
(JavaScript Button)
http://www.javascriptkit.com/jsref/button.shtml#e1
(JavaScipt Button)
Also see: How to Scale SVG
https://css-tricks.com/scale-svg/
(JavaScript Button)
http://www.javascriptkit.com/jsref/button.shtml#e1
(JavaScipt Button)
Also see: How to Scale SVG
https://css-tricks.com/scale-svg/
Tuesday, August 22, 2017
Debugging the window thing in sigma.js
document.getElementById('graph-container').offsetWidth
...width of the svg.... 821
document.getElementById('graph-container').offSetHeight
... height of the svg .... 256
document.getElementById('graph-container').clientWidth
... some other width ... 811
document.getElementById('graph-container').clientHeight
... some other height ... 247
++++++++++++++++++++++++++++++++++
./node_modules/grunt-zip/test/expected/nested_unzip/bootstrap/css/bootstrap.css:.container,
./node_modules/grunt-zip/test/expected/nested_unzip/bootstrap/css/bootstrap.css:.navbar-static-top .container,
./node_modules/grunt-zip/test/expected/nested_unzip/bootstrap/css/bootstrap.css:.navbar-fixed-top .container,
./node_modules/grunt-zip/test/expected/nested_unzip/bootstrap/css/bootstrap.css:.navbar-fixed-bottom .container {
./node_modules/grunt-zip/test/expected/nested_unzip/bootstrap/css/bootstrap.css:.container {
./node_modules/grunt-zip/test/expected/nested_unzip/bootstrap/css/bootstrap.css:.container:before,
./node_modules/grunt-zip/test/expected/nested_unzip/bootstrap/css/bootstrap.css:.container:after {
./node_modules/grunt-zip/test/expected/nested_unzip/bootstrap/css/bootstrap.css:.container:after {
./node_modules/grunt-zip/test/expected/nested_unzip/bootstrap/css/bootstrap.css:.container-fluid {
./node_modules/grunt-zip/test/expected/nested_unzip/bootstrap/css/bootstrap.css:.container-fluid:before,
./node_modules/grunt-zip/test/expected/nested_unzip/bootstrap/css/bootstrap.css:.container-fluid:after {
./node_modules/grunt-zip/test/expected/nested_unzip/bootstrap/css/bootstrap.css:.container-fluid:after {
./node_modules/grunt-zip/test/expected/nested_unzip/bootstrap/css/bootstrap.css:.navbar .container {
./node_modules/grunt-zip/test/expected/nested_unzip/bootstrap/css/bootstrap.css:.navbar-static-top .container,
./node_modules/grunt-zip/test/expected/nested_unzip/bootstrap/css/bootstrap.css:.navbar-fixed-top .container,
./node_modules/grunt-zip/test/expected/nested_unzip/bootstrap/css/bootstrap.css:.navbar-fixed-bottom .container {
./plugins/sigma.layout.noverlap/README.md: container: 'graph-container'
./plugins/sigma.parsers.json/README.md: { container: 'myContainer' }
./plugins/sigma.exporters.svg/sigma.exporters.svg.js: // Creating a dummy container
./plugins/sigma.exporters.svg/sigma.exporters.svg.js: var container = document.createElement('div');
./plugins/sigma.exporters.svg/sigma.exporters.svg.js: container.setAttribute('width', w);
./plugins/sigma.exporters.svg/sigma.exporters.svg.js: container.setAttribute('height', h);
./plugins/sigma.exporters.svg/sigma.exporters.svg.js: container.setAttribute('style', 'position:absolute; top: 0px; left:0px; width: ' + w + 'px; height: ' + h + 'px;');
./plugins/sigma.exporters.svg/sigma.exporters.svg.js: container: container,
./plugins/sigma.exporters.svg/sigma.exporters.svg.js: var svg = container.querySelector('svg');
./plugins/sigma.exporters.svg/sigma.exporters.svg.js: container = null;
./plugins/sigma.renderers.edgeLabels/README.md: container: 'graph-container',
./plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js: * the real container, not in canvas.
./plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js: _mouse = renderer.container.lastChild,
./plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js: _mouse = renderer.container.firstChild;
./plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js: var offset = calculateOffset(_renderer.container),
./plugins/sigma.neo4j.cypher/README.md: { container: 'myContainer' }
./plugins/sigma.neo4j.cypher/README.md: { container: 'myContainer' }
./plugins/sigma.parsers.gexf/README.md: { container: 'myContainer' }
./src/sigma.settings.js: // {string} Indicates of to scale the graph relatively to its container.
./src/misc/sigma.misc.bindDOMEvents.js: sigma.misc.bindDOMEvents = function(container) {
./src/misc/sigma.misc.bindDOMEvents.js: container.addEventListener('click', click, false);
./src/misc/sigma.misc.bindDOMEvents.js: sigma.utils.doubleClick(container, 'click', doubleClick);
./src/misc/sigma.misc.bindDOMEvents.js: container.addEventListener('touchstart', click, false);
./src/misc/sigma.misc.bindDOMEvents.js: sigma.utils.doubleClick(container, 'touchstart', doubleClick);
./src/misc/sigma.misc.bindDOMEvents.js: container.addEventListener('mouseover', onOver, true);
./src/misc/sigma.misc.bindDOMEvents.js: container.addEventListener('mouseout', onOut, true);
./src/sigma.core.js: * polyfill) will be used as the only renderer, with the container specified
./src/sigma.core.js: * > container: 'my-container-id'
./src/sigma.core.js: * Then, since the only required parameter is the DOM container, there are
./src/sigma.core.js: * > s1 = new sigma('my-container-id');
./src/sigma.core.js: * > s2 = new sigma(document.getElementById('my-container-id'));
./src/sigma.core.js: * > container: document.getElementById('my-container-id')
./src/sigma.core.js: * > container: document.getElementById('my-container-id')
./src/sigma.core.js: // - If there are no renderer list nor "container" object, it will be
./src/sigma.core.js: // considered as the container itself (a DOM element).
./src/sigma.core.js: // as the ID of the DOM container.
./src/sigma.core.js: // Also check "renderer" and "container" keys:
./src/sigma.core.js: o = _conf.renderers || _conf.renderer || _conf.container;
./src/sigma.core.js: (typeof o === 'object' && 'container' in o)
./src/sigma.core.js: container: document.getElementById(o)
./src/sigma.core.js: container: o
./src/sigma.core.js: // If the container still is a string, we get it by id
./src/sigma.core.js: if (typeof o.container === 'string')
./src/sigma.core.js: o.container = document.getElementById(o.container);
./src/renderers/sigma.renderers.webgl.js: if (!(options.container instanceof HTMLElement))
./src/renderers/sigma.renderers.webgl.js: this.container = this.options.container;
./src/renderers/sigma.renderers.webgl.js: * finally appends it to the container.
./src/renderers/sigma.renderers.webgl.js: this.container.appendChild(dom);
./src/renderers/sigma.renderers.webgl.js: * This method resizes each DOM elements in the container and stores the new
./src/renderers/sigma.renderers.webgl.js: * @param {?number} width The new width of the container.
./src/renderers/sigma.renderers.webgl.js: * @param {?number} height The new height of the container.
./src/renderers/sigma.renderers.webgl.js: this.width = this.container.offsetWidth;
./src/renderers/sigma.renderers.webgl.js: this.height = this.container.offsetHeight;
./src/renderers/sigma.renderers.canvas.js: if (!(options.container instanceof HTMLElement))
./src/renderers/sigma.renderers.canvas.js: this.container = this.options.container;
./src/renderers/sigma.renderers.canvas.js: * finally appends it to the container.
./src/renderers/sigma.renderers.canvas.js: this.container.appendChild(dom);
./src/renderers/sigma.renderers.canvas.js: * This method resizes each DOM elements in the container and stores the new
./src/renderers/sigma.renderers.canvas.js: * @param {?number} width The new width of the container.
./src/renderers/sigma.renderers.canvas.js: * @param {?number} height The new height of the container.
./src/renderers/sigma.renderers.canvas.js: this.width = this.container.offsetWidth;
./src/renderers/sigma.renderers.canvas.js: this.height = this.container.offsetHeight;
./src/renderers/sigma.renderers.svg.js: if (!(options.container instanceof HTMLElement))
./src/renderers/sigma.renderers.svg.js: this.container = this.options.container;
./src/renderers/sigma.renderers.svg.js: * finally appends it to the container.
./src/renderers/sigma.renderers.svg.js: this.domElements.graph = this.container.appendChild(dom);
./src/renderers/sigma.renderers.svg.js: this.container.appendChild(canvas);
./src/renderers/sigma.renderers.svg.js: * This method resizes each DOM elements in the container and stores the new
./src/renderers/sigma.renderers.svg.js: * @param {?number} width The new width of the container.
./src/renderers/sigma.renderers.svg.js: * @param {?number} height The new height of the container.
./src/renderers/sigma.renderers.svg.js: this.width = this.container.offsetWidth;
./src/renderers/sigma.renderers.svg.js: this.height = this.container.offsetHeight;
./src/renderers/webgl/sigma.webgl.edges.def.js: // Scale from [[-1 1] [-1 1]] to the container:
./src/renderers/webgl/sigma.webgl.edges.arrow.js: // Scale from [[-1 1] [-1 1]] to the container:
./src/renderers/webgl/sigma.webgl.nodes.fast.js: // Scale from [[-1 1] [-1 1]] to the container:
./src/renderers/webgl/sigma.webgl.edges.thickLine.js: // Scale from [[-1 1] [-1 1]] to the container:
./src/renderers/webgl/sigma.webgl.edges.fast.js: // Scale from [[-1 1] [-1 1]] to the container:
./src/renderers/webgl/sigma.webgl.nodes.def.js: // Scale from [[-1 1] [-1 1]] to the container:
./src/renderers/webgl/sigma.webgl.edges.thickLineCPU.js: // Scale from [[-1 1] [-1 1]] to the container:
./src/renderers/webgl/sigma.webgl.edges.thickLineGPU.js: // Scale from [[-1 1] [-1 1]] to the container:
./src/classes/sigma.classes.graph.js: // Add empty containers for edges indexes:
./test/qunit/qunit.css:#qunit-modulefilter-container {
./test/qunit/qunit.js: // * Add handlers to the individual elements instead of the container
./test/qunit/qunit.js: moduleFilter.setAttribute( "id", "qunit-modulefilter-container" );
./test/unit.core.js: // Let's add a temporary container:
./test/unit.core.js: container: dom
./test/unit.core.js: container: dom
./test/unit.core.js: container: dom
./test/unit.core.js: container: 'abc'
./test/unit.core.js: container: dom
./test/unit.core.js: }, '"new sigma({ container: "abc" })" instantiate the default renderer in the div #abc.');
./test/unit.core.js: container: document.getElementById('abc')
./test/unit.core.js: container: dom
./test/unit.core.js: }, '"new sigma({ container: document.getElementById("abc") })" instantiate the default renderer in the div #abc.');
./test/unit.core.js: { container: dom },
./test/unit.core.js: { container: dom }
./test/unit.core.js: container: document.getElementById('abc')
./test/unit.core.js: container: dom
./test/unit.core.js: }, '"new sigma({ renderers: [{ container: document.getElementById("abc") }] })" instantiate the default renderer in the div #abc.');
./test/unit.core.js: // Let's add a temporary container:
./test/unit.core.js: r1 = s.addRenderer({ container: dom, camera: c1, id: '0' }),
./test/unit.core.js: r2 = s.addRenderer({ container: dom, camera: c2, id: '1' }),
./test/unit.core.js: r3 = s.addRenderer({ container: dom, camera: c2, id: '2' });
./test/unit.core.js: r = s.addRenderer({ camera: c, container: dom, id: 'myRenderer' });
./test/unit.core.js: s.addRenderer({ camera: c, container: dom, id: 'myRenderer' });
./test/unit.core.js: s.addRenderer({ camera: c, container: dom });
...width of the svg.... 821
document.getElementById('graph-container').offSetHeight
... height of the svg .... 256
document.getElementById('graph-container').clientWidth
... some other width ... 811
document.getElementById('graph-container').clientHeight
... some other height ... 247
++++++++++++++++++++++++++++++++++
./node_modules/grunt-zip/test/expected/nested_unzip/bootstrap/css/bootstrap.css:.container,
./node_modules/grunt-zip/test/expected/nested_unzip/bootstrap/css/bootstrap.css:.navbar-static-top .container,
./node_modules/grunt-zip/test/expected/nested_unzip/bootstrap/css/bootstrap.css:.navbar-fixed-top .container,
./node_modules/grunt-zip/test/expected/nested_unzip/bootstrap/css/bootstrap.css:.navbar-fixed-bottom .container {
./node_modules/grunt-zip/test/expected/nested_unzip/bootstrap/css/bootstrap.css:.container {
./node_modules/grunt-zip/test/expected/nested_unzip/bootstrap/css/bootstrap.css:.container:before,
./node_modules/grunt-zip/test/expected/nested_unzip/bootstrap/css/bootstrap.css:.container:after {
./node_modules/grunt-zip/test/expected/nested_unzip/bootstrap/css/bootstrap.css:.container:after {
./node_modules/grunt-zip/test/expected/nested_unzip/bootstrap/css/bootstrap.css:.container-fluid {
./node_modules/grunt-zip/test/expected/nested_unzip/bootstrap/css/bootstrap.css:.container-fluid:before,
./node_modules/grunt-zip/test/expected/nested_unzip/bootstrap/css/bootstrap.css:.container-fluid:after {
./node_modules/grunt-zip/test/expected/nested_unzip/bootstrap/css/bootstrap.css:.container-fluid:after {
./node_modules/grunt-zip/test/expected/nested_unzip/bootstrap/css/bootstrap.css:.navbar .container {
./node_modules/grunt-zip/test/expected/nested_unzip/bootstrap/css/bootstrap.css:.navbar-static-top .container,
./node_modules/grunt-zip/test/expected/nested_unzip/bootstrap/css/bootstrap.css:.navbar-fixed-top .container,
./node_modules/grunt-zip/test/expected/nested_unzip/bootstrap/css/bootstrap.css:.navbar-fixed-bottom .container {
./plugins/sigma.layout.noverlap/README.md: container: 'graph-container'
./plugins/sigma.parsers.json/README.md: { container: 'myContainer' }
./plugins/sigma.exporters.svg/sigma.exporters.svg.js: // Creating a dummy container
./plugins/sigma.exporters.svg/sigma.exporters.svg.js: var container = document.createElement('div');
./plugins/sigma.exporters.svg/sigma.exporters.svg.js: container.setAttribute('width', w);
./plugins/sigma.exporters.svg/sigma.exporters.svg.js: container.setAttribute('height', h);
./plugins/sigma.exporters.svg/sigma.exporters.svg.js: container.setAttribute('style', 'position:absolute; top: 0px; left:0px; width: ' + w + 'px; height: ' + h + 'px;');
./plugins/sigma.exporters.svg/sigma.exporters.svg.js: container: container,
./plugins/sigma.exporters.svg/sigma.exporters.svg.js: var svg = container.querySelector('svg');
./plugins/sigma.exporters.svg/sigma.exporters.svg.js: container = null;
./plugins/sigma.renderers.edgeLabels/README.md: container: 'graph-container',
./plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js: * the real container, not in canvas.
./plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js: _mouse = renderer.container.lastChild,
./plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js: _mouse = renderer.container.firstChild;
./plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js: var offset = calculateOffset(_renderer.container),
./plugins/sigma.neo4j.cypher/README.md: { container: 'myContainer' }
./plugins/sigma.neo4j.cypher/README.md: { container: 'myContainer' }
./plugins/sigma.parsers.gexf/README.md: { container: 'myContainer' }
./src/sigma.settings.js: // {string} Indicates of to scale the graph relatively to its container.
./src/misc/sigma.misc.bindDOMEvents.js: sigma.misc.bindDOMEvents = function(container) {
./src/misc/sigma.misc.bindDOMEvents.js: container.addEventListener('click', click, false);
./src/misc/sigma.misc.bindDOMEvents.js: sigma.utils.doubleClick(container, 'click', doubleClick);
./src/misc/sigma.misc.bindDOMEvents.js: container.addEventListener('touchstart', click, false);
./src/misc/sigma.misc.bindDOMEvents.js: sigma.utils.doubleClick(container, 'touchstart', doubleClick);
./src/misc/sigma.misc.bindDOMEvents.js: container.addEventListener('mouseover', onOver, true);
./src/misc/sigma.misc.bindDOMEvents.js: container.addEventListener('mouseout', onOut, true);
./src/sigma.core.js: * polyfill) will be used as the only renderer, with the container specified
./src/sigma.core.js: * > container: 'my-container-id'
./src/sigma.core.js: * Then, since the only required parameter is the DOM container, there are
./src/sigma.core.js: * > s1 = new sigma('my-container-id');
./src/sigma.core.js: * > s2 = new sigma(document.getElementById('my-container-id'));
./src/sigma.core.js: * > container: document.getElementById('my-container-id')
./src/sigma.core.js: * > container: document.getElementById('my-container-id')
./src/sigma.core.js: // - If there are no renderer list nor "container" object, it will be
./src/sigma.core.js: // considered as the container itself (a DOM element).
./src/sigma.core.js: // as the ID of the DOM container.
./src/sigma.core.js: // Also check "renderer" and "container" keys:
./src/sigma.core.js: o = _conf.renderers || _conf.renderer || _conf.container;
./src/sigma.core.js: (typeof o === 'object' && 'container' in o)
./src/sigma.core.js: container: document.getElementById(o)
./src/sigma.core.js: container: o
./src/sigma.core.js: // If the container still is a string, we get it by id
./src/sigma.core.js: if (typeof o.container === 'string')
./src/sigma.core.js: o.container = document.getElementById(o.container);
./src/renderers/sigma.renderers.webgl.js: if (!(options.container instanceof HTMLElement))
./src/renderers/sigma.renderers.webgl.js: this.container = this.options.container;
./src/renderers/sigma.renderers.webgl.js: * finally appends it to the container.
./src/renderers/sigma.renderers.webgl.js: this.container.appendChild(dom);
./src/renderers/sigma.renderers.webgl.js: * This method resizes each DOM elements in the container and stores the new
./src/renderers/sigma.renderers.webgl.js: * @param {?number} width The new width of the container.
./src/renderers/sigma.renderers.webgl.js: * @param {?number} height The new height of the container.
./src/renderers/sigma.renderers.webgl.js: this.width = this.container.offsetWidth;
./src/renderers/sigma.renderers.webgl.js: this.height = this.container.offsetHeight;
./src/renderers/sigma.renderers.canvas.js: if (!(options.container instanceof HTMLElement))
./src/renderers/sigma.renderers.canvas.js: this.container = this.options.container;
./src/renderers/sigma.renderers.canvas.js: * finally appends it to the container.
./src/renderers/sigma.renderers.canvas.js: this.container.appendChild(dom);
./src/renderers/sigma.renderers.canvas.js: * This method resizes each DOM elements in the container and stores the new
./src/renderers/sigma.renderers.canvas.js: * @param {?number} width The new width of the container.
./src/renderers/sigma.renderers.canvas.js: * @param {?number} height The new height of the container.
./src/renderers/sigma.renderers.canvas.js: this.width = this.container.offsetWidth;
./src/renderers/sigma.renderers.canvas.js: this.height = this.container.offsetHeight;
./src/renderers/sigma.renderers.svg.js: if (!(options.container instanceof HTMLElement))
./src/renderers/sigma.renderers.svg.js: this.container = this.options.container;
./src/renderers/sigma.renderers.svg.js: * finally appends it to the container.
./src/renderers/sigma.renderers.svg.js: this.domElements.graph = this.container.appendChild(dom);
./src/renderers/sigma.renderers.svg.js: this.container.appendChild(canvas);
./src/renderers/sigma.renderers.svg.js: * This method resizes each DOM elements in the container and stores the new
./src/renderers/sigma.renderers.svg.js: * @param {?number} width The new width of the container.
./src/renderers/sigma.renderers.svg.js: * @param {?number} height The new height of the container.
./src/renderers/sigma.renderers.svg.js: this.width = this.container.offsetWidth;
./src/renderers/sigma.renderers.svg.js: this.height = this.container.offsetHeight;
./src/renderers/webgl/sigma.webgl.edges.def.js: // Scale from [[-1 1] [-1 1]] to the container:
./src/renderers/webgl/sigma.webgl.edges.arrow.js: // Scale from [[-1 1] [-1 1]] to the container:
./src/renderers/webgl/sigma.webgl.nodes.fast.js: // Scale from [[-1 1] [-1 1]] to the container:
./src/renderers/webgl/sigma.webgl.edges.thickLine.js: // Scale from [[-1 1] [-1 1]] to the container:
./src/renderers/webgl/sigma.webgl.edges.fast.js: // Scale from [[-1 1] [-1 1]] to the container:
./src/renderers/webgl/sigma.webgl.nodes.def.js: // Scale from [[-1 1] [-1 1]] to the container:
./src/renderers/webgl/sigma.webgl.edges.thickLineCPU.js: // Scale from [[-1 1] [-1 1]] to the container:
./src/renderers/webgl/sigma.webgl.edges.thickLineGPU.js: // Scale from [[-1 1] [-1 1]] to the container:
./src/classes/sigma.classes.graph.js: // Add empty containers for edges indexes:
./test/qunit/qunit.css:#qunit-modulefilter-container {
./test/qunit/qunit.js: // * Add handlers to the individual elements instead of the container
./test/qunit/qunit.js: moduleFilter.setAttribute( "id", "qunit-modulefilter-container" );
./test/unit.core.js: // Let's add a temporary container:
./test/unit.core.js: container: dom
./test/unit.core.js: container: dom
./test/unit.core.js: container: dom
./test/unit.core.js: container: 'abc'
./test/unit.core.js: container: dom
./test/unit.core.js: }, '"new sigma({ container: "abc" })" instantiate the default renderer in the div #abc.');
./test/unit.core.js: container: document.getElementById('abc')
./test/unit.core.js: container: dom
./test/unit.core.js: }, '"new sigma({ container: document.getElementById("abc") })" instantiate the default renderer in the div #abc.');
./test/unit.core.js: { container: dom },
./test/unit.core.js: { container: dom }
./test/unit.core.js: container: document.getElementById('abc')
./test/unit.core.js: container: dom
./test/unit.core.js: }, '"new sigma({ renderers: [{ container: document.getElementById("abc") }] })" instantiate the default renderer in the div #abc.');
./test/unit.core.js: // Let's add a temporary container:
./test/unit.core.js: r1 = s.addRenderer({ container: dom, camera: c1, id: '0' }),
./test/unit.core.js: r2 = s.addRenderer({ container: dom, camera: c2, id: '1' }),
./test/unit.core.js: r3 = s.addRenderer({ container: dom, camera: c2, id: '2' });
./test/unit.core.js: r = s.addRenderer({ camera: c, container: dom, id: 'myRenderer' });
./test/unit.core.js: s.addRenderer({ camera: c, container: dom, id: 'myRenderer' });
./test/unit.core.js: s.addRenderer({ camera: c, container: dom });
Resources for Creating a Custom Button with Javascript
In StackOverflow from search result:
https://stackoverflow.com/questions/6461252/custom-upload-button
Or try looking at jQuery-UI.css
https://stackoverflow.com/questions/6461252/custom-upload-button
Or try looking at jQuery-UI.css
Changes to github repo to support jquery-ui cont
Final move:
/var/www/html/cp2-bc-node-arc-d3/node-arc-d3/node_modules/jquery-ui/ui#
ls ../
AUTHORS.txt CONTRIBUTING.md demos-test/ .gitattributes .jshintrc .npmignore tests/ ui/
bower.json .csslintrc .editorconfig Gruntfile.js LICENSE.txt package.json themes/
build/ demos/ external/ .jscsrc .mailmap README.md .travis.yml
match to:
baseUrl: window.location.pathname.indexOf( "node-arc-d3/" ) !== -1 ? "node_modules/jquery-ui/ui/" : "../node_modules/jquery-ui/ui/",
paths: {
lodash: "../../lodash/lodash",
jquery: "../external/jquery/jquery",
external: "../external/",
// d3sketch: "../demos/d3sketch",
d3: "../../d3/build/d3",
// d3: "../demos/d3.v4.min",
// isthebest: "../demos/isthebest",
fn_parsefile: "../demos-test/js/libraries/fn_parsefile",
n3lib: "../demos-test/js/libraries/bun2-exportN3",
jsonld: "../../jsonld/js/jsonld",
fn_ldpsparql: "../demos-test/js/libraries/fn_ldpsparql",
fn_triplemodifications: "../demos-test/js/libraries/fn_triplemodifications",
parsetriples: "../demos-test/js/parsetriples",
urijs: "../../urijs/src/",
triplemodifications: "../demos-test/js/triplemodifications",
createprimitives: "../demos-test/js/createprimitives",
d3sketch: "../demos-test/js/d3sketch"
// d3: "../../d3/build/d3"
},
shim: {
"external/globalize/globalize.culture.de-DE": [ "external/globalize/globalize" ],
"external/globalize/globalize.culture.ja-JP": [ "external/globalize/globalize" ]
++++++
observing, I need to change all the custom library paths to begin with ls ../../../js/
move images/ for jquery-ui to css/ (this could be inspiration for creating your own buttons
See: https://github.com/bshambaugh/node-arc-d3 for the result
/var/www/html/cp2-bc-node-arc-d3/node-arc-d3/node_modules/jquery-ui/ui#
ls ../
AUTHORS.txt CONTRIBUTING.md demos-test/ .gitattributes .jshintrc .npmignore tests/ ui/
bower.json .csslintrc .editorconfig Gruntfile.js LICENSE.txt package.json themes/
build/ demos/ external/ .jscsrc .mailmap README.md .travis.yml
match to:
baseUrl: window.location.pathname.indexOf( "node-arc-d3/" ) !== -1 ? "node_modules/jquery-ui/ui/" : "../node_modules/jquery-ui/ui/",
paths: {
lodash: "../../lodash/lodash",
jquery: "../external/jquery/jquery",
external: "../external/",
// d3sketch: "../demos/d3sketch",
d3: "../../d3/build/d3",
// d3: "../demos/d3.v4.min",
// isthebest: "../demos/isthebest",
fn_parsefile: "../demos-test/js/libraries/fn_parsefile",
n3lib: "../demos-test/js/libraries/bun2-exportN3",
jsonld: "../../jsonld/js/jsonld",
fn_ldpsparql: "../demos-test/js/libraries/fn_ldpsparql",
fn_triplemodifications: "../demos-test/js/libraries/fn_triplemodifications",
parsetriples: "../demos-test/js/parsetriples",
urijs: "../../urijs/src/",
triplemodifications: "../demos-test/js/triplemodifications",
createprimitives: "../demos-test/js/createprimitives",
d3sketch: "../demos-test/js/d3sketch"
// d3: "../../d3/build/d3"
},
shim: {
"external/globalize/globalize.culture.de-DE": [ "external/globalize/globalize" ],
"external/globalize/globalize.culture.ja-JP": [ "external/globalize/globalize" ]
++++++
observing, I need to change all the custom library paths to begin with ls ../../../js/
move images/ for jquery-ui to css/ (this could be inspiration for creating your own buttons
See: https://github.com/bshambaugh/node-arc-d3 for the result
Monday, August 21, 2017
Moving the bootstrap jquery-ui script to another directory...
With:
http://localhost/cp2-bc-node-arc-d3/node-arc-d3/node_modules/jquery-ui/demos/2-sm-other-demo.html
select:
var scripts = document.getElementsByTagName( "script" );
scripts
2:
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="effect" src="../ui/effect.js"></script>
3:
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="demos" src="../ui/demos.js"></script>
var script = scripts[ scripts.length - 1];
script
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="urijs/SecondLevelDomains" src="../ui/../../urijs/src//SecondLevelDomains.js">
var pathParts = window.location.pathname.split( "/" );
undefined
pathParts[ pathParts.length - 2 ]
"demos"
With:
http://localhost/cp2-bc-node-arc-d3/node-arc-d3/node_modules/jquery-ui/demos/dialog/1-sm-other-demo.html
var scripts = document.getElementsByTagName( "script" );
scripts
2:
"http://localhost/cp2-bc-node-arc-d3/node-arc-d3/node_modules/jquery-ui/ui/effect.js
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="effect" src="../../ui/effect.js"></script>
3:
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="widgets/dialog" src="../../ui/widgets/dialog.js"></script>
var pathParts = window.location.pathname.split( "/" );
pathParts[ pathParts.length - 2 ]
"dialog"
+++++++++++++++++++
http://localhost/cp2-bc-node-arc-d3/node-arc-d3/node_modules/jquery-ui/demos/2-sm-other-demo.html
Fixed!
https://gist.github.com/bshambaugh/8419ecc245385735e9e6ea15178f3412
2-sm-other-demo.html
https://gist.github.com/bshambaugh/6f0fbf50041edd4017554d34d0bf8096
2-bootstrap.js
+++++++++++++++++++++
Or in the top-level directory: Node-Arc-D3:
http://localhost/cp-bc-node-arc-d3/node-arc-d3/1-sm-other-demo.html
1-sm-other-demo.html
https://gist.github.com/bshambaugh/a2163d8e9d1fa1ff84cc1e01339ad640
http://localhost/cp-bc-node-arc-d3/node-arc-d3/1-bootstrap.js
1-bootstrap.js
https://gist.github.com/bshambaugh/f526fe3d1267bd7c5e073c947dec0a0c
http://localhost/cp2-bc-node-arc-d3/node-arc-d3/node_modules/jquery-ui/demos/2-sm-other-demo.html
select:
var scripts = document.getElementsByTagName( "script" );
scripts
2:
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="effect" src="../ui/effect.js"></script>
3:
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="demos" src="../ui/demos.js"></script>
var script = scripts[ scripts.length - 1];
script
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="urijs/SecondLevelDomains" src="../ui/../../urijs/src//SecondLevelDomains.js">
var pathParts = window.location.pathname.split( "/" );
undefined
pathParts[ pathParts.length - 2 ]
"demos"
With:
http://localhost/cp2-bc-node-arc-d3/node-arc-d3/node_modules/jquery-ui/demos/dialog/1-sm-other-demo.html
var scripts = document.getElementsByTagName( "script" );
scripts
2:
"http://localhost/cp2-bc-node-arc-d3/node-arc-d3/node_modules/jquery-ui/ui/effect.js
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="effect" src="../../ui/effect.js"></script>
3:
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="widgets/dialog" src="../../ui/widgets/dialog.js"></script>
var pathParts = window.location.pathname.split( "/" );
pathParts[ pathParts.length - 2 ]
"dialog"
+++++++++++++++++++
http://localhost/cp2-bc-node-arc-d3/node-arc-d3/node_modules/jquery-ui/demos/2-sm-other-demo.html
Fixed!
https://gist.github.com/bshambaugh/8419ecc245385735e9e6ea15178f3412
2-sm-other-demo.html
https://gist.github.com/bshambaugh/6f0fbf50041edd4017554d34d0bf8096
2-bootstrap.js
+++++++++++++++++++++
Or in the top-level directory: Node-Arc-D3:
http://localhost/cp-bc-node-arc-d3/node-arc-d3/1-sm-other-demo.html
1-sm-other-demo.html
https://gist.github.com/bshambaugh/a2163d8e9d1fa1ff84cc1e01339ad640
http://localhost/cp-bc-node-arc-d3/node-arc-d3/1-bootstrap.js
1-bootstrap.js
https://gist.github.com/bshambaugh/f526fe3d1267bd7c5e073c947dec0a0c
Tuesday, August 15, 2017
1st Stages of Exploring Sigma.js for use with RDF data
Use case: make graphs zoomable to deal with increased complexity
Provided in Sigma.js by camera. It is in the basic example.
https://github.com/jacomyal/sigma.js/blob/master/examples/basic.html
Use case: I need curved edges to allow multiple connections between nodes.
https://github.com/jacomyal/sigma.js/blob/master/examples/plugin-edgeDots.html
Use case: different shapes for different classes in an ontology, or things like ldp:containers.
https://github.com/jacomyal/sigma.js/blob/master/examples/plugin-customShapes.html
Compare to: https://www.w3.org/2001/11/IsaViz/gss/gssmanual.html
(gss:shape)
Use case: use custom edges to label uni-directional and bi-directional relationships:
https://github.com/jacomyal/sigma.js/blob/master/examples/plugin-customEdgeShapes.html
Load external JSON file in Sigma.JS (modify this to deal with RDF data)
https://github.com/jacomyal/sigma.js/blob/master/examples/load-external-json.html
(see mailing list)
See these locally in:
/var/www/html/sigma.js/examples
Boundaries Make Use of the Map function in D3
Following the jsfiddle for boundaries in d3.js:
http://jsfiddle.net/yeQS2/114/
I am using the map function
https://stackoverflow.com/questions/16058791/d3-js-how-to-use-map-function
the link the to d3 documentation does not work, but browsing gives:
https://github.com/d3/d3-collection/blob/master/README.md#map
http://jsfiddle.net/yeQS2/114/
I am using the map function
https://stackoverflow.com/questions/16058791/d3-js-how-to-use-map-function
the link the to d3 documentation does not work, but browsing gives:
https://github.com/d3/d3-collection/blob/master/README.md#map
Thursday, August 10, 2017
Subscribe to:
Posts (Atom)