[{"_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/Prathi0410/2f54306ec8c94b9ba1a91219ea1385cb","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","2f54306ec8c94b9ba1a91219ea1385cb","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: 4px;\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

Religious Distribution Tree Visualization

\n \n\n","index.js","// Define the religious data\nconst data = {\n name: 'India',\n children: [\n {\n name: 'Hinduism',\n value: 13,\n type: 'blue',\n level: 'green',\n children: [\n {\n name: 'Andhra Pradesh',\n population: 53780000,\n value: 3,\n type: 'red',\n level: '#863a9f',\n followers: 15000000,\n },\n {\n name: 'Arunachal Pradesh',\n value: 2,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Assam',\n value: 4,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Bihar',\n value: 3,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Chhattisgarh',\n value: 2,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Goa',\n value: 2,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Gujarat',\n value: 3,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Haryana',\n value: 3,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Himachal Pradesh',\n value: 3,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Jharkhand',\n value: 3,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Karnataka',\n value: 4,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Kerala',\n value: 3,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Madhya Pradesh',\n value: 3,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Maharashtra',\n value: 4,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Manipur',\n value: 3,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Meghalaya',\n value: 3,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Mizoram',\n value: 2,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Nagaland',\n value: 2,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Odisha',\n value: 3,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Punjab',\n value: 3,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Rajasthan',\n value: 3,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Sikkim',\n value: 3,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Tamil Nadu',\n value: 4,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Telangana',\n value: 3,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Tripura',\n value: 2,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Uttar Pradesh',\n value: 4,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Uttarakhand',\n value: 3,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'West Bengal',\n value: 3,\n type: 'red',\n level: '#863a9f',\n },\n ],\n },\n {\n name: 'Islam',\n value: 13,\n type: 'blue',\n level: 'green',\n children: [\n {\n name: 'Bihar',\n value: 3,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Delhi',\n value: 2,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Jammu and Kashmir',\n value: 3,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Uttar Pradesh',\n value: 4,\n type: 'red',\n level: '#863a9f',\n },\n ],\n },\n // repeat for christianity\n {\n name: 'Christianity',\n value: 13,\n type: 'blue',\n level: 'green',\n children: [\n {\n name: 'Andhra Pradesh',\n value: 3,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Goa',\n value: 2,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Kerala',\n value: 3,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Meghalaya',\n value: 3,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Mizoram',\n value: 2,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Nagaland',\n value: 2,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Sikkim',\n value: 3,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Tamil Nadu',\n value: 4,\n type: 'red',\n level: '#863a9f',\n },\n {\n name: 'Telangana',\n value: 3,\n type: 'red',\n level: '#863a9f',\n },\n ],\n },\n ],\n};\n\n// Define width, height, and margin of the tree\nconst margin = {\n top: 20,\n right: 250,\n bottom: 200,\n left: 200,\n};\nconst width = 950 - 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 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', '.60em')\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// Define new links representing the number of followers in each state\n const followerLinks = g\n .selectAll('.follower-link')\n .data(nodes.descendants())\n .enter()\n .append('path')\n .attr('class', 'follower-link')\n .attr('d', (d) => {\n if (d.parent && d.data.followers) {\n return (\n 'M' +\n (d.y - 5) +\n ',' +\n d.x +\n 'L' +\n (d.parent.y - 10) +\n ',' +\n d.x\n );\n }\n })\n .style('stroke', 'orange') // Set the color of the follower links\n .style('stroke-width', 2); // Set the width of the follower links\n}\n","slug","practice","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","e57787efc2a64d129dd8c67e3f0bf244","startCommitId","edcc88531a584c658d6c3e4dced6f20e","forkedFrom","forkedFromVisibility",1712100919000,1712101035000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]