Pie chart - d3.js

\n \n

\n Land Area Percentage of Continents\n

\n Asia\n

\n North America\n

\n South America\n

\n Africa\n

\n Europe\n

\n Australia\n

\n Anatartica\n

\n \n

\n \n \n \n\n","index.js","var customData = [\n { name: 'Asia', value: '30' },\n { name: 'North America', value: '16.3' },\n { name: 'South America', value: '12' },\n { name: 'Africa', value: '20.3' },\n { name: 'Europe', value: '6.7' },\n { name: 'Australia', value: '5.2' },\n { name: 'Antartica', value: '8.9' },\n];\n\nvar colors = [\n '#87c2ea',\n '#fe809c',\n '#b4dca2',\n '#9393c7',\n '#57bc9e',\n '#e4e894',\n '#e7e9ed',\n];\n\nfunction plot() {\n var parElemWidth =\n document.querySelector('#chart').parentElement\n .offsetWidth;\n\n parElemWidth = parElemWidth > 350 ? 350 : parElemWidth;\n\n var width = parElemWidth;\n\n var height = width;\n\n var radius = width / 2;\n\n var colorScale = d3.scaleOrdinal().range(colors);\n\n var tooltip = d3.select('.myTooltip');\n\n var arc = d3\n .arc()\n .innerRadius(0)\n .outerRadius(radius - 10);\n\n var pie = d3\n .pie()\n .sort(null)\n .value(function (d) {\n return d.value;\n });\n var svg = d3\n .select('#chart')\n .append('svg')\n .attr('width', width)\n .attr('height', height)\n .style('filter', \"url('#filter')\")\n .append('g')\n .attr('class', 'group')\n // moving each g to center\n .attr(\n 'transform',\n 'translate(' + width / 2 + ',' + height / 2 + ')',\n );\n\n var g = svg\n .selectAll('.arc')\n // pie(customData) will Return some additional data (path data) with\n // original data\n .data(pie(customData))\n .enter()\n .append('g')\n .attr('class', 'arc');\n\n g.append('path')\n // D3 implicitly uses the Data bound to the SVG Group elements as\n // an input to the D3 Arc Generation function we named arc earlier.\n // The result of this function is then set as the d attribute for\n // the path.\n .attr('d', arc)\n .style('fill', function (d) {\n return colorScale(d.data.value);\n })\n .on('mouseover', function (d) {\n tooltip.html(\n \"\" +\n d.data.value +\n '%',\n );\n return tooltip\n .style('visibility', 'visible')\n .style('opacity', '1');\n })\n .on('mousemove', function () {\n return tooltip\n .style('top', d3.event.pageY - 35 + 'px')\n .style('left', d3.event.pageX - 60 + 'px');\n })\n .on('mouseout', function () {\n return tooltip\n .style('visibility', 'hidden')\n .style('opacity', '0');\n });\n}\n\ndocument.addEventListener(\n 'DOMContentLoaded',\n function (event) {\n plot();\n // for ie 9\n if (window.attachEvent) {\n window.attachEvent('onresize', function () {\n alert('attachEvent - resize');\n });\n } else if (window.addEventListener) {\n window.addEventListener(\n 'resize',\n function () {\n document.querySelector('#chart').innerHTML = '';\n plot();\n },\n true,\n );\n }\n },\n);\n","data.csv","Favourite_fruit, count_present, Colour, Name\nApple, 20, Red, Anisha\nOrange, 55, Orange, Marine\nStrawberry, 67, Red, Han\nApple, 32, Red, Kolh\nOrange, 11, orange, Jha\nBanana, 8, Yellow, Keerthi\nPapaya, 40, Orange, Tran\nWatermelon, 4, Green, Suzie\nMango, 37, Yellow, Elle\nAvocado, 91, Green, Rohan\nKiwi, 56, Green, Jack\nStar fruit, 72, Green, Olly\nGrapes, 50, Violet, Neil\nMango, 9, Yellow, Robert\n","slug","q1 task9","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","574dc07172654c74b8337dba87627b26","startCommitId","916b7b9d1e5e43b6abf4dce8846a7dba","forkedFrom","forkedFromVisibility",1713743078000,1713743212000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]