Thursday, August 31, 2017

I can only load sigma.require.js

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/

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


Refer to: https://github.com/bshambaugh/node-arc-d3/

Modify createprimitives.js so it's output changes from d3.js JSON format to Sigma.js format:








D3.js JSON format to Sigma.js JSON format output illustration:


















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}]}

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




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:

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)

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???

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

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 });

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

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

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


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


Example (directed relationships in REA/OVN-like ontology):


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