Pie Chart with Legend

[{"_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",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/SAITEJA-07/f1ad3443fa874f12be1c5e5431eaaf45","author","SAITEJA-07","id","5974634ca68c4900928c6c8d420f5438","title","PROJECT","ownerHandle","ownerDisplayName","tallurisaiteja96@gmail.com","v3-user-saiteja-07","accountType","user","email","displayName","avatar","https://avatars.githubusercontent.com/u/86945718?v=4","oauthProvider","github","oauthId","86945718","isAdmin","stripeCustomerId","handle","handleNormalized","saiteja-07","lifecycleEmailsEnabled",true,"createdAt",1791491325820,"updatedAt","f1ad3443fa874f12be1c5e5431eaaf45","files",{"_73":74,"_75":76,"_77":78},"18507392",{"_79":85,"_81":86},"22001880",{"_79":83,"_81":84},"43915685",{"_79":80,"_81":82},"name","script.js","text","// Fetch data from CSV file\nd3.csv(\n 'https://raw.githubusercontent.com/SAITEJA-07/Task-8/main/bubblechart.csv',\n)\n .then((data) => {\n // Extract labels and values from the dataset\n const labels = data.map((d) => d.make);\n const values = data.map((d) =>\n parseFloat(d.horsepower),\n );\n\n // Dimensions for the pie chart\n const width = 400;\n const height = 400;\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);\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(values))\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(labels)\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);\n\n // Add labels to the pie chart\n svg\n .append('text')\n .attr('text-anchor', 'middle')\n .attr('font-size', '16px')\n .text('Pie Chart');\n\n // Add X-axis label\n svg\n .append('text')\n .attr('text-anchor', 'middle')\n .attr('font-size', '14px')\n .attr('y', height / 2 + 20)\n .text('Make');\n })\n .catch((error) =>\n console.log('Error loading data:', error),\n );\n","style.css","body {\n font-family: Arial, sans-serif;\n}\n\n#chart-container {\n width: 800px;\n margin: 50px auto;\n text-align: center;\n}\n\ncircle {\n transition: transform 0.2s;\n}\n\ncircle:hover {\n transform: scale(1.1);\n}\n","index.html","\n\n \n \n \n Pie Chart with Legend\n \n \n \n \n

Pie Chart with Legend

\n\n \n \n\n","slug","Task-9/10 Q1","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","88ca29c200834e0aa02351bf0b280765","startCommitId","forkedFrom","forkedFromVisibility",1713403813000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]