Creating a weighted link

[Naor]

Hi Guys,

I have managed to create what i need with Popoto,

but i am missing one function that someone might be able to help me overcome.

for each link in my graph there is an attribute called "count" which includes the amount of interactions between two nodes.

I cannot extract that feature from Neo4j using Popoto, and I haven't found a reference in the documentation regarding changing colors / width / weight of a link using that attribute.

Any idea?

Thanks!

[Frederic Ciminera]

Hi,

In short, the answer is Popoto doesn't use relation properties yet, it can with a few changes or in version 1.2 (not released yet)

It is possible to use it but the links in Popoto groups multiple relations and can be tricky to use.

Let me explain it in an example.

I used Popoto 1.2 (which is not realeased at this date and includes new functions to customize css classes of node and links)

http://www.popotojs.com/live/northwind/

I'll post this example and a few other on github when new release will be ready.

I used the Neo4j northwind example dataset 

The ORDERS relation contains properties like "quantity", "unitPrice", and "discount".

In Popoto the graph query looks like this:

As you can see the ORDERS link groups all of the 2155 relations and it's not clear what information would be helpful to display with all of these relation properties.

But a possible use case is to use the properties when you click on the product nodes to select a value.

Here if you look on the picture below the link on a product also regroup all the relations for that product. For example product "Raclette Courdavault" groups 43 ORDERS links to this product.

The count 77 in green on Product nodes sais that there are 77 differents products but each product can be ordered multiple times (43 times for "Raclette Courdavault")

So here to I tried to sum up the total amount using quantity * unitPrice - reduction of every relations to the product.

The value displayed on a link then correspond to the actual money amount for a given product.

With this value the CSS classes, labels of links and node size can be changed using popoto config options.

You can look directly in the example page for full source but for links the customization would look like this:

// scales a amount to a css class name
var strokeCSSScale = d3.scale.quantize().domain([minAmount, maxAmount]).range(["very-thin", "thin", "medium", "thick", "very-thick"]);

// Compute the amount with reduction on a list of relations
function relationsAmount(relations) {
 return relations.reduce(function (a, rel) {
 var relAmount = rel.quantity * parseFloat(rel.unitPrice);
 var relDiscount = rel.discount * relAmount;

 return (a + relAmount - relDiscount);
 }, 0).toFixed(2);
}

popoto.provider.link.Provider = {

  "getTextValue": function (link) {
     if (link.type === popoto.graph.link.LinkTypes.VALUE && link.source.label === "Product" && link.source.parentRel === "ORDERS") {
        if (link.target.attributes.hasOwnProperty("incomingRels")) {
           return relationsAmount(link.target.attributes.incomingRels) + "$";
        }
     }

     return popoto.provider.link.DEFAULT_PROVIDER.getTextValue(link);
   },

  "getCSSClass": function (link, element) {
     if (link.type === popoto.graph.link.LinkTypes.VALUE && link.source.label === "Product" && link.source.parentRel === "ORDERS" && (element === "path" || element === "path--hover")) {
        if (link.target.attributes.hasOwnProperty("incomingRels")) {
           return "ppt-link__" + element + "--value " + strokeCSSScale(relationsAmount(link.target.attributes.incomingRels));
        }
     }
 
     return popoto.provider.link.DEFAULT_PROVIDER.getCSSClass(link, element);
  },

};

[Naor]

Hi Fredric,

That's amazing and thank you for creating Popoto - for me (someone without a lot of JS knowledge and capabilities) it made life so much easier!

Do you believe version 1.2 will be out in the near future? I'm more then happy to beta test :)

Thanks again!

Naor 

[Frederic Ciminera]

I think 1.2 will be out in february.

You can download the rc2 version if you want to beta test.

The configuration has changed a bit since 1.1 and the documentation is not yet ready.

https://popotojs.com/release/popoto-1.2.rc2.zip