[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_106":-5,"_63":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":56,"_57":58,"_59":60,"_61":62,"_63":16,"_64":-7,"_65":41,"_66":41,"_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/varn4960/5581805c8bf44df8a7e170e0755ff125","author","varn4960","id","3d67423b84a845019c17ca761b60b619","title","Circles with D3","ownerHandle","curran","ownerDisplayName","Curran Kelleher","v3-user-varn4960","accountType","user","email","varun.gadde.1@gmail.com","displayName","Varun Gadde","avatar","https://avatars.githubusercontent.com/u/71449878?v=4","oauthProvider","github","oauthId","71449878","isAdmin","stripeCustomerId","handle","handleNormalized","lifecycleEmailsEnabled",true,"createdAt",1791491243372,"updatedAt","5581805c8bf44df8a7e170e0755ff125","files",{"_75":76,"_77":78},"63753239",{"_79":83,"_81":84},"72988870",{"_79":80,"_81":82},"name","script.js","text","// Network Graph Margin, width, and height\nvar Graph_Margin_D3 = {top: 10, right: 30, bottom: 30, left: 40},\n Graph_Width_D3 = 400 - Graph_Margin_D3.left - Graph_Margin_D3.right,\n Graph_Height_D3 = 400 - Graph_Margin_D3.top - Graph_Margin_D3.bottom;\n\n// SVG selection and sizing for the network graph\nvar network_SVG = d3.select(\"#Network-Graph-D3\")\n .attr(\"width\", Graph_Width_D3 + Graph_Margin_D3.left + Graph_Margin_D3.right)\n .attr(\"height\", Graph_Height_D3 + Graph_Margin_D3.top + Graph_Margin_D3.bottom)\n .append(\"g\")\n .attr(\"transform\", \"translate(\" + Graph_Margin_D3.left + \",\" + Graph_Margin_D3.top + \")\");\n\n// Data for the network graph\nvar Graph_Data_D3 = {\n \"nodes\": [\n {\"node_name\": \"Rebecca\"},\n {\"node_name\": \"Ashley\"},\n {\"node_name\": \"Amanda\"},\n {\"node_name\": \"Kimberly\"},\n {\"node_name\": \"Jessica\"},\n {\"node_name\": \"Kenneth\"},\n {\"node_name\": \"Brian\"},\n {\"node_name\": \"Christopher\"},\n {\"node_name\": \"Eric\"},\n {\"node_name\": \"Mary\"},\n {\"node_name\": \"Susan\"},\n {\"node_name\": \"Liam\"},\n {\"node_name\": \"Helen\"}\n ],\n \"links\": [\n {\"source\": \"Rebecca\", \"target\": \"Ashley\"},\n {\"source\": \"Rebecca\", \"target\": \"Amanda\"},\n {\"source\": \"Ashley\", \"target\": \"Amanda\"},\n {\"source\": \"Amanda\", \"target\": \"Kimberly\"},\n {\"source\": \"Amanda\", \"target\": \"Jessica\"},\n {\"source\": \"Kimberly\", \"target\": \"Kenneth\"},\n {\"source\": \"Kimberly\", \"target\": \"Brian\"},\n {\"source\": \"Jessica\", \"target\": \"Christopher\"},\n {\"source\": \"Jessica\", \"target\": \"Eric\"},\n {\"source\": \"Christopher\", \"target\": \"Mary\"},\n {\"source\": \"Eric\", \"target\": \"Susan\"},\n {\"source\": \"Mary\", \"target\": \"Liam\"},\n {\"source\": \"Susan\", \"target\": \"Helen\"}\n ]\n};\n\n// Selection of text labels for nodes in the network graph\nvar Graph_NODES_Labels = network_SVG.selectAll(\".node-label\")\n .data(Graph_Data_D3.nodes)\n .enter().append(\"text\")\n .attr(\"class\", \"node-label\")\n .text(function(d) { return d.node_name; });\n \n// Selection of lines (links) for the network graph\nvar Graph_links_D3 = network_SVG.selectAll(\"line\")\n .data(Graph_Data_D3.links)\n .enter()\n .append(\"line\")\n .style(\"stroke\", \"#f94144\"); // Red stroke color\n\n// Force simulation for the network graph\nvar simulation_D3 = d3.forceSimulation(Graph_Data_D3.nodes)\n.force(\"link\", d3.forceLink().id(d => d.node_name).links(Graph_Data_D3.links))\n.force(\"charge\", d3.forceManyBody().strength(-100))\n.force(\"center\", d3.forceCenter(Graph_Width_D3 / 2, Graph_Height_D3 / 2))\n.on(\"tick\", tickedGraph);\n\n// Selection of circles (nodes) for the network graph\nvar Graph_NODES_D3 = network_SVG.selectAll(\"circle\")\n .data(Graph_Data_D3.nodes)\n .enter()\n .append(\"circle\")\n .attr(\"r\", 6)\n .style(\"fill\", \"#90be6d\"); // Green fill color\n\n// Function to update positions of elements in the network graph during simulation\nfunction tickedGraph() {\n Graph_links_D3.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 Graph_NODES_D3.attr(\"cx\", function(d) { return d.x; })\n .attr(\"cy\", function(d) { return d.y; });\n\n Graph_NODES_Labels.attr(\"x\", function(d) { return d.x; })\n .attr(\"y\", function(d) { return d.y - 10; });\n}\n\n// Family Tree Margin, width, and height\nvar Tree_Margin_D3 = {top: 20, right: 90, bottom: 30, left: 90},\n Tree_Width_D3 = 660 - Tree_Margin_D3.left - Tree_Margin_D3.right,\n Tree_Height_D3 = 500 - Tree_Margin_D3.top - Tree_Margin_D3.bottom;\n\n// Define a tree layout for the family tree\nconst treeLayout = d3.tree().size([Tree_Height_D3, Tree_Width_D3]);\n\n// Data for the family tree\nvar Tree_Data_D3 = [\n {\"child\": \"Rebecca\"},\n {\"child\": \"Ashley\", \"parent\": \"Rebecca\"},\n {\"child\": \"Amanda\", \"parent\": \"Rebecca\"},\n {\"child\": \"Kimberly\", \"parent\": \"Amanda\"},\n {\"child\": \"Jessica\", \"parent\": \"Amanda\"},\n {\"child\": \"Kenneth\", \"parent\": \"Kimberly\"},\n {\"child\": \"Brian\", \"parent\": \"Kimberly\"},\n {\"child\": \"Christopher\", \"parent\": \"Jessica\"},\n {\"child\": \"Eric\", \"parent\": \"Jessica\"},\n {\"child\": \"Mary\", \"parent\": \"Christopher\"},\n {\"child\": \"Susan\", \"parent\": \"Eric\"},\n {\"child\": \"Liam\", \"parent\": \"Mary\"},\n {\"child\": \"Helen\", \"parent\": \"Susan\"}\n];\n\n// Create a hierarchy of nodes from the family tree data\nlet Tree_Nodes_D3 = d3.stratify()\n .id(function(d) { return d.child; })\n .parentId(function(d) { return d.parent; })\n (Tree_Data_D3);\n\n// Compute the layout for the family tree\nTree_Nodes_D3 = treeLayout(Tree_Nodes_D3);\n\n// Selection of the SVG element for the family tree and setting its width and height\nconst Tree_svg_D3 = d3.select(\"#Family-Tree-D3\")\n .attr(\"width\", Tree_Width_D3 + Tree_Margin_D3.left + Tree_Margin_D3.right)\n .attr(\"height\", Tree_Height_D3 + Tree_Margin_D3.top + Tree_Margin_D3.bottom),\n treeGroup = Tree_svg_D3.append(\"g\")\n .attr(\"transform\", \"translate(\" + Tree_Margin_D3.left + \",\" + Tree_Margin_D3.top + \")\");\n\n// Selection of groups for nodes in the family tree\nconst TreeNode_D3 = treeGroup.selectAll(\".node\")\n .data(Tree_Nodes_D3.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// Selection of paths (links) for the family tree\nconst Tree_svg_links_D3 = treeGroup.selectAll(\".link\")\n .data(Tree_Nodes_D3.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// Creation of circles for nodes in the family tree\nTreeNode_D3.append(\"circle\")\n .attr(\"r\", 10)\n .style(\"fill\", d => {\n if (d.depth === 0) return \"#f9c74f\"; // Root node\n else if (d.depth === 1) return \"#90be6d\"; // First layer\n else if (d.depth === 2) return \"#f94144\"; // Second layer\n else return \"#577590\"; // Other layers\n });\n\n// Adding text labels to the nodes in the family tree\nTreeNode_D3.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","index.html"," \n \n \n \n \n D3 Network Graph and Family Tree \n \n \n \n

D3.js Graph

\n \n \n

D3.js Tree

\n \n

\n \n \n \n \n","slug","Fork of Circles with D3","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","c8c6db7155a04f46b7975e14028b2703","startCommitId","bf5c6c208d5941138b7be4d267bcf3ae","forkedFrom","forkedFromVisibility",1712075675000,1712076016000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]