[{"_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/images/c59b205b8eb4002285200c5a96009f1df54f2ee26d196fe4485e70a9b7be3b31.png","sourceType","v3","originalUrl","https://vizhub.com/Prathi0410/d9a49d770a6640a8baf7927f1b5ae1f7","author","Prathi0410","id","b025da4c78424309a9646149e0a8f398","title","iCE8-Tree-Prathima","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","d9a49d770a6640a8baf7927f1b5ae1f7","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","//data used is infrastructure distribution of power\nconst 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 capacity: 100,\n },\n {\n name: 'Solar Power Plant',\n value: 1,\n type: 'red',\n level: '#863a9f',\n capacity: 90,\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 capacity: 150,\n },\n {\n name: 'Distribution Substation',\n value: 1,\n type: 'red',\n level: '#863a9f',\n capacity: 230,\n },\n {\n name: 'Industrial Zone Substation',\n value: 1,\n type: 'red',\n level: '#863a9f',\n capacity: 95,\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 capacity: 80,\n },\n {\n name: 'Rural Area Distribution Center',\n value: 1,\n type: 'red',\n level: '#863a9f',\n capacity: 170,\n },\n {\n name: 'Commercial District Distribution Center',\n value: 1,\n type: 'red',\n level: '#863a9f',\n capacity: 205,\n },\n ],\n },\n ],\n};\n\nconst margin = {\n top: 20,\n right: 320,\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\nlet nodes = d3.hierarchy(data, (node) => node.children);\nnodes = tree(nodes);\n\nconst svgExists = d3.select('svg').empty();\n//for background and main svg creation\n\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');\n\n const g = svg\n .append('g')\n .attr(\n 'transform',\n 'translate(' + margin.left + ',' + margin.top + ')',\n );\n //creation of links \n\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//node creation\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 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 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) => {\n if (d.data.capacity !== undefined) {\n return `${d.data.name} (${d.data.capacity})`;\n } else {\n return d.data.name;\n }\n });\n}\n","slug","practice tree","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","9d95a4798a464064801988dbf038fbf9","startCommitId","8745e5a4cdf64e818336dc08922efbf2","forkedFrom","forkedFromVisibility",1712103267000,1712105793000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]