d3.js - Add parameter/data to nodes - javascript

I have a working d3.js (v 4.0) hierarchical tree. Each level in the tree structure has a type parameter field determined in the process of creating the JSON from a MySQL database.
An example of the JSON is at the end.
I want to add another data/parameter field dynamically in the d3.js script where nodes d.type == 'unit'.
That data/parameter field can be called dv.
I would need to do a separate query on the unit table for this in another script, then iterate through those nodes, where nodes d.type == 'unit', for example to change the node's appearance if dv equals something.
How should this be done?
E.g. from
d3.json("json/data.json", function(treeData) {
Example JSON:
"name": "1.1 Ensure the appropriateness of sample collection procedures",
"column_to_sort_by": null,
"type": "program_outcome",
"children": [
{
"name": "PATH5121 Clinical Biochemistry",
"column_to_sort_by": "PATH5121 Clinical Biochemistry",
"children": [
{
"name": "Learning Events - PATH5121",
"column_to_sort_by": null,
"type": "unit_group"
},
{
"name": "Assessments - PATH5121",
"column_to_sort_by": null,
"type": "unit_group"
}
],
"type": "unit"
},

Related

How to link two json array data's with Google apps script

Using a UrlFetchapp request, I retrieve data in json format in a sheet sheet, for non-table objects the processing is not that hard, but when it comes to tables it's a little less Easy,
I retrieve and display the label content in 4 columns in my sheets sheet by browsing the array object "feezeInformationList" then "feezeTypeCode" then "label", outside the "feezeInformationList" object we find additional data to the label, which is present in another array object, which is "glcfeezeInclusionInformationList", the complementary data is boolean and it is "glcfeezeIsIncludedInPrice" next to each column label, I would like to retrieve the true or false status of each label using maybe as input , the code attribute, here for example "2282".
"data": [
{
"glcfeezeInclusionInformationList": [
{
"feezeTypeCode": {
"code": "2282",
"description": "",
"label": "MMG"
},
"glcfeezeIsIncludedInPrice": true
}
feezeInformationList [
"feezeTypeCode": {
"code": "2282",
"description": "",
"label": "MMG"
},
]
Any help would be appreciated! thanks

Node js + Postgres, update Json column with SQL query

I am making a db query upon hitting a POST API endpoint. The query needs to update the Json column in my networks table, which only has 3 columns (id, name, and json). I need to specifically update the coreEssentials array with another value, so I have been using the set 'json' = ? SQL query where I paste in the entire column with my changes in the specific field and it works (manually in the db). The only issues are, I need to do make a SQL call to SELECT the json column for a specific id first, (long story, but a backend application generates some data into the JSON (the coreEssentials key/object I need to update) then puts it into the data, then after I need to update).
I was doing this manually in my Postgresql GUI (DBbeaver) and my query simply looks like this:
update network set "json" = '{
"uid": "randomUid",
"etag": "randomEtag",
"name": "randomNameAgain",
"state": "PENDING",
"Type": "ABC",
"version": 1,
"dealerId": "random_uuid",
"Param": {
"AreaId": 0,
"AreaIdStr": "0.0.0.0",
"DeadInterval": 0,
"HelloInterval": 0
},
"networkData": {
"tic": "311",
"toe": "980",
"tac": "201",
"tac_id": "201",
"timeZone": null
},
"production": false,
"customerName": "random_name",
"IPPool": "0.0.0.0/32",
"customerEmail": "random#email.com",
"coreEssentials": [ ],
"deployment": "A"
}'
coreEssentials starts out as an Empty array but I need to set it to this:
[{
"version": 1,
"component": "purple",
"instanceId": "1"
},
{
"version": 1,
"component": "gray",
"instanceId": "1"
},
{
"version": 1,
"component": "blue",
"instanceId": "1"
} ]
I'm using a Node JS backend with pg-promise (Postgresql) library. Can anyone give me advice how to do this query?
I just set coreEssentials array to the data object returned from the first SQL query like #vitaly-t suggested :D

Search functionality on nodes of D3 graph

So I've generated a JSON file with four tiers and I used D3.js's collapsing boxes format (https://bl.ocks.org/swayvil/b86f8d4941bdfcbfff8f69619cd2f460) to create a visualization.
The problem I am encountering is that because the JSON file is so large, the visualization won't even load into the HTML and even when it does, the boxes in the visualization lag and don't collapse as they should.
Therefore, I want to create a search form using Select2's dropdown box in HTML, so that users can enter a node/tier 1 value and the visualization will appear with only that specific sector shown. Since I am not good with Javascript I am finding quite hard to create such search functionality. I have assigned ID numbers to each value in the JSON but I'm not sure how to approach it further (and if this is even the correct direction to go in).
Below is a sample of my JSON code. So for example, if a user enters Lawyer and McDonald's, I want the visualization show only that node and it's children. I apologize if I'm unclear but any help would be great. Thanks so much!
{
"tree": {
"name": "Top Level",
"children": [
{
"name": "[('Lawyer', 'McDonald's')]",
"children": [
{
"name": "[('Doctor', 'Wendy's')]",
"percentage": "10%",
"duration": 5,
"children": [
{
"name": "[('Nurse', 'NYU')]",
"percentage": "1%",
"duration": 5,
"children": [
{
"name": "[('Pharmacist', 'LIU')]",
"percentage": "4%",
"duration": 5,
"id": "1.1.1.1"
},
{
"name": "[('PA', 'Wagner')]",
"percentage": "4%",
"duration": 5,
"id": "1.1.1.2"
}
],
"id": "1.1.1"
},
{
"name": "[('Surgeon', 'Harvard')]",
"percentage": "1%",
"duration": 3,
"children": [
{
"name": "[('Dentist', 'Buffalo')]",
"percentage": "1%",
"duration": 4,
"id": "1.1.2.1"
}
],
"id": "1.1.2"
}
],
"id": "1.1"
}
],
"id": "1"
},
{
There are a few things to change before you can actually make the D3 visualization work properly. Here are they.
(1) The data structure of the json doesn't match with the D3 code for displaying it. If you'd like to show the json data in the collapsing boxes properly adjust the below part of the code. d here corresponds with your children object and has properties; name, percentage, and duration
.append('xhtml').html(function(d) {
return '<div style="width: '
+ (rectNode.width - rectNode.textMargin * 2) + 'px; height: '
+ (rectNode.height - rectNode.textMargin * 2) + 'px;" class="node-text wordwrap">'
+ '<b>' + d.name + '</b><br><br>'
+ '<b>Percentage: </b>' + d.percentage + '<br>'
+ '<b>Duration: </b>' + d.duration + '<br>'
+ '</div>';
});
(2) Your data doesn't contain the following which is responsible for displaying the arrows properly when collapsing items into a parent box. This might be the case why the animation is not as it should.
"link" : {
"name" : "Link node 1 to 2.3",
"nodeName" : "NODE NAME 2.3",
"direction" : "ASYN"
},
(3) Here's the addition needed to implement the select2 drop-down box with all main branches.
HTML
<select class="js-example-basic-single" name="state">
JavaScript
$(document).ready(function() {
// map over all children in the main json branch
var dropdownData = json.tree.children.map(function(branch, i) {
return {
id: i,
text: branch.name,
}
});
// Add all branches to select2.
$('.js-example-basic-single').select2({
data: dropdownData
});
// Add change event listener. When an option is selected, clear the SVG and run treeBoxes function again.
$('.js-example-basic-single').change(function(e) {
$("#tree-container").empty();
var selectedBranch = e.target.value;
treeBoxes(null, json.tree.children[selectedBranch]);
});
});
Here's a live working example on JSFiddle that still needs some tweaking but it'll help you in the right direction.
NOTE: To make this example work, I've added the json in the html document instead of loading data from a file.

DocumentDB: How to filter document on array within array?

Let's say I have the following document:
{
"Id": "1",
"Properties": [
{
"Name": "Name1",
"PropertyTypes": [
"Type1"
]
},
{
"Name": "Name2",
"PropertyTypes": [
"Type1",
"Type2",
"Type3"
]
}
]
}
When I use the following SQL:
SELECT c.Id FROM c
JOIN p in c.Properties
WHERE ARRAY_CONTAINS(p.PropertyTypes,"Type1")
I get as return:
[
{
"Id": "1"
},
{
"Id": "1"
}
]
How do I change my query so that it only returns distinct documents?
As far as I know, Distinct hasn't supported by Azure Cosmos DB yet.
It seems that there is no way to remove the repeat data in the query SQL level.
You could handle with your query result set in the loop locally.
However, if your result data is large,I suggest you using a stored procedure to handle with result data in Azure Cosmos DB to release the pressure on your local server.
You could refer to the official tutorial about SP.

JIT adding sub graph individual edge color

I'm having a radial graph showing two levels of nodes. On clicking a node it is possible to add a sub graph with calling the sum() function. Everything works fine except setting individual color for the newly added edges.
Does anybody have ever tried to load sub graphs with individual edge colors or have a hint what I'm doing wrong?
Here I'm getting and adding the sub graph:
subtree = getSubtree(node.id);
//perform animation.
subtree.success(function(data){
rg.op.sum(data, {
type: 'fade:seq',
fps: 40,
duration: 1000,
hideLabels: false,
});
});
I've checked also the loaded data but for me it seems to be totally equal. I've also loaded the same data into the initial graph instead of the sub graph and then it was colored correct. Nevertheless here is some test data which is the result of the function getSubtree (the id "placeholder" matches the id of the existing where the sub graph should be added):
{
"id": "placeholder1",
"name": "country",
"children": [{
"id": "2_3mSV~_scat_1",
"name": "hyponym",
"children": [{
"children": [],
"adjacencies": {
"nodeTo": "2_3mSV~_scat_1",
"data": {
"$color": "#29A22D"
}
},
"data": {
"$color": "#29A22D"
},
"id": "3_58z3q_sc_174_6",
"name": "location"
}],
"data": {
"$type": "star",
"$color": "#666666"
},
"adjacencies": [{
"nodeTo": "3_58z3q_sc_174_6",
"data": {
"$color": "#29A22D"
}
}]
}]
}
I finally found the problem in the framework itself...
When calling the construct function inside the call of sum() which is actually adding the subtree then the data object containing information about the adjacence's individual visualization is not used for adding the new adjacence. Therefore I changed the code manually (this for loop is the new version of the existing for loop inside the construct() function):
for(var i=0, ch = json.children; i<ch.length; i++) {
//CUSTOM CODE: GET DATA OF THIS ADJACENCE
data = null;
if(ch[i].adjacencies[0]==undefined){
data = ch[i].adjacencies.data;
}
else{
data = ch[i].adjacencies.data;
}
ans.addAdjacence(json, ch[i], data);
arguments.callee(ans, ch[i]);
//CUSTOM CODE END
}

Categories

Resources