Pie Chart Visualization

[{"_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",0,"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/assets/unfurl.webp","sourceType","v3","originalUrl","https://vizhub.com/NagaBinduKondaveeti/bfd769f9e34248c4ac28f44456a277a5","author","NagaBinduKondaveeti","id","e0d9f259d98a466786c86729766f3ecf","title","Analyzing crash data by operator","ownerHandle","Rishithagovini","ownerDisplayName","rishithagovini99@gmail.com","v3-user-nagabindukondaveeti","accountType","user","email","nagabinduk2023@gmail.com","displayName","avatar","https://avatars.githubusercontent.com/u/157336080?v=4","oauthProvider","github","oauthId","157336080","isAdmin","stripeCustomerId","handle","handleNormalized","nagabindukondaveeti","lifecycleEmailsEnabled",true,"createdAt",1791491335841,"updatedAt","bfd769f9e34248c4ac28f44456a277a5","files",{"_75":76,"_77":78,"_79":80},"270fdb6c",{"_81":87,"_83":88},"8dbc301e",{"_81":85,"_83":86},"b809c858",{"_81":82,"_83":84},"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","index.js","// Fetch data from CSV file\nd3.csv(\n 'https://raw.githubusercontent.com/Bhavani3336/Bhavani/main/iris.csv',\n)\n .then((data) => {\n // Extracting species and value from CSV data\n const speciesData = data.map((d) => ({\n species: d.species,\n value: +d.sepal_length, // Change this based on the column you want to use\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(speciesData))\n .enter()\n .append('g')\n .attr('class', 'arc');\n\n arcs\n .append('path')\n .attr('d', arc)\n .attr('fill', (d) => colorScale(d.data.species))\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(speciesData)\n .enter()\n .append('div')\n .attr('class', 'legend-item');\n\n legendItems\n .append('div')\n .style('background-color', (d) =>\n colorScale(d.species),\n );\n\n legendItems.append('span').text((d) => d.species);\n })\n .catch((error) =>\n console.log('Error loading data:', error),\n );\n","slug","Tk-9","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","481ddf22dfb940d1aed9cb2f9ff722da","startCommitId","0224f272954a42d6a9c44a125fc1cdbe","forkedFrom","forkedFromVisibility",1713731500000,1713731877000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]