[{"_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",1,"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/Prathi0410/b025da4c78424309a9646149e0a8f398","author","Prathi0410","id","734f0bf48ae842bf90c1ad4c767ad800","title","ICE-8-TREE-religions","ownerHandle","ownerDisplayName","pilliprathimarani@my.unt.edu","v3-user-prathi0410","accountType","user","email","displayName","avatar","https://avatars.githubusercontent.com/u/143756168?v=4","oauthProvider","github","oauthId","143756168","isAdmin","stripeCustomerId","handle","handleNormalized","prathi0410","lifecycleEmailsEnabled",true,"createdAt",1791491230054,"updatedAt","b025da4c78424309a9646149e0a8f398","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","/* Add your custom CSS styles here */\nbody {\n font-family: Arial, sans-serif;\n}\n\n.node circle {\n fill: #fff;\n stroke-width: 10px;\n}\n\n.node text {\n font-size: 15px;\n}\n\n.link {\n fill: none;\n stroke-width: 3px;\n}\n/* style.css */\n\nbody {\n font-family: Arial, sans-serif;\n text-align: center; /* Center align the content */\n color: #333; /* Set the color of the text */\n}\n\nh1 {\n color: #1f77b4; /* Set the color of the title */\n}\n","index.html","\n\n \n \n \n \n \n \n \n \n

\n Infrastructure Distribution of Tree Visualization\n

\n \n\n","index.js","const data = {\n name: 'Energy Infrastructure',\n children: [\n {\n name: 'Power Plants',\n value: 2,\n type: 'blue',\n level: 'green',\n children: [\n {\n name: 'Coal Power Plant',\n value: 1,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Solar Power Plant',\n value: 1,\n type: 'red',\n level: '#863a9f',\n },\n ],\n },\n {\n name: 'Substations',\n value: 3,\n type: 'blue',\n level: 'green',\n children: [\n {\n name: 'Transmission Substation',\n value: 1,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Distribution Substation',\n value: 1,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Industrial Zone Substation',\n value: 1,\n type: 'red',\n level: '#863a9f',\n },\n ],\n },\n {\n name: 'Distribution Centers',\n value: 3,\n type: 'blue',\n level: 'green',\n children: [\n {\n name: 'Urban Area Distribution Center',\n value: 1,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Rural Area Distribution Center',\n value: 1,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Commercial District Distribution Center',\n value: 1,\n type: 'red',\n level: '#863a9f',\n },\n ],\n },\n ],\n};\n// Define width, height, and margin of the tree\nconst margin = {\n top: 20,\n right: 300,\n bottom: 200,\n left: 200,\n};\nconst width = 850 - margin.left - margin.right;\nconst height = 850 - margin.top - margin.bottom;\n\nconst tree = d3.tree().size([height, width]);\n\n// Assign hierarchical structure to classify the data\nlet nodes = d3.hierarchy(data, (node) => node.children);\n\n// Provide data connection for nodes to their respective position in the tree\nnodes = tree(nodes);\n\n// Check if SVG already exists\nconst svgExists = d3.select('svg').empty();\n\n// Add an svg element if it doesn't exist\nif (svgExists) {\n const svg = d3\n .select('body')\n .append('svg')\n .attr('width', width + margin.left + margin.right)\n .attr('height', height + margin.top + margin.bottom)\n .style('background-color', 'lightblue'); // Set the background color here\n\n const g = svg\n .append('g') // appends group\n .attr(\n 'transform',\n 'translate(' + margin.left + ',' + margin.top + ')',\n );\n\n // Define links between nodes\n const link = g\n .selectAll('.link')\n .data(nodes.descendants().slice(1))\n .enter()\n .append('path')\n .attr('class', 'link')\n .style('stroke', (d) => d.data.level)\n .attr('d', (d) => {\n return (\n 'M' +\n d.y +\n ',' +\n d.x +\n 'C' +\n (d.y + d.parent.y) / 2 +\n ',' +\n d.x +\n ' ' +\n (d.y + d.parent.y) / 2 +\n ',' +\n d.parent.x +\n ' ' +\n d.parent.y +\n ',' +\n d.parent.x\n );\n });\n\n // Declare a group for each node present in the tree\n const node = g\n .selectAll('.node')\n .data(nodes.descendants())\n .enter()\n .append('g')\n .attr(\n 'class',\n (d) =>\n 'node' +\n (d.children ? ' node--internal' : ' node--leaf'),\n )\n .attr(\n 'transform',\n (d) => 'translate(' + d.y + ',' + d.x + ')',\n );\n\n // Define shape of the node\n node\n .append('circle')\n .attr('r', (d) => d.data.value)\n .style('stroke', (d) => d.data.type)\n .style('fill', (d) => d.data.level);\n\n // Add a new node to the list\n node\n .append('text')\n .attr('dy', '.100em')\n .attr('x', (d) =>\n d.children\n ? (d.data.value + 5) * -1\n : d.data.value + 5,\n )\n .attr('y', (d) =>\n d.children && d.depth !== 0 ? -(d.data.value + 5) : d,\n )\n .style('text-anchor', (d) =>\n d.children ? 'end' : 'start',\n )\n .text((d) => d.data.name);\n}\n","slug","iCE8-Tree-Prathima","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","00fbdae6d89b49bab4ae650bc9c51d39","startCommitId","f9611838346241259bc5d0d09e95f9ea","forkedFrom","forkedFromVisibility",1712100920000,1712103105000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]