Working with MaidSafeCoin Tutorial

Make sure that you have yarn installed (not the one from cmdtest).

https://github.com/yarnpkg/yarn/issues/2821

git clone https://github.com/maidsafe/safe_examples.git

in the safe_examples directory, turning to Packaging gives:

yarn install-all

=======

brent@brent-VirtualBox:~/Downloads/safe_examples$ yarn install-all
yarn run v1.3.2
warning package.json: No license field
$ cd email_app && yarn && cd .. && cd web_hosting_manager && yarn
warning ../package.json: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
warning Pattern ["fs-extra@^1.00.0"] is trying to unpack in the same destination "/home/brent/.cache/yarn/v1/npm-fs-extra-1.0.0-cd3ce5f7e7cb6145883fcae3191e9877f8587950" as pattern ["fs-extra@^1.0.0"]. This could result in a non deterministic behavior, skipping.
info appdmg@0.4.5: The platform "linux" is incompatible with this module.
info "appdmg@0.4.5" is an optional dependency and failed compatibility check. Excluding it from installation.
info macos-alias@0.2.11: The platform "linux" is incompatible with this module.
info "macos-alias@0.2.11" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.1.3: The platform "linux" is incompatible with this module.
info "fsevents@1.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
[1/8] ⠁ ref: CXX(target) Release/obj.target/binding/src/binding.o
[2/8] ⠁ weak: CXX(target) Release/obj.target/weakref/src/weakref.o
[-/8] ⠁ waiting...
[4/8] ⠁ electron
error /home/brent/Downloads/safe_examples/email_app/node_modules/electron-chromedriver: Command failed.
Exit code: 1
Command: node ./download-chromedriver.js
Arguments:
Directory: /home/brent/Downloads/safe_examples/email_app/node_modules/electron-chromedriver
Output:
/home/brent/Downloads/safe_examples/email_app/node_modules/electron-chromedriver/download-chromedriver.js:16
  if (error != null) throw error




error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

==================

brent@brent-VirtualBox:~/Downloads/safe_examples$ yarn pack:email
yarn run v1.3.2
warning package.json: No license field
$ cd email_app && yarn package && yarn post-package
warning ../package.json: No license field
$ electron-forge package
✔ Checking your system
Downloading tmp-5192-1-SHASUMS256.txt-1.6.2
[============================================>] 100.0% of 2.85 kB (2.85 kB/s)
⠹ Preparing to Package Application for arch: x64
An unhandled rejection has occurred inside Forge:
ENOSPC: no space left on device, mkdir '/tmp/electron-packager/linux-x64'
Error: ENOSPC: no space left on device, mkdir '/tmp/electron-packager/linux-x64'
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

==============

ack, I guess my

Getting the WebCam to work in Ubuntu 16.04 might be as easy as GStreamer Good Plugins

I enabled gstreamer 1.0 good plugins through synaptic

Some stuff on the Internet that told me what I might have done:
https://stuff.mit.edu/afs/athena/system/amd64_deb50/os/usr/share/gtk-doc/html/gst-plugins-good-plugins-0.10/index.html

and the interesting plugin is v4l2src:


https://stuff.mit.edu/afs/athena/system/amd64_deb50/os/usr/share/gtk-doc/html/gst-plugins-good-plugins-0.10/gst-plugins-good-plugins-v4l2src.html

mvn tutorial link

http://www.vogella.com/tutorials/ApacheMaven/article.html

Things to Consider

Machine Learning
https://elitedatascience.com/python-machine-learning-tutorial-scikit-learn
https://cs231n.github.io/linear-classify/ 
http://openclassroom.stanford.edu/MainFolder/CoursePage.php?course=MachineLearning
Python

Java TF-IDF
Deep Learning
https://www.youtube.com/playlist?list=PLQVvvaa0QuDeETZEOy4VdocT7TOjfSA8a
Construct German Language Sentences
Angular JS Tutorial
https://docs.angularjs.org/tutorial
ChatBot DialogFlow

•   https://developers.google.com/actions/tools/simulator
• https://codelabs.developers.google.com/codelabs/assistant-dialogflow-nodejs/index.html?index=..%2F..%2Findex#0
•   https://codelabs.developers.google.com/codelabs/your-first-kids-action-on-google/#0
•  https://dialogflow.com/docs/getting-started/basics
• https://developers.google.com/actions/design/principles
• https://github.com/greenido/animal-joker
• https://console.actions.google.com/project/mypizzabot-6803f/simulatorcreate
• https://www.youtube.com/watch?v=gWNUg_v25dw

Cat in a Cup (Eva Lettner)

• https://codepen.io/eva_trostlos/pen/vXVoQj

node-arc-d3

• https://github.com/bshambaugh/node-arc-d3

Open Data Portal
https://www.opendataportal.at/datentools-uebersicht/

Set operations in JavaScript Links

Set Theory In JavaScript:

https://developer.mozilla.org/sv-SE/docs/Web/JavaScript/Reference/Global_Objects/Set

(This came out in ECMAScript)

Or in Node:

https://github.com/kenju/js-set-operations

Race Condition in Apache Marmotta???

At times resources in Marmotta are unavailable to some unexplained reason.

Java: How to Find a Race Condition.

http://javarevisited.blogspot.co.at/2012/02/what-is-race-condition-in.html

Shacl Links and input graph that passes the SHACL Playground Validator

SHACL Tutorial (TopBraid): https://www.topquadrant.com/technology/shacl/tutorial/

SHACL in RWW CG blog post for October:
https://www.w3.org/community/rww/2017/10/03/read-write-web-q3-summary-2017/

SHACL Links: http://shacl.org/playground/

to pass the validator try:

{
    "@context": { "@vocab": "http://schema.org/" },

    "@id": "http://example.org/ns#Bob",
    "@type": "Person",
    "givenName": "Robert",
    "familyName": "Junior",
    "birthDate": "1971-07-07",
    "deathDate": "1981-09-10",
    "address": {
        "@id": "http://example.org/ns#BobsAddress",
        "streetAddress": "1600 Amphitheatre Pkway",
        "postalCode": 19404
    }
}

Now give bob a gender:

{
    "@context": { "@vocab": "http://schema.org/" },

    "@id": "http://example.org/ns#Bob",
    "@type": "Person",
    "givenName": "Robert",
    "familyName": "Junior",
    "gender" : "male",
    "birthDate": "1971-07-07",
    "deathDate": "1981-09-10",
    "address": {
        "@id": "http://example.org/ns#BobsAddress",
        "streetAddress": "1600 Amphitheatre Pkway",
        "postalCode": 19404
    }
}

How to set a breakpoint with Firefox Developer Tools

https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Set_a_breakpoint

https://developer.mozilla.org/en-US/docs/Tools

Unescaping escaped html in Javascript?

See this link:

http://shebang.brandonmintern.com/foolproof-html-escaping-in-javascript/

Resources found while searching for Git

How to discard changes made to a branch:
https://stackoverflow.com/questions/4830056/git-discard-any-changes-ive-made-to-a-branch

How to delete a branch:
https://makandracards.com/makandra/621-git-delete-a-branch-local-or-remote

How to discard unstaged changes made in git:
https://stackoverflow.com/questions/52704/how-do-i-discard-unstaged-changes-in-git

Immerse yourself in Git:
http://gitimmersion.com/

Fix error with Pandas

raise ValueError("Usecols do not match names.")

https://stackoverflow.com/questions/37395881/pandas-read-in-txt-file-without-headers

https://stackoverflow.com/questions/37395881/pandas-read-in-txt-file-without-headers

other:
https://docs.python.org/3/library/functions.html

Information for missing 32 bit libraries from Steam

https://askubuntu.com/questions/257578/im-trying-to-run-steam-but-32-bit-libraries-are-missing

Looking for inferincing vs training (and I saw this)

https://devblogs.nvidia.com/parallelforall/inference-next-step-gpu-accelerated-deep-learning/

data processing for machine learning ---scratch pad

Grab the 1st three rows of data files to analyze:

cat ex2x.dat | awk 'NR >= 1  && NR <= 3 { print }' > ex2x.short.dat

cat ex2y.dat | awk 'NR >= 1  && NR <= 3 { print }' > ex2y.short.dat

https://stackoverflow.com/questions/6491532/how-to-subset-a-file-select-a-numbers-of-rows-or-columns

working with Unreal Engine to Prep for AirSim

Follow the steps here:

http://www.hpique.com/2013/09/updating-a-fork-directly-from-github/

"
Here’s how to update your fork directly from GitHub (as shown in the video above):

1. Open your fork on GitHub.
2. Click on Pull Requests.
3. Click on New Pull Request. By default, GitHub will compare the original with your fork, and there shouldn’t be anything to compare if you didn’t make any changes.
4. Click on switching the base. Now GitHub will compare your fork with the original, and you should see all the latest changes.
5. Click on Click to create a pull request for this comparison and assign a predictable name to your pull request (e.g., Update from original).
6. Click on Send pull request.
7. Scroll down and click Merge pull request and finally Confirm merge. If your fork didn’t have any changes, you will be able to merge it automatically."

Then git fetch --prune

-----------------------------------------

git clone https://github.com/bshambaugh/UnrealEngine

-----------------------------------------

sh Setup.sh
Registering git hooks... (this will override existing ones!)
Setup.sh: 39: Setup.sh: pushd: not found

How to use pushd and popd:

https://unix.stackexchange.com/questions/77077/how-do-i-use-pushd-and-popd-commands

How to use source:
https://ss64.com/bash/source.html

how do I get search with gitter? well I could build it...initial survey

Get Messages to search for a particular one:

First get the ID:
curl -X POST -i -H "Content--H "Accept: application/json" -H "Authorization: Bearer {{token}}" "https://api.gitter.im/v1/rooms" -d '{"uri":"solid/node-solid-server"}'

Remember authorization: https://developer.gitter.im/docs/authentication

Then get the messages by the room id:
https://developer.gitter.im/docs/rooms-resource
https://api.gitter.im/v1/rooms/:roomId/chatMessages

Then add this JSON object to your index

For a process that updates, use the streaming API: https://developer.gitter.im/docs/streaming-api

For indexing: https://cwiki.apache.org/confluence/display/solr/Transforming+and+Indexing+Custom+JSON

log: gitter:solid/node-solid-server

Brent Shambaugh
@bshambaugh
11:28

I'm trying to learn about how to access SOLiD with FOAF+SSL and other semantic web resources from JavaScript. I can look up the flow diagram for how the protocol works, but I found I did not know about CORS or much about writing code for Authorization or Authentication. Thus I'm going through the process of watching videos about XMLHttpRequests and how to work with OAuth in JavaScript (even though WebID with foaf+ssl is a bit different). I'm learning about setting headers, expanding my knowledge of xhr structure, working with proxy servers for CORS, working with access tokens, ....

[Edit: https://www.youtube.com/watch?v=82hnvUYY6QA , https://www.youtube.com/watch?v=eogjvTurTN8 ]

I find populating my mind with information, and gradually refining over time as I discover things is an effective way to eventually reach a solution when at first there does not appear to be a explicit and verbose algorithm in my mind to do so.

Is a gradual convergence approach a good idea as any?
Dmitri Zagidulin
@dmitrizagidulin
11:30
it's as good an approach as any. (though I would look at 'fetch' api, instead of XmlHttpRequest'
Brent Shambaugh
@bshambaugh
11:35
@dmitrizagidulin Okay, thanks!
Brent Shambaugh
@bshambaugh
11:44

Looping back, it looks with FetchAPI is a WhatWG Standard and it is documented by MDN and Google Developers. I recall this mentioned before by those in this group as an approach, so I have considerable confidence I'm synchronizing to your efforts. Maybe I'll help with the docs if I get any good.

Verified: solid/solid-web-client#20
[Edit: https://github.com/solid/solid-web-client/issues/20]
[Edit: https://fetch.spec.whatwg.org/ , https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API , https://davidwalsh.name/fetch , https://github.com/github/fetch , https://developers.google.com/web/updates/2015/03/introduction-to-fetch , https://www.youtube.com/watch?v=0bec1BmeY4c ( JavaScript Fetch Api Example - A Real World App) ]

Trying to understand headers HTTP

AJAX Crash Course:

https://www.youtube.com/watch?v=82hnvUYY6QA&t=429s&fref=gc&dti=743759285743274

Content Negotiation:
https://en.wikipedia.org/wiki/Content_negotiation

Now that I have that out of my system....I am looking at Content Negotiation, AJAX requests, and HTTP Headers...

Goal
(1) Accept different file types other than the standard html when hitting a URL (e.g, text/turtle, application+jsonld(?))
(2) Use X509 certificates in the HTTP request (understand authentication and authorization over HTTP)
I have no clue what the Headers should look like in this algorithm:

Maybe see: http://raptorlicious.blogspot.com/2017/09/i-want-cors-with-credentials-notes.html


(http://dig.csail.mit.edu/2009/Papers/SPOT/foaf-ssl-spot2009.pdf)

"The act of retrieving a representation of a resource identified by a URI is known as dereferencing that URI."
https://www.w3.org/2001/tag/doc/httpRange-14/2007-05-31/HttpRange-14

Also see: https://web-payments.org/specs/source/http-signatures/

CORS Experiments

test6.html works like a charm...

https://github.com/bshambaugh/corsexp

RESCAL Links

RESCAL Minimization Problem.

Factorizing YAGO
http://www.dbs.ifi.lmu.de/%7Etresp/papers/p271.pdf

A Three-Way Model for Collective Learning on Multi-Relational Data
http://www.icml-2011.org/papers/438_icmlpaper.pdf

"Python module to compute the RESCAL tensor factorization "
https://github.com/mnick/rescal.py

"Scikit Tensor"
https://github.com/mnick/scikit-tensorTensor Factorization for Multi-Relational Learning

http://ecmlpkdd2013.org/wp-content/uploads/2013/07/673.pdf

Logistic Tensor Factorization for Multi-Relational Data

https://arxiv.org/pdf/1306.2084v1.pdf

A Three-Way Model for Collective Learning on

Multi-Relational Data

28th International Conference on Machine Learning

http://www.cip.ifi.lmu.de/~nickel/data/slides-icml2011.pdf

http://web.mit.edu/~mnick/www/   <<< Maximilian Nickel's website

---------------------------------------------------------

Zhiltsov, N; Agichtein, E "Improving entity search over linked data by modeling latent semantics" https://www.researchgate.net/publication/260419630_Improving_entity_search_over_linked_data_by_modeling_latent_semantics

"Scalable tensor factorization"
https://github.com/nzhiltsov/Ext-RESCAL

--------------------------------------------------------

A Semantic Matching Energy Function for Learning

with Multi-relational Data
Xavier Glorot et. al
https://arxiv.org/pdf/1301.3485.pdf


reference for cross-check: https://github.com/researchstudio-sat/webofneeds/issues/1165

I want cors with credentials notes

I have https://github.com/Rob--W/cors-anywhere/
and I want to add credentials:
https://stackoverflow.com/questions/2054316/sending-credentials-with-cross-domain-posts

sidenote: nginx as cors proxy. https://stackoverflow.com/questions/2054316/sending-credentials-with-cross-domain-posts

set up proxy server for cors

https://daveceddia.com/access-control-allow-origin-cors-errors-in-angular/

Set up proxy server ...


edit: (Thursday, September 14, 2017)

http://jquery-howto.blogspot.com/2013/09/jquery-cross-domain-ajax-request.html


http://ryankirkman.com/2012/03/30/pass-through-cross-domain-proxy-jquery.html 
(with this code the cross domain query is still blocked --- I do not know why...)

https://stackoverflow.com/questions/15005500/loading-cross-domain-endpoint-with-jquery-ajax

setting up with websid

curl https://timbl.com/timbl/Public/ does not fail with a 401, whereas my JavaScript does (it has CORS issues already which need to be fixed...so 401 is the least of my worries).

I have JavaScript that hits the URL. I might need to change this JavaScript such that it works with the ACL scheme. Are there non-human clients that work with the webid protocol? I recall reading that there were previously. https://www.w3.org/2011/identity-ws/papers/idbrowser2011_submission_22/webid.html
mmm..maybe I should start here https://github.com/bblfish/read-write-web

Early explorations using Sigma.js to replicate IsaViz/GSS

Viewing the referenced plugin-customshapes:

But it looks like you will have to modify the shape library /sigma.js/plugins/sigma.renderers.customShapes/shape-library.js  to include a GSS custom shape in addition to the star, the cross, the equilateral triangle, etc...offered by Sigma.js

Experiments Displaying Triples and Substitutions along with a Force Directed Graph in Node-arc-d3

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

Step (1): Initiate loading the file of your choice.

Step (2): Confirm you want to load it.

Step (3) : View the Loaded Graph

Step (4) : View the data used for the graph in the top right box, and the substitutions used for the graph in the bottom right box

Step (5) :  View the html that contains the divs containing the data used for the graph in the top right box, and the substitutions used for the graph in the bottom right box

 

Step (6) :  View the d3sketch.js called by the Load File / LDP container button event that writes to the divs

 

Step (7) :  Modify the primitives object in createprimitives.js so the d3sketch.js file can expose the triples

Step (8) : Modify the d3sketch.js file so that it exposes the triples from the object passed from createprimitives.js

 

Step (9) : View the triples loaded in the div in the top right hand corner of index.html

Edit: Thursday September 7th:

Modify d3sketch code to change the display of triples and prefixes.

Following CORS -- Getting Started with WebID-TLS Links

Dr. Andrei Sambra's Dissertation (Discusses ACL, WebID-TLS) - [2013]:

https://tel.archives-ouvertes.fr/file/index/docid/917965/filename/SAMBRA_Andrei-2.pdf

TimBL's Socially Aware Cloud Storage:

https://www.w3.org/DesignIssues/CloudStorage.html

James Dylan Hollenbach's Thesis (Discusses ACL + FOAF+SSL) - [2009]:




http://dig.csail.mit.edu/2010/rdf-widgets/thesis.pdf

Getting Started with CORS Links

https://stackoverflow.com/questions/17318426/cors-cross-domain-ajax-without-jsonp-by-allowing-origin-on-server#17319310

https://stackoverflow.com/questions/5584923/a-cors-post-request-works-from-plain-javascript-but-why-not-with-jquery

http://www.test-cors.org/

http://search.cpan.org/dist/RDF-LinkedData/

https://enable-cors.org/client.html

https://www.html5rocks.com/en/tutorials/cors/

Edit: https://stackoverflow.com/questions/24371734/firefox-cors-request-giving-cross-origin-request-blocked-despite-headers

Beginning Examination of the substitutions in node-arc-d3

In https://github.com/bshambaugh/node-arc-d3

Input:

<> <http://purl.org/dc/terms/title> "Food Growing Methods" ;
<http://www.w3.org/2000/01/rdf-schema#comment> "For independence and resource optimization, some
or all of the astronauts' diet must be grown in-situ. Various forms have been proposed, from greenhouses to
hydroponics, but there must also be optimization in the types of food grown to maximize caloric and nutrient
output compared to water and energy input." ;
<http://data.thespaceplan.com/ontologies/lsi#averageEstInvestmentCost> "0.0(investment cost pulled from children pages)" ;
<http://data.thespaceplan.com/ontologies/lsi#averageEstTimetoMaturity> "0.0 (time to maturity pulled from children pages)" ;
<http://data.thespaceplan.com/ontologies/lsi#commercialStatus> "Research" ;
<http://data.thespaceplan.com/ontologies/lsi#relatedIndustriesFields> "Health and Medicine" ;
<http://data.thespaceplan.com/ontologies/lsi#label> <http://localhost:8080/marmotta/ldp/waypaver-lsi/biological-support> ;
<http://data.thespaceplan.com/ontologies/lsi#label> <http://localhost:8080/marmotta/ldp/waypaver-lsi/habitation-infrastructure> .

document.write(JSON.stringify(namsreplaced)); in js/triplemodifications.js :

{"triples":[["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"]],
"replacements":[{"prefix":"ns1","uri":"http://localhost:8080/marmotta/ldp/waypaver-lsi/"},
{"prefix":"base5","uri":"http://localhost/cp4-bc-node-arc-d3/node-arc-d3/data/"},
{"prefix":"dcterms","uri":"http://purl.org/dc/terms/"},
{"prefix":"rdfs","uri":"http://www.w3.org/2000/01/rdf-schema#"},
{"prefix":"lsi","uri":"http://data.thespaceplan.com/ontologies/lsi#"}],
"longstrings":[{"match":"\"For independence and resource optimization, some or all of the astronauts'
                           diet must be grown in-situ. Various forms have been proposed, from greenhouses
                           to hydroponics, but there must also be optimization in the types of food grown
                           to maximize caloric and nutrient output compared to water and energy input.\"",
               "replacement":"\"For independence and resource..."},
               {"match":"\"0.0(investment cost pulled from children pages)\"",
               "replacement":"\"0.0(investment cost pulled fr..."},
               {"match":"\"0.0 (time to maturity pulled from children pages)\"",
                "replacement":"\"0.0 (time to maturity pulled ..."}]}

wish list: get Longwell 2.5.1 working ... it is on the computer after all

https://github.com/bshambaugh/longwell

How do I set up the plugins to work with the sigma.js global object in Require.js?

In /node_modules/sigma/plugins/sigma.layout.forceAtlas2/supervisor.js I have:  

/**
   * Interface
   * ----------
   */
  sigma.prototype.startForceAtlas2 = function(config) {

    // Create supervisor if undefined
    if (!this.supervisor)
      this.supervisor = new Supervisor(this, config);

    // Configuration provided?
    if (config)
      this.supervisor.configure(config);

    // Start algorithm
    this.supervisor.start();

    return this;
  };

I want to bind this to the sigma global object.

Otherwise I get this:


How did I set up other libraries in node-arc-d3?
http://www.forbeslindesay.co.uk/post/46324645400/standalone-browserify-builds

or browserify exportN3.js -s N3 -o bun2-exportN3.js

http://raptorlicious.blogspot.com/2017/02/exposing-n3-from-script-tag-in-browser.html

Browserify with sigma: https://github.com/jacomyal/sigma.js/issues/680

so I need to do something like?:

browserify /src/sigma.exports.js -s sigma -o bun-sigma.exports.js

/build/plugins/sigma.layout.forceAtlas2.min.js

I am trying to figure out how to Load Sigma.js Plugins with Require.js

The Grunt file [1] that I modified does not create a sigma.require.js file that loads the ForceAtlas2 Plugin. (maybe the file does not include the Plugin)

I can get this:

But I cannot get this:

I think I need to include the plugin in the require statement and assign it to the global sigma object:

require([ "sigma", "js/node_modules/sigma/plugins/sigma.layout.forceAtlas2/supervisor" 

,"js/node_modules/sigma/plugins/sigma.layout.forceAtlas2/worker"], function( sigma ) {



    // Your code goes here.



 



});





like in https://learn.jquery.com/jquery-ui/environments/amd/

require([ "jquery", "jquery-ui/autocomplete" ], function( $ ) {



    $( "<input>" )



        .autocomplete({ source: [ "One", "Two", "Three" ]})



        .appendTo( "body" );



});

Also, sigma comes from the config file:

requirejs.config({
    baseUrl : 'js',
    paths : {
         d3 : 'libraries/d3',
         jquery: 'libraries/jquery-3.1.1.min',
         sigma: 'node_modules/sigma/build/sigma.require'
    },
    shim: { 'sigma' : { exports: 'sigma' } }
});
 

[1] https://github.com/bshambaugh/sigma.js/blob/master/Gruntfile.js

Playing with Sigma-force-atlas2

 About:

https://github.com/jacomyal/sigma.js/tree/master/plugins/sigma.layout.forceAtlas2

https://www.rapidops.com/blog/big-data-visualization-using-sigma-js/

http://thewhyaxis.info/hairball/

Modify grunt file in sigma.js to include sigma.canvas.edges.curve ??

Yes: I modified the grunt file and put it in my own repo:

https://github.com/bshambaugh/sigma.js

edge labels, curved edges, and no-overlap does not work. ...I guess I need to rebuild

cat settings-edge2-render-d-index-old-aug22.txt

settings
:
Object
animationsTime
:
200
autoRescale
:
true
autoResize
:
true
batchEdgesDrawing
:
false
borderSize
:
0
canvasEdgesBatchSize
:
500
classPrefix
:
"sigma"
clone
:
true
defaultEdgeColor
:
"#000"
defaultEdgeHoverColor
:
"#000"
defaultEdgeLabelActiveColor
:
"#000"
defaultEdgeLabelColor
:
"#000"
defaultEdgeLabelSize
:
10
defaultEdgeType
:
"def"
defaultHoverLabelBGColor
:
"#fff"
defaultLabelColor
:
"#000"
defaultLabelHoverColor
:
"#000"
defaultLabelSize
:
14
defaultNodeBorderColor
:
"#000"
defaultNodeColor
:
"#000"
defaultNodeHoverColor
:
"#000"
defaultNodeType
:
"def"
doubleClickEnabled
:
true
doubleClickTimeout
:
300
doubleClickZoomDuration
:
200
doubleClickZoomingRatio
:
2.2
doubleTapTimeout
:
300
dragTimeout
:
200
drawEdgeLabels
:
true
drawEdges
:
true
drawLabels
:
true
drawNodes
:
true
edgeColor
:
"source"
edgeHoverColor
:
"edge"
edgeHoverExtremities
:
false
edgeHoverPrecision
:
5
edgeHoverSizeRatio
:
1
edgeLabelSize
:
"fixed"
edgeLabelSizePowRatio
:
1
edgeLabelThreshold
:
1
edgesPowRatio
:
0.5
enableCamera
:
true
enableEdgeHovering
:
false
enableHovering
:
true
eventsEnabled
:
true
font
:
"arial"
fontStyle
:
""
hideEdgesOnMove
:
false
hoverFont
:
""
hoverFontStyle
:
""
immutable
:
true
labelColor
:
"default"
labelHoverBGColor
:
"default"
labelHoverColor
:
"default"
labelHoverShadow
:
"default"
labelHoverShadowColor
:
"#000"
labelSize
:
"fixed"
labelSizeRatio
:
1
labelThreshold
:
8
maxEdgeSize
:
1
maxNodeSize
:
8
minArrowSize
:
0
minEdgeSize
:
0.5
minNodeSize
:
1
mouseEnabled
:
true
mouseInertiaDuration
:
200
mouseInertiaRatio
:
3
mouseWheelEnabled
:
true
mouseZoomDuration
:
200
nodeHoverColor
:
"node"
nodesPowRatio
:
0.5
rescaleIgnoreSize
:
false
scalingMode
:
"inside"
sideMargin
:
0
singleHover
:
true
skipErrors
:
false
touchEnabled
:
true
touchInertiaDuration
:
200
touchInertiaRatio
:
3
verbose
:
false
webglEdgesBatchSize
:
1000
webglOversamplingRatio
:
2
zoomMax
:
2
zoomMin
:
0.0625
zoomingRatio
:
1.7
__proto__
:
Object

cat 4r-settings-edge2-render-d-index-old-aug22.txt

settings
:
Object
animationsTime
:
200
autoRescale
:
true
autoResize
:
true
batchEdgesDrawing
:
false
borderSize
:
0
canvasEdgesBatchSize
:
500
classPrefix
:
"sigma"
clone
:
true
defaultEdgeColor
:
"#000"
defaultEdgeHoverColor
:
"#000"
defaultEdgeType
:
"def"
defaultHoverLabelBGColor
:
"#fff"
defaultLabelColor
:
"#000"
defaultLabelHoverColor
:
"#000"
defaultLabelSize
:
14
defaultNodeBorderColor
:
"#000"
defaultNodeColor
:
"#000"
defaultNodeHoverColor
:
"#000"
defaultNodeType
:
"def"
doubleClickEnabled
:
true
doubleClickTimeout
:
300
doubleClickZoomDuration
:
200
doubleClickZoomingRatio
:
2.2
doubleTapTimeout
:
300
dragTimeout
:
200
drawEdgeLabels
:
false
drawEdges
:
true
drawLabels
:
true
drawNodes
:
true
edgeColor
:
"source"
edgeHoverColor
:
"edge"
edgeHoverExtremities
:
false
edgeHoverPrecision
:
5
edgeHoverSizeRatio
:
1
edgesPowRatio
:
0.5
enableCamera
:
true
enableEdgeHovering
:
false
enableHovering
:
true
eventsEnabled
:
true
font
:
"arial"
fontStyle
:
""
hideEdgesOnMove
:
false
hoverFont
:
""
hoverFontStyle
:
""
immutable
:
true
labelColor
:
"default"
labelHoverBGColor
:
"default"
labelHoverColor
:
"default"
labelHoverShadow
:
"default"
labelHoverShadowColor
:
"#000"
labelSize
:
"fixed"
labelSizeRatio
:
1
labelThreshold
:
8
maxEdgeSize
:
1
maxNodeSize
:
8
minArrowSize
:
0
minEdgeSize
:
0.5
minNodeSize
:
1
mouseEnabled
:
true
mouseInertiaDuration
:
200
mouseInertiaRatio
:
3
mouseWheelEnabled
:
true
mouseZoomDuration
:
200
nodeHoverColor
:
"node"
nodesPowRatio
:
0.5
rescaleIgnoreSize
:
false
scalingMode
:
"inside"
sideMargin
:
0
singleHover
:
true
skipErrors
:
false
touchEnabled
:
true
touchInertiaDuration
:
200
touchInertiaRatio
:
3
verbose
:
false
webglEdgesBatchSize
:
1000
webglOversamplingRatio
:
2
zoomMax
:
2
zoomMin
:
0.0625
zoomingRatio
:
1.7
__proto__
:
Object

I can get the sigma object to load, but I get a slient fail upon rendering

Performing a web search gave me:

https://stackoverflow.com/questions/32863277/sigma-js-graph-doesnt-render-anything

Tada!

Actually, I found my canvas had no height, only a width. Specifying a height and other properties, like in the stackoverflow link:

#graph-container {
  max-width: 400px;
  height: 400px;
  margin: auto;
}

solves the problem of displaying a graph...

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:

 

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

feed json data to make a curved graph

http://localhost/sigma.js/br-examples/edge-render-d-index-old-aug22.html

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

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

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/

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