Tree Visualization

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_108":-5,"_60":16,"_109":-5,"_110":111,"_112":113},"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":70,"_87":70,"_44":88,"_89":-7,"_90":51,"_91":49,"_92":-5,"_93":94,"_95":16,"_96":97,"_98":99,"_100":43,"_101":-7,"_67":102,"_69":103,"_104":-5,"_105":66,"_106":107},"vizContent",{"_42":70,"_71":72,"_28":29},"ownerAccount",{"_42":49,"_50":51,"_52":48,"_53":48,"_54":55,"_56":57,"_58":59,"_60":16,"_61":-7,"_62":41,"_63":64,"_65":66,"_67":68,"_69":68},"isOwner",false,"isAuthenticated","canCreatePrivate","commitId","similarVizzes",[],"embed","forksCount",0,"forkedFromViz",{"_42":43,"_44":45,"_46":41,"_47":48},"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/Priyanka-Jammigumpula/650eab2c43ca49c7880751e7a2e36869","author","Priyanka-Jammigumpula","id","5e7ac3e3ec5d49c680ea37b0afef86fd","title","Fork of ICE8-Tree graph","ownerHandle","ownerDisplayName","jammigumpula.priyanka193@gmail.com","v3-user-priyanka-jammigumpula","accountType","user","email","displayName","avatar","https://avatars.githubusercontent.com/u/162358584?v=4","oauthProvider","github","oauthId","162358584","isAdmin","stripeCustomerId","handle","handleNormalized","priyanka-jammigumpula","lifecycleEmailsEnabled",true,"createdAt",1791491277212,"updatedAt","650eab2c43ca49c7880751e7a2e36869","files",{"_73":74,"_75":76,"_77":78},"270fdb6c",{"_79":85,"_81":86},"8dbc301e",{"_79":83,"_81":84},"a3c74534",{"_79":80,"_81":82},"name","style.css","text",".node circle {\n fill: #fff;\n stroke-width: 1.5px;\n}\n\n.node text {\n font: 12px sans-serif;\n pointer-events: none;\n text-anchor: middle;\n}\n\n.link {\n fill: none;\n stroke: #aaa;\n stroke-width: 1.5px;\n}\n\nbody {\n background-color: '#2a0e57';\n}\n","index.html","\n\n \n \n \n Tree Visualization\n \n \n \n \n \n

\n \n\n","index.js","const data = {\n name: 'ASD Traits',\n children: [\n {\n name: 'YES',\n value: 5,\n level: '#2a0e57',\n children: [\n {\n name: 'White European',\n children: [\n {\n name: 'Male',\n children: [\n {\n name: 'Jaundice - Yes',\n value: 2,\n level: '#3a9f7e',\n },\n {\n name: 'Jaundice - No',\n value: 6,\n level: '#3a9f7e',\n },\n ],\n },\n {\n name: 'Female',\n children: [\n {\n name: 'Jaundice - Yes',\n value: 4,\n level: '#3a9f7e',\n },\n {\n name: 'Jaundice - No',\n value: 6,\n level: '#3a9f7e',\n },\n ],\n },\n ],\n },\n {\n name: 'Hispanic',\n children: [\n {\n name: 'Male',\n children: [\n {\n name: 'Jaundice - Yes',\n value: 3,\n level: '#3a9f7e',\n },\n {\n name: 'Jaundice - No',\n value: 7,\n level: '#3a9f7e',\n },\n ],\n },\n {\n name: 'Female',\n children: [\n {\n name: 'Jaundice - Yes',\n value: 2,\n level: '#3a9f7e',\n },\n {\n name: 'Jaundice - No',\n value: 8,\n level: '#3a9f7e',\n },\n ],\n },\n ],\n },\n {\n name: 'Asian',\n children: [\n {\n name: 'Male',\n children: [\n {\n name: 'Jaundice - Yes',\n value: 3,\n level: '#3a9f7e',\n },\n {\n name: 'Jaundice - No',\n value: 5,\n level: '#3a9f7e',\n },\n ],\n },\n {\n name: 'Female',\n children: [\n {\n name: 'Jaundice - Yes',\n value: 2,\n level: '#3a9f7e',\n },\n {\n name: 'Jaundice - No',\n value: 7,\n level: '#3a9f7e',\n },\n ],\n },\n ],\n },\n ],\n },\n {\n name: 'NO',\n value: 8,\n level: '#2a0e57',\n children: [\n {\n name: 'White European',\n children: [\n {\n name: 'Male',\n children: [\n {\n name: 'Jaundice - Yes',\n value: 1,\n level: '#3a9f7e',\n },\n {\n name: 'Jaundice - No',\n value: 4,\n level: '#3a9f7e',\n },\n ],\n },\n {\n name: 'Female',\n children: [\n {\n name: 'Jaundice - Yes',\n value: 2,\n level: '#3a9f7e',\n },\n {\n name: 'Jaundice - No',\n value: 3,\n level: '#3a9f7e',\n },\n ],\n },\n ],\n },\n {\n name: 'Hispanic',\n children: [\n {\n name: 'Male',\n children: [\n {\n name: 'Jaundice - Yes',\n value: 2,\n level: '#3a9f7e',\n },\n {\n name: 'Jaundice - No',\n value: 4,\n level: '#3a9f7e',\n },\n ],\n },\n {\n name: 'Female',\n children: [\n {\n name: 'Jaundice - Yes',\n value: 2,\n level: '#3a9f7e',\n },\n {\n name: 'Jaundice - No',\n value: 4,\n level: '#3a9f7e',\n },\n ],\n },\n ],\n },\n {\n name: 'Asian',\n children: [\n {\n name: 'Male',\n children: [\n {\n name: 'Jaundice - Yes',\n value: 2,\n level: '#3a9f7e',\n },\n {\n name: 'Jaundice - No',\n value: 5,\n level: '#3a9f7e',\n },\n ],\n },\n {\n name: 'Female',\n children: [\n {\n name: 'Jaundice - Yes',\n value: 2,\n level: '#3a9f7e',\n },\n {\n name: 'Jaundice - No',\n value: 2,\n level: '#3a9f7e',\n },\n ],\n },\n ],\n },\n ],\n },\n ],\n};\n\nlet nodes = [],\n links = [];\n\nfunction traverse(node, parent = null) {\n if (parent === null) {\n nodes.push({ id: node.name, level: node.level });\n } else {\n links.push({ source: parent.name, target: node.name });\n }\n\n if (node.children) {\n node.children.forEach((child) => {\n nodes.push({\n id: child.name,\n level: child.level || parent.level,\n });\n traverse(child, node);\n });\n }\n}\n\ntraverse(data);\n\n// Remove duplicate nodes\nnodes = Array.from(\n new Map(nodes.map((node) => [node.id, node])).values(),\n);\n\nconst width = 1000, \n height = 800; \n\nconst svg = d3\n .select('#network')\n .append('svg')\n .attr('width', width)\n .attr('height', height);\n\nconst simulation = d3\n .forceSimulation(nodes)\n .force(\n 'link',\n d3\n .forceLink(links)\n .id((d) => d.id)\n .distance(100),\n ) // Increased link distance\n .force('charge', d3.forceManyBody().strength(-50)) \n .force('center', d3.forceCenter(width / 2, height / 2))\n .force('collision', d3.forceCollide().radius(30)); \n\nconst link = svg\n .append('g')\n .attr('class', 'links')\n .selectAll('line')\n .data(links)\n .enter()\n .append('line')\n .style('stroke', '#aaa');\n\nconst node = svg\n .append('g')\n .attr('class', 'nodes')\n .selectAll('circle')\n .data(nodes)\n .enter()\n .append('circle')\n .attr('r', 10) // Increase node size\n .style('fill', (d) => d.level)\n .call(\n d3\n .drag()\n .on('start', dragstarted)\n .on('drag', dragged)\n .on('end', dragended),\n );\n\nnode.append('title').text((d) => d.id);\n\n// Add text labels to nodes\nconst labels = svg\n .append('g')\n .attr('class', 'labels')\n .selectAll('text')\n .data(nodes)\n .enter()\n .append('text')\n .attr('dx', 15) // Offset the text to the right\n .attr('dy', 5) // Offset the text downward a bit\n .style('font-size', '12px') \n .text((d) => d.id); // Set the text content to the node's ID\n\n// Position the text labels\nlabels.attr('x', (d) => d.x).attr('y', (d) => d.y);\n\nsimulation.nodes(nodes).on('tick', ticked);\n\nsimulation.force('link').links(links);\n\nfunction ticked() {\n link\n .attr('x1', (d) => d.source.x)\n .attr('y1', (d) => d.source.y)\n .attr('x2', (d) => d.target.x)\n .attr('y2', (d) => d.target.y);\n\n node.attr('cx', (d) => d.x).attr('cy', (d) => d.y);\n\n labels\n .attr('x', (d) => d.x + 10)\n .attr('y', (d) => d.y + 3);\n}\n\nfunction dragstarted(event) {\n if (!event.active) simulation.alphaTarget(0.3).restart();\n event.subject.fx = event.subject.x;\n event.subject.fy = event.subject.y;\n}\n\nfunction dragged(event) {\n event.subject.fx = event.x;\n event.subject.fy = event.y;\n}\n\nfunction dragended(event) {\n if (!event.active) simulation.alphaTarget(0);\n event.subject.fx = null;\n event.subject.fy = null;\n}\n","slug","Network","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","6e1fd77960354d49bc76e43db4a6bfdb","startCommitId","b4c89f38765640e4b23132565c19b125","forkedFrom","forkedFromVisibility",1712097309000,1712106129000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]