[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_110":-5,"_62":16,"_111":-5,"_112":113,"_114":115},"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,"_89":72,"_44":90,"_91":-7,"_92":52,"_93":50,"_94":-5,"_95":96,"_97":16,"_98":99,"_100":101,"_102":43,"_103":-7,"_69":104,"_71":105,"_106":-5,"_107":68,"_108":109},"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/images/7261a8d290bb4cac1d90597019d45ce432ce32a5689f7b2406ccf3c7f52c7497.png","sourceType","v3","originalUrl","https://vizhub.com/Mahesh-Polisetty/ecf02633dba8488c9c0baafa72466607","author","Mahesh-Polisetty","id","ebb3fdf27aa7460f87bfcbb46c29f2d9","title","Tree Graph","ownerHandle","Prasaadreddy","ownerDisplayName","prasaad.lakshme901@gmail.com","v3-user-mahesh-polisetty","accountType","user","email","pmbhupathibalu@gmail.com","displayName","avatar","https://avatars.githubusercontent.com/u/154647065?v=4","oauthProvider","github","oauthId","154647065","isAdmin","stripeCustomerId","handle","handleNormalized","mahesh-polisetty","lifecycleEmailsEnabled",true,"createdAt",1791333407127,"updatedAt","ecf02633dba8488c9c0baafa72466607","files",{"_75":76,"_77":78,"_79":80},"46685328",{"_81":87,"_83":88},"270fdb6c",{"_81":85,"_83":86},"8dbc301e",{"_81":82,"_83":84},"name","index.html","text","\n\n \n \n \n Tree Graph Visualization\n \n \n \n

Tree Graph Visualization

\n \n \n

\n\n \n \n\n \n \n \n\n","index.js","// Fetch the data from the URL\nconst dataURL =\n 'https://gist.githubusercontent.com/Mahesh-Polisetty/e98d8e7ab4a82a70e0a973207cd2d903/raw/0614b4f1d8703afd3e663d804a4c635ff616f47c/gistfile1.txt';\n\n// Preprocess the data for the tree structure\nasync function getData() {\n const response = await fetch(dataURL);\n const textData = await response.text();\n\n // Convert text data to array of objects\n const dataArray = d3.csvParse(textData);\n\n // Preprocess data for the tree structure\n const treeData = processDataForTree(dataArray);\n\n // Create visualization using treeData\n createTreeVisualization(treeData);\n}\n\n// Function to preprocess data for tree structure\nfunction processDataForTree(data) {\n // Create an object to store tree data\n const treeData = {\n name: 'ICRISAT Data',\n children: [],\n };\n\n // Create additional link data\n const additionalLinks = [\n { source: 'ICRISAT Data', target: 'Andhra Pradesh' },\n { source: 'Andhra Pradesh', target: 'Guntur' },\n ];\n\n // Iterate over each row of the data\n data.forEach((row) => {\n const stateIndex = treeData.children.findIndex(\n (state) => state.name === row['State Name'],\n );\n\n // If state not found, add state to tree data\n if (stateIndex === -1) {\n treeData.children.push({\n name: row['State Name'],\n children: [\n {\n name: row['Dist Name'],\n children: [\n {\n name: 'Rice',\n value: parseFloat(\n row['RICE PRODUCTION (1000 tons)'],\n ),\n },\n {\n name: 'Wheat',\n value: parseFloat(\n row['WHEAT PRODUCTION (1000 tons)'],\n ),\n },\n {\n name: 'Kharif Sorghum',\n value: parseFloat(\n row[\n 'KHARIF SORGHUM PRODUCTION (1000 tons)'\n ],\n ),\n },\n {\n name: 'Rabi Sorghum',\n value: parseFloat(\n row[\n 'RABI SORGHUM PRODUCTION (1000 tons)'\n ],\n ),\n },\n ],\n },\n ],\n });\n } else {\n const districtIndex = treeData.children[\n stateIndex\n ].children.findIndex(\n (district) => district.name === row['Dist Name'],\n );\n\n // If district not found, add district to respective state\n if (districtIndex === -1) {\n treeData.children[stateIndex].children.push({\n name: row['Dist Name'],\n children: [\n {\n name: 'Rice',\n value: parseFloat(\n row['RICE PRODUCTION (1000 tons)'],\n ),\n },\n {\n name: 'Wheat',\n value: parseFloat(\n row['WHEAT PRODUCTION (1000 tons)'],\n ),\n },\n {\n name: 'Kharif Sorghum',\n value: parseFloat(\n row[\n 'KHARIF SORGHUM PRODUCTION (1000 tons)'\n ],\n ),\n },\n {\n name: 'Rabi Sorghum',\n value: parseFloat(\n row['RABI SORGHUM PRODUCTION (1000 tons)'],\n ),\n },\n ],\n });\n } else {\n // If district found, update production values\n treeData.children[stateIndex].children[\n districtIndex\n ].children[0].value += parseFloat(\n row['RICE PRODUCTION (1000 tons)'],\n );\n treeData.children[stateIndex].children[\n districtIndex\n ].children[1].value += parseFloat(\n row['WHEAT PRODUCTION (1000 tons)'],\n );\n treeData.children[stateIndex].children[\n districtIndex\n ].children[2].value += parseFloat(\n row['KHARIF SORGHUM PRODUCTION (1000 tons)'],\n );\n treeData.children[stateIndex].children[\n districtIndex\n ].children[3].value += parseFloat(\n row['RABI SORGHUM PRODUCTION (1000 tons)'],\n );\n }\n }\n });\n\n // Merge additional link data\n treeData.additionalLinks = additionalLinks;\n\n return treeData;\n}\n\n// Function to create a tree structure visualization\nfunction createTreeVisualization(treeData) {\n const svg = d3.select('#tree-svg');\n const width = +svg.attr('width');\n const height = +svg.attr('height');\n const margin = {\n top: 20,\n right: 160,\n bottom: 50,\n left: 140,\n };\n\n const treeLayout = d3\n .tree()\n .size([\n height - margin.top - margin.bottom,\n width - margin.left - margin.right,\n ]);\n\n const root = d3.hierarchy(treeData);\n treeLayout(root);\n\n const g = svg\n .append('g')\n .attr(\n 'transform',\n `translate(${margin.left},${margin.top})`,\n );\n\n // Draw additional links\n treeData.additionalLinks.forEach((link) => {\n g.append('path')\n .attr('class', 'additional-link')\n .attr('d', () => {\n const sourceNode = root\n .descendants()\n .find((node) => node.data.name === link.source);\n const targetNode = root\n .descendants()\n .find((node) => node.data.name === link.target);\n return `M${sourceNode.y},${sourceNode.x}L${targetNode.y},${targetNode.x}`;\n });\n });\n\n const link = g\n .selectAll('.link')\n .data(root.links())\n .enter()\n .append('path')\n .attr('class', 'link')\n .attr(\n 'd',\n d3\n .linkVertical()\n .x((d) => d.y)\n .y((d) => d.x),\n );\n\n const node = g\n .selectAll('.node')\n .data(root.descendants())\n .enter()\n .append('g')\n .attr('class', 'node')\n .attr('transform', (d) => `translate(${d.y},${d.x})`);\n\n node\n .append('circle')\n .attr('r', 4)\n .attr('fill', (d) =>\n d.children ? 'black' : 'lightblue',\n );\n\n node\n .append('text')\n .attr('dy', '.35em')\n .attr('x', (d) => (d.children ? -13 : 13))\n .style('text-anchor', (d) =>\n d.children ? 'end' : 'start',\n )\n .text((d) => d.data.name)\n .clone(true)\n .lower()\n .attr('stroke', 'white');\n}\n\n// Load data and create visualization\ngetData();\n","index.css","body {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n background-color: #f4f4f4; /* Light gray background */\n}\n\n.container {\n max-width: 960px;\n margin: 0 auto;\n padding: 20px;\n background-color: lightgray; \n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Drop shadow effect */\n}\n\nh1 {\n text-align: center;\n font-size: 32px;\n color: steelblue; /* Steel blue heading color */\n margin-bottom: 20px;\n}\n\n/* CSS styling for the tree visualization */\n.link {\n fill: none;\n stroke: black; /* Color of connecting lines */\n stroke-width: 1; /* Width of connecting lines */\n}\n\n.node circle {\n fill: #fff;\n stroke: red;\n stroke-width: 2px;\n}\n\n.node text {\n font: 14px sans-serif; /* Larger font size */\n fill: #333; /* Darker text color */\n}\n","slug","Fork of Tree Graph","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","f092050940f148e78be8a960ecf456af","startCommitId","b3512b2540f8456b9f90fa471a0ca324","forkedFrom","forkedFromVisibility",1711938742000,1712008764000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]