[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_106":-5,"_62":16,"_107":-5,"_108":109,"_110":111},"routes/viz-public",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":16,"_18":16,"_19":-5,"_20":21,"_22":16,"_23":24,"_25":26,"_27":-5,"_28":29,"_30":16,"_31":32,"_33":-5,"_34":35},"vizInfo",{"_42":72,"_85":72,"_44":86,"_87":-7,"_88":52,"_89":50,"_90":-5,"_91":92,"_93":16,"_94":95,"_96":97,"_98":43,"_99":-7,"_69":100,"_71":101,"_102":-5,"_103":68,"_104":105},"vizContent",{"_42":72,"_73":74,"_28":29},"ownerAccount",{"_42":50,"_51":52,"_53":54,"_55":54,"_56":57,"_58":59,"_60":61,"_62":16,"_63":-7,"_64":41,"_65":66,"_67":68,"_69":70,"_71":70},"isOwner",false,"isAuthenticated","canCreatePrivate","commitId","similarVizzes",[],"embed","forksCount",1,"forkedFromViz",{"_42":43,"_44":45,"_46":47,"_48":49},"runtimeVersion","license","MIT","descriptionIsAiGenerated","sourceProvenance",{"_36":37,"_38":39,"_28":29,"_40":41},"project","socialImageUrl","https://next.vizhub.com/assets/unfurl.webp","sourceType","v3","originalUrl","https://vizhub.com/Mouli369/ba41931bd95b494598a78d06b4a87e36","author","Mouli369","id","3d67423b84a845019c17ca761b60b619","title","Circles with D3","ownerHandle","curran","ownerDisplayName","Curran Kelleher","v3-user-mouli369","accountType","user","email","dmouli369@gmail.com","displayName","avatar","https://avatars.githubusercontent.com/u/68461521?v=4","oauthProvider","github","oauthId","68461521","isAdmin","stripeCustomerId","handle","handleNormalized","mouli369","lifecycleEmailsEnabled",true,"createdAt",1791491242101,"updatedAt","ba41931bd95b494598a78d06b4a87e36","files",{"_75":76,"_77":78},"56173072",{"_79":83,"_81":84},"67317606",{"_79":80,"_81":82},"name","index.html","text","\n\n \n \n \n \n Family Tree and Network Graph with help of D3.js\n \n \n \n \n

Network Graph using D3.js

\n \n\n

Family Tree using D3.js

\n \n

\n \n \n \n\n","script.js","// Margin, width, and height for the network graph\nvar network_graph_margin = {top: 10, right: 30, bottom: 30, left: 40},\n network_graph_width = 400 - network_graph_margin.left - network_graph_margin.right,\n network_graph_height = 400 - network_graph_margin.top - network_graph_margin.bottom;\n\n// Select the SVG element for the network graph and set its width and height\nvar network_graph_SVG = d3.select(\"#network-graph\")\n .attr(\"width\", network_graph_width + network_graph_margin.left + network_graph_margin.right)\n .attr(\"height\", network_graph_height + network_graph_margin.top + network_graph_margin.bottom)\n .append(\"g\")\n .attr(\"transform\", \"translate(\" + network_graph_margin.left + \",\" + network_graph_margin.top + \")\");\n\n// Data for the network graph\nvar network_graph_Data = {\n \"nodes\": [\n {\"eachNode\": \"Jacob\"},\n {\"eachNode\": \"Melissa\"},\n {\"eachNode\": \"Betty\"},\n {\"eachNode\": \"Tyler\"},\n {\"eachNode\": \"James\"},\n {\"eachNode\": \"Robert\"},\n {\"eachNode\": \"Susan\"},\n {\"eachNode\": \"Amelia\"},\n {\"eachNode\": \"Lucas\"},\n {\"eachNode\": \"Nancy\"},\n {\"eachNode\": \"Daniel\"}\n ],\n \"links\": [\n {\"source\": \"Jacob\", \"target\": \"Melissa\"},\n {\"source\": \"Jacob\", \"target\": \"Betty\"},\n {\"source\": \"Melissa\", \"target\": \"Betty\"},\n {\"source\": \"Betty\", \"target\": \"Tyler\"},\n {\"source\": \"Betty\", \"target\": \"James\"},\n {\"source\": \"Tyler\", \"target\": \"Robert\"},\n {\"source\": \"Tyler\", \"target\": \"Susan\"},\n {\"source\": \"Robert\", \"target\": \"Amelia\"},\n {\"source\": \"Robert\", \"target\": \"Lucas\"},\n {\"source\": \"Susan\", \"target\": \"Nancy\"},\n {\"source\": \"Nancy\", \"target\": \"Daniel\"}\n ]\n};\n\n// Selection of lines (links) for the network graph\nvar network_graph_LINK = network_graph_SVG.selectAll(\"line\")\n .data(network_graph_Data.links)\n .enter()\n .append(\"line\")\n .style(\"stroke\", \"#e63946\"); // Red stroke color\n\n// Selection of circles (nodes) for the network graph\nvar network_graph_NODE = network_graph_SVG.selectAll(\"circle\")\n .data(network_graph_Data.nodes)\n .enter()\n .append(\"circle\")\n .attr(\"r\", 6)\n .style(\"fill\", \"#a8dadc\"); // Blue fill color\n\n// Selection of text labels for nodes in the network graph\nvar network_graph_NODE_Labels = network_graph_SVG.selectAll(\".node-label\")\n .data(network_graph_Data.nodes)\n .enter().append(\"text\")\n .attr(\"class\", \"node-label\")\n .text(function(d) { return d.eachNode; });\n\n// Force simulation for the network graph\nvar simulation = d3.forceSimulation(network_graph_Data.nodes)\n .force(\"link\", d3.forceLink().id(d => d.eachNode).links(network_graph_Data.links))\n .force(\"charge\", d3.forceManyBody().strength(-100))\n .force(\"center\", d3.forceCenter(network_graph_width / 2, network_graph_height / 2))\n .on(\"tick\", networkTicked);\n\n// Function to update positions of elements in the network graph during simulation\nfunction networkTicked() {\n network_graph_LINK.attr(\"x1\", function(d) { return d.source.x; })\n .attr(\"y1\", function(d) { return d.source.y; })\n .attr(\"x2\", function(d) { return d.target.x; })\n .attr(\"y2\", function(d) { return d.target.y; });\n\n network_graph_NODE.attr(\"cx\", function(d) { return d.x; })\n .attr(\"cy\", function(d) { return d.y; });\n\n network_graph_NODE_Labels.attr(\"x\", function(d) { return d.x; })\n .attr(\"y\", function(d) { return d.y - 10; });\n}\n\n// Margin, width, and height for the family tree\nvar family_tree_margin = {top: 20, right: 90, bottom: 30, left: 90},\n family_tree_width = 660 - family_tree_margin.left - family_tree_margin.right,\n family_tree_height = 500 - family_tree_margin.top - family_tree_margin.bottom;\n\n// Define a tree layout for the family tree\nconst treemap = d3.tree().size([family_tree_height, family_tree_width]);\n\n// Data for the family tree\nvar family_tree_data = [\n {\"child\": \"Jacob\"},\n {\"child\": \"Melissa\", \"parent\": \"Jacob\"},\n {\"child\": \"Betty\", \"parent\": \"Jacob\"},\n {\"child\": \"Tyler\", \"parent\": \"Melissa\"},\n {\"child\": \"James\", \"parent\": \"Betty\"},\n {\"child\": \"Robert\", \"parent\": \"Tyler\"},\n {\"child\": \"Susan\", \"parent\": \"Tyler\"},\n {\"child\": \"Amelia\", \"parent\": \"Robert\"},\n {\"child\": \"Lucas\", \"parent\": \"Robert\"},\n {\"child\": \"Nancy\", \"parent\": \"Susan\"},\n {\"child\": \"Daniel\", \"parent\": \"Nancy\"}\n];\n\n// Create a hierarchy of nodes from the family tree data\nlet family_tree_NODES = d3.stratify()\n .id(function(d) { return d.child; })\n .parentId(function(d) { return d.parent; })\n (family_tree_data);\n\n// Compute the layout for the family tree\nfamily_tree_NODES = treemap(family_tree_NODES);\n\n// Selection of the SVG element for the family tree and setting its width and height\nconst family_tree_SVG = d3.select(\"#family-tree\")\n .attr(\"width\", family_tree_width + family_tree_margin.left + family_tree_margin.right)\n .attr(\"height\", family_tree_height + family_tree_margin.top + family_tree_margin.bottom),\n treeG = family_tree_SVG.append(\"g\")\n .attr(\"transform\", \"translate(\" + family_tree_margin.left + \",\" + family_tree_margin.top + \")\");\n\n// Selection of paths (links) for the family tree\nconst family_tree_LINK = treeG.selectAll(\".link\")\n .data(family_tree_NODES.descendants().slice(1))\n .enter().append(\"path\")\n .attr(\"class\", \"link\")\n .attr(\"d\", d => {\n return \"M\" + d.y + \",\" + d.x\n + \"C\" + (d.y + d.parent.y) / 2 + \",\" + d.x\n + \" \" + (d.y + d.parent.y) / 2 + \",\" + d.parent.x\n + \" \" + d.parent.y + \",\" + d.parent.x;\n });\n\n// Selection of groups for nodes in the family tree\nconst treeNode = treeG.selectAll(\".node\")\n .data(family_tree_NODES.descendants())\n .enter().append(\"g\")\n .attr(\"class\", d => \"node\" + (d.children ? \" node--internal\" : \" node--leaf\"))\n .attr(\"transform\", d => \"translate(\" + d.y + \",\" + d.x + \")\");\n\n// Creation of circles for nodes in the family tree\ntreeNode.append(\"circle\")\n .attr(\"r\", 10)\n .style(\"fill\", d => {\n if (d.depth === 0) return \"#457b9d\"; // Root node\n else if (d.depth === 1) return \"#a8dadc\"; // First layer\n else if (d.depth === 2) return \"#1d3557\"; // Second layer\n else return \"#f1faee\"; // Other layers\n });\n\n// Adding text labels to the nodes in the family tree\ntreeNode.append(\"text\")\n .attr(\"dy\", \".35em\")\n .attr(\"x\", d => d.children ? (d.data.value + 5) * -1 : d.data.value + 5)\n .attr(\"y\", d => d.children && d.depth !== 0 ? -(d.data.value + 5) : d)\n .style(\"text-anchor\", d => d.children ? \"end\" : \"start\")\n .text(d => d.data.child);\n","slug","Fork of Circles with D3","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","2ad1b1adc12245bb992167a6ed640d31","startCommitId","a7220b19ef4d491b999959fc6bd22ee8","forkedFrom","forkedFromVisibility",1712025899000,1712026011000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]