Drawing a ForceDirected graph with JavaScript InfoVis Toolkit - javascript

I have two tables in database like this:
Table_1
PK Column generated by db...
Any other columns...
Table_1_association
PK Column generated by db...
FK Column for Table_1
Another FK Column for Table_1
In this case, I can have the follow lines in Table_1_association
FK1 -> FK2
1 -> 2
1 -> 3
1 -> 4
1 -> 5
1 -> 6
1 -> 7
7 -> 8
7 -> 9
10 -> 1
10 -> 7
10 -> 11
10 -> 12
I can have
9 -> 1
too.
I'd like to make a graph that show this structure.
I used FOrceDirected graph with 'arrow' Edges because the direction is
FK1 to FK2 (the -> in example above).
But I can't get. Some arrows are in wrong direction.
Does the ForceDirected graph allow this?

You can specify direction by adding $direction to the data section in the JSON which is a list of two strings representing the "from" node ID and the "to" node ID, respectively. For example:
"adjacencies" : [
{
"nodeTo" : "222",
"data" : {
"$direction" : [
"111",
"222"
]
}
}
]

Related

Change node style based on name / label

I'm using vis.js to visualise a network.
The network is created based on the DOT language (Directed graphs).
An example:
1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1
would create this graph / network:
More info about how this works here
My problem is that I want to make a node with a certain label ("1" for example) to be a different color.
Is this possible and how would I do this?

Chart.JS legend grouping

I'm wondering if there is any way in chart.js that I can group chart legends as I want.
eg: First set of Data 1 to Data 4 as one group & second set of Data 1 to Data 4 as one group.
DATA 1 DATA 2 DATA 3 DATA 4
Group 1
DATA 1 DATA 2 DATA 3 DATA 4
Group 2
Is this achievable?

Fastest way to read large collection of objects

I need to store a large collection of small objects (chord diagrams) that will not change. It is a javascript project.
I have two questions:
how should I store these objects? As json, as text,... ?
what's the fastest way to find a specific item?
I search the item by it's key + type + "/" + bass:
Example: I get Am7/C# and I need to find the corresponding diagram. The key would be the file.
For now it's using only one file and search it with regex:
"{define: C frets x 3 2 0 1 0 fingers 0 3 2 0 1 0}",
"{define: C(add9) frets x 3 2 0 3 0 fingers 0 2 1 0 3 0}",
I will have 90 000 chords that I can split in 12 files (one for each key).
My object can look like this:
{type="m" bass="" frets="x 3 1 0 1 3" fingers="0 3 1 0 2 4" variation="1"}
I read a bit about binary search but I don't know if this can help me.
Thanks!

Grouped bar chart displaying cross tab between groups

I'm trying to make a group bar chart that gives the frequency of two group combos. I referred to this site for rollup and nest function reference:
http://bl.ocks.org/phoebebright/raw/3176159/
I'm trying to use my own dataset to create the following effect:
https://bl.ocks.org/bricedev/0d95074b6d83a77dc3ad
My current attempt with my own data, drug1.csv:
https://blockbuilder.org/lydiawawa/9efb5df76c08640316efbef702437db7
In the console, the grouped counts do not seem to generate the right distributions. Something is wrong with my rollup and nest
const nestedData = d3.nest()
.key(function(d){return d.s_category})
.key(function(d){return d.drug_cat})
.rollup(function(leaves) { return leaves.length; })
.entries(data);
Following is the desired cross tab distribution count of s_category x drug_cat :
1 2 3 4 5 6
2 367 35 8 1 1 1
3 223 24 4 4 2 2
4 29 5 9 1 2 3
5 37 1 3 3 2 26
Static chart:
In the animated bar graph that I attempted to create, cross tab count should be the y-axis, drug_c is the x-axis and s_category determines the groups of the bar graph. Thank you for any help!
The moment you use the nest generator you don't have drug_cat and count as properties anymore: you have key and values (or value for the inner arrays).
Here is your block builder changing the names of those properties: https://blockbuilder.org/GerardoFurtado/f4c825a5f8c92e87cc5a81591ba1f7c9

Easy comparison between table rows

I am using DataTables JQuery plugins and I would like to ask the following two questions.
Is it possible to have MIN or MAX or AVG values calculated (dynamically) at the end of each column?
For example:
A/A A B C
L1 2 3 4
L2 3 4 5
If I would like to prin line 3 with the Min Values of each columnt should have been:
L3 2 3 4
Is it possible to create another column D which will contain the result of a formula for each row? For example Di = Ai + Bi?
According to the above example the resulted table should be the following:
L1 2 3 4 5
L2 3 4 5 7
Can I somehow perform those operations through DataTables or I have to prepare the data before passing it to the DataTables?
Thanks.
PS:
I suppose I need something similar to this trirand.net/examples/grid/functionality/footer/default.aspx but for DataTables plugin. In addition to that I need some formulas for rows as well. – salamis just now edit
Use mRender ( http://datatables.net/ref#mRender ) for the last column. mRender, when used as a function, has access the the data source object for the row (third parameter), so you can easily do a quick sum and then return the calculated value :-).

Categories