Rice Production Bar Chart

[{"_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/AbdullahMohd2001/d1ec6bb6d8464f73ba1efb5a9db07af3","author","AbdullahMohd2001","id","86a75dc8bdbe4965ba353a79d4bd44c8","title","Hello VizHub","ownerHandle","curran","ownerDisplayName","Curran Kelleher","v3-user-abdullahmohd2001","accountType","user","email","masters200128@gmail.com","displayName","avatar","https://avatars.githubusercontent.com/u/147872876?v=4","oauthProvider","github","oauthId","147872876","isAdmin","stripeCustomerId","handle","handleNormalized","abdullahmohd2001","lifecycleEmailsEnabled",true,"createdAt",1791491388117,"updatedAt","d1ec6bb6d8464f73ba1efb5a9db07af3","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","#chart {\n width: 600px;\n height: 500px;\n margin: 20px auto;\n border: none;\n}\n\n.checkbox {\n cursor: pointer;\n margin-bottom: 5px;\n}\n.tooltip {\n position: absolute;\n background-color: #f9f9f9;\n border: 1px solid #aaa;\n padding: 5px;\n border-radius: 2px;\n pointer-events: none;\n}\n","index.html","\n\n \n \n \n Rice Production Bar Chart\n \n \n \n \n

\n \n \n\n","index.js","d3.csv(\n 'https://gist.githubusercontent.com/AbdullahMohd2001/03d3887a4bdc669c50b8971125f13a90/raw/0adcbcd0588d8e30f505dce4eae2d985d69f7a38/Crop.csv',\n).then(function (data) {\n // Convert production values to numbers\n data.forEach(function (d) {\n d.WHEAT_PRODUCTION = +d['WHEAT PRODUCTION (1000 tons)'];\n });\n\n // Define the dimensions of the chart\n const margin = {\n top: 100,\n right: 30,\n bottom: 50,\n left: 120,\n };\n const width = 850 - margin.left - margin.right; // Increased width\n const height = 600 - margin.top - margin.bottom; // Increased height\n\n // Append SVG element to the chart div\n const svg = d3\n .select('#chart')\n .append('svg')\n .attr('width', width + margin.left + margin.right)\n .attr('height', height + margin.top + margin.bottom)\n .append('g')\n .attr(\n 'transform',\n `translate(${width / 2},${height / 2})`, // Center the pie chart\n );\n\n // Function to calculate total wheat production\n function calculateTotalWheatProduction(data) {\n return d3.sum(data, (d) => d.N);\n }\n\n function updateChart(filteredData) {\n // Remove existing pie chart\n svg.selectAll('*').remove();\n\n // Transform data to sum wheat production for each state\n const stateData = d3.rollup(\n filteredData,\n (v) => d3.sum(v, (d) => d.N),\n (d) => d['State Name'],\n );\n\n // Define pie layout\n const pie = d3.pie().value((d) => d[1]);\n\n // Define arc generator\n const arc = d3\n .arc()\n .innerRadius(0)\n .outerRadius(Math.min(width, height) / 2 - 50);\n\n // Define color scale\n const colorScale = d3.scaleOrdinal(d3.schemeCategory10);\n\n // Generate pie slices\n const arcs = pie(Array.from(stateData.entries()));\n\n // Append pie slices\n svg\n .selectAll('path')\n .data(arcs)\n .enter()\n .append('path')\n .attr('d', arc)\n .attr('fill', (d) => colorScale(d.data[0]))\n .on('mouseover', function (event, d) {\n // Highlight the hovered slice\n d3.select(this).attr('fill', 'black');\n // Show tooltip on mouseover\n tooltip.style('opacity', 100);\n tooltip\n .html(\n `${d.data[0]}
${d.data[1].toFixed(2)} (in 1000 tons)`,\n )\n .style('left', event.pageX + 'px')\n .style('top', event.pageY - 28 + 'px');\n })\n .on('mouseout', function (event, d) {\n // Restore the original color of the slice\n d3.select(this).attr('fill', colorScale(d.data[0]));\n // Hide tooltip on mouseout\n tooltip.style('opacity', 0);\n });\n\n // Add title\n svg\n .append('text')\n .attr('x', 0)\n .attr('y', height / 2 - margin.top / 2 - 375)\n .attr('text-anchor', 'middle')\n .style('font-size', '20px')\n .text(\n 'Wheat Production by States in India from 1966 to 2017',\n );\n\n // Add legend\n const legend = svg\n .selectAll('.legend')\n .data(arcs)\n .enter()\n .append('g')\n .attr('class', 'legend')\n .attr(\n 'transform',\n (d, i) =>\n `translate(-${width / 2},${i * 20 - height / 2 + 50})`, // Move legend to the top\n );\n\n legend\n .append('rect')\n .attr('x', width - 20)\n .attr('width', 18)\n .attr('height', 18)\n .attr('fill', (d) => colorScale(d.data[0]));\n\n legend\n .append('text')\n .attr('x', width - 24)\n .attr('y', 9)\n .attr('dy', '.35em')\n .style('text-anchor', 'end')\n .text((d) => d.data[0]);\n\n // Define tooltip\n const tooltip = d3\n .select('body')\n .append('div')\n .attr('class', 'tooltip')\n .style('opacity', 0);\n }\n\n // Add checkboxes\n const checkboxes = d3\n .select('#checkboxes')\n .selectAll('.checkbox')\n .data(Array.from(new Set(data.map((d) => d.Year))))\n .enter()\n .append('label')\n .attr('class', 'checkbox')\n .text((d) => d + ' ')\n .append('input')\n .attr('type', 'checkbox')\n .attr('value', (d) => d) // Add value attribute to checkbox\n .on('change', function () {\n const selectedYears = d3\n .selectAll('input[type=\"checkbox\"]:checked')\n .nodes()\n .map((checkbox) => checkbox.value);\n\n let filteredData = data;\n if (selectedYears.length > 0) {\n filteredData = data.filter((d) =>\n selectedYears.includes(d.Year),\n );\n const totalProduction =\n calculateTotalWheatProduction(filteredData);\n console.log(\n 'Total Wheat Production for selected years:',\n totalProduction,\n );\n } else {\n const totalProduction =\n calculateTotalWheatProduction(data);\n console.log(\n 'Total Wheat Production for all years:',\n totalProduction,\n );\n }\n\n updateChart(filteredData); // Update the chart with filtered data\n });\n\n // Initialize the chart\n updateChart(data);\n});\n","slug","Task-9_Question-1","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","6513d421bf084fa0954945fb0116c4fa","startCommitId","2ac98796d1f04ea180a83cc4de2ac9d5","forkedFrom","forkedFromVisibility",1713811057000,1714096367000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]