Pie Chart Visualization

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_106":-5,"_60":16,"_107":-5,"_108":109,"_110":111},"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":97,"_99":43,"_100":-7,"_67":101,"_69":101,"_102":-5,"_103":66,"_104":105},"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",3,"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/NagaBinduKondaveeti/f9c54817b2f64741b5bdc5f29a1f4c04","author","NagaBinduKondaveeti","id","3cf7cfb6a0d04b99939fa20f2282e828","title","DV TAK-9&10","ownerHandle","ownerDisplayName","nagabinduk2023@gmail.com","v3-user-nagabindukondaveeti","accountType","user","email","displayName","avatar","https://avatars.githubusercontent.com/u/157336080?v=4","oauthProvider","github","oauthId","157336080","isAdmin","stripeCustomerId","handle","handleNormalized","nagabindukondaveeti","lifecycleEmailsEnabled",true,"createdAt",1791491335841,"updatedAt","f9c54817b2f64741b5bdc5f29a1f4c04","files",{"_73":74,"_75":76,"_77":78},"96556376",{"_79":85,"_81":86},"8dbc301e",{"_79":83,"_81":84},"b809c858",{"_79":80,"_81":82},"name","styles.css","text","body {\n font-family: Arial, sans-serif;\n text-align: center;\n}\n\n#pie-chart-container {\n width: 600px;\n margin: 50px auto;\n}\n\n#pie-chart {\n width: 300px;\n height: 300px;\n display: inline-block;\n vertical-align: top;\n}\n\n#legend {\n display: inline-block;\n vertical-align: top;\n margin-left: 20px;\n text-align: left;\n}\n\n.legend-item {\n display: flex;\n align-items: center;\n margin-bottom: 5px;\n}\n\n.legend-item div {\n width: 15px;\n height: 15px;\n margin-right: 5px;\n border-radius: 50%;\n display: inline-block;\n}\n","index.html","\n\n \n \n \n Pie Chart Visualization\n \n \n \n \n

Pie Chart Visualization

\n\n \n \n\n","script.js","// Fetch data from CSV file\nd3.csv(\n 'https://raw.githubusercontent.com/NagaBinduKondaveeti/DV-TASK-8/main/data-1-2.csv',\n)\n .then((data) => {\n // Extracting genre and value from CSV data\n data.forEach((d) => {\n d.genre = d.genre;\n d.value = +d['below 5.0']; // Use the appropriate column name from the CSV data\n });\n\n // Dimensions and radius for the pie chart\n const width = 300;\n const height = 300;\n const radius = Math.min(width, height) / 2;\n\n // Color scale for pie segments\n const colorScale = d3.scaleOrdinal(d3.schemeCategory10);\n\n // Create SVG element for pie chart\n const svg = d3\n .select('#pie-chart')\n .append('svg')\n .attr('width', width)\n .attr('height', height)\n .append('g')\n .attr(\n 'transform',\n `translate(${width / 2},${height / 2})`,\n );\n\n // Generate pie chart layout\n const pie = d3.pie().value((d) => d.value);\n\n // Generate arc shapes based on data\n const arc = d3.arc().innerRadius(0).outerRadius(radius);\n\n // Draw arcs and segments\n const arcs = svg\n .selectAll('arc')\n .data(pie(data))\n .enter()\n .append('g')\n .attr('class', 'arc');\n\n arcs\n .append('path')\n .attr('d', arc)\n .attr('fill', (d, i) => colorScale(i))\n .attr('stroke', 'white')\n .attr('stroke-width', 2);\n\n // Create legend\n const legend = d3.select('#legend');\n\n const legendItems = legend\n .selectAll('.legend-item')\n .data(data)\n .enter()\n .append('div')\n .attr('class', 'legend-item');\n\n legendItems\n .append('div')\n .style('background-color', (d, i) => colorScale(i));\n\n legendItems.append('span').text((d) => d.genre);\n })\n .catch((error) =>\n console.log('Error loading data:', error),\n );\n","slug","TAK-9&10","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","8aa30ef5a4de4360b20386e99aeab1c5","startCommitId","forkedFrom","forkedFromVisibility",1713749332000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]