Thursday, March 23, 2017

linkDistance - D3 study

Understanding D3.js Force Layout - 4: linkDistance

http://bl.ocks.org/sathomas/83515b77c2764837aac2

Tuesday, March 21, 2017

Preparing a pull request for an outdated fork

I have a directory on github at : http://github.com/bshambaugh/ovn

It was behind http://github/valueflows/valueflows.

So I needed to first configure a remote for a fork:

https://help.github.com/articles/configuring-a-remote-for-a-fork/

then sync it by branch with valueflows/valueflows:

https://help.github.com/articles/syncing-a-fork/

Now I want to do a Pull Request with the json file created with owl2vowl?

well at least it is at:

https://github.com/bshambaugh/ovn/blob/master/release-doc-in-process/all_vf.json

Friday, March 17, 2017

Loading Data in node-arc-d3

Starting from the top of the flowchart in https://github.com/bshambaugh/node-arc-d3 :

I have issues:
https://github.com/bshambaugh/node-arc-d3/issues/7
(SPARQL Queries)
https://github.com/bshambaugh/node-arc-d3/issues/13
(Have a box to load ldp containers, turtle files, and perform sparql queries)

And excerpts from the EISPP wireframes (http://bshambaugh.org/eispp):

Loading RDF files and LDP containers

Loading RDF Files

Save data/load data

 Save data
SPARQL Queries



These wireframe screenshots involve both GET and POST. For now I will use GET. I will also do disambiguation as mentioned in Issue 13.
https://github.com/bshambaugh/node-arc-d3/tree/master/js/tests/sparqlldpfiledisambig


Use URIjs to show the query parameter and the path, and follow a flowchart like:

Eventually, it is hoped, that NLQ will also be a data source:


Like In the EISPP wireframe:


To get this is I am reading the PowerAqua Thesis, to use it to extract relevant facts, which I believe are triples. PowerAqua helped build Miriam Fernandez' Thesis:


(A thesis presented for the degree of Doctor of Philosophy in Computer SciencePowerAqua:Open Question Answeringon the Semantic Web, V. Lopez)
http://technologies.kmi.open.ac.uk/poweraqua/thesis-master-viva.pdf


Wednesday, March 15, 2017

Tuesday, March 14, 2017

Link Labels in D3 at Midpoint:

Adding a Label to the Links (StackOverflow):

http://stackoverflow.com/questions/23470330/adding-label-to-the-links-in-d3-force-directed-graph

Labels to avoid overlap:

http://stackoverflow.com/questions/17425268/d3js-automatic-labels-placement-to-avoid-overlaps-force-repulsion

Meh.. (place a node at the midpoint where the node label should be somehow)

???

 var linknodes = svgContainer.append("g")
                  .attr("class","nodes")
                  .selectAll("circles")
                  .data(graph.links)
                  .enter().append("circle").attr("r",20)
                  .attr("fill", function(d) { return color(d.group); })
                  .call(d3.drag()
                  .on("start", dragstarted)
                  .on("drag", dragged)
                  .on("end", dragended));

function ticked() {

    linknodes
        .attr("x", function(d) { return (d.source.x + d.target.x)/2; })
        .attr("y", function(d) { return (d.source.y + d.target.y)/2; });

}

simulation
      .nodes("brents midpoint nodes")
      .on("tick", ticked);

but this does not work....I need to figure out how to create nodes on the fly

http://stackoverflow.com/questions/9539294/adding-new-nodes-to-force-directed-layout

references : https://bl.ocks.org/mbostock/1095795

http://stackoverflow.com/questions/17529522/transparent-color-in-javascript-d3-js

D3 Force Directed Graph with Fit Node Labels and Collision Detection

Key code:

.force("collide", d3.forceCollide(60));

       .enter().append("ellipse")
       .attr("rx", function(d) { return d.id.length * 4 })
       .attr("ry", 15)
      .attr("fill", function(d) { return color(d.group); })

Full code
(seeAlso: https://github.com/bshambaugh/node-arc-d3/blob/master/js/d3sketch.js) :

function draw(width,height,graph) {

 // see https://bl.ocks.org/mbostock/4062045

 var svgContainer = d3.select("body").append("svg")
                                       .attr("width",width)
                                       .attr("height",height);

  var color = d3.scaleOrdinal(d3.schemeCategory20);

  var simulation = d3.forceSimulation()
//    .force("link", d3.forceLink().id(function(d) { return d.id; }).distance(300).strength(0.5))
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2))
    .force("collide", d3.forceCollide(60));

  var link = svgContainer.append("g")
      .attr("class", "links")
    .selectAll("line")
    .data(graph.links)
    .enter().append("line")
      .attr("stroke-width", function(d) { return Math.sqrt(d.value); });

    // Extended d3 force directed graphs with link labels

    var linklabel = svgContainer.append("g")
                  .attr("class","links")
                  .selectAll("text")
                  .data(graph.links)
                  .enter().append("text");

var linklabels = linklabel
                    .text( function(d) { return d.label; })
                    .attr("font-family","sans-serif")
                    .attr("font-size","10px")
                    .attr("fill","black");


  var nodevar = svgContainer.append("g")
      .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
//    .enter().append("circle")
//      .attr("r", 5)
       .enter().append("ellipse")
       .attr("rx", function(d) { return d.id.length * 4 })
       .attr("ry", 15)
      .attr("fill", function(d) { return color(d.group); })
      .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));

    // Extended d3 dforce directed graph with node labels

    var nodelabel = svgContainer.append("g")
                   .attr("class","nodes")
                   .selectAll("text")
                   .data(graph.nodes)
                   .enter()
                   .append("text")
                   .call(d3.drag()
                       .on("start", dragstarted)
                       .on("drag", dragged)
                       .on("end", dragended));

   var nodelabels = nodelabel
                  //  .attr("x", function(d) { return d.x; })
                  //  .attr("y", function(d) { return d.y; })
                    .text( function(d)  { return d.id; })
                    .attr("font-family","sans-serif")
                    .attr("font-size","10px")
                    .attr("fill","black")
                    .attr("text-anchor", "middle");


   nodevar.append("title")
      .text(function(d) { return d.id; });

  simulation
      .nodes(graph.nodes)
      .on("tick", ticked);

  simulation.force("link")
      .links(graph.links);

  function ticked() {
    link
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    // extended with link labels

    linklabels
        .attr("x", function(d) { return (d.source.x + d.target.x)/2; })
        .attr("y", function(d) { return (d.source.y + d.target.y)/2; });

    nodevar
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });

      // extended with node labels

     nodelabels
        .attr("x", function(d) { return d.x; })
        .attr("y", function(d) { return d.y; });
  }


  function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

};

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

TODO: Express edge labels as transparent nodes centered at the midpoint of the edge, so that the force collide method applies?