Interactive Bar Chart Builder

{"name":"Car Emissions Graph","description":"Create a fun project using emojis as sprites and p5.js. Move them around, let them interact, and see what kind of emoji chaos you can create!","photo":"https://jippity.s3.amazonaws.com/Screenshot 2024-06-04 at 11.00.08 AM.png","view_count":1,"fork_count":0,"expires_at":null,"created_at":"2024-06-13T14:55:01.604770Z","updated_at":"2024-06-13T14:55:01.604772Z","user_id":5,"status":"PUBLIC","parent_id":1726,"id":1864,"user":{"photo":null,"email":null,"recess_id":"b5574579-4904-b775-ad8e-eff5c085f819","created_at":"2023-12-12T12:00:51.087995Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"theop","id":5,"password_hash":null,"updated_at":"2023-12-12T12:00:51.087997Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"\n// Ensure the processData function is called when the page loads\ndocument.addEventListener('DOMContentLoaded', processData);\n\nfunction processData() {\n // Sample data with multiple values for each dataset\n const data = [\n { name: 'finished', values: [{ value: 1, label: 'Born' }, { value: Math.round(((1))), label: 'Driving' }, { value: Math.round(120000 / (39.6)), label: 'Refilling' }], color: 'red' },\n { name: 'unfinished', values: [{ value: 374673265876348, label: 'Born' }, { value: Math.round(((0 + 0 + 0) * 120000) / 907185), label: 'Driving' }, { value: Math.round(120000 / (131)), label: 'Refilling' }], color: 'black' },\n \n ];\n\n // Calculate the average value for each dataset\n const averageData = data.map(d => ({\n name: d.name,\n value: Math.round(calculateAverage(d.values.map(v => v.value))), // Round the average value\n color: d.color\n }));\n\n // Set SVG dimensions and padding\n const svgWidth = 600;\n const svgHeight = 300;\n const padding = 40;\n\n // Create scales for the x and y axes\n const xScale = d3.scaleBand()\n .domain(averageData.map(d => d.name))\n .range([padding, svgWidth - padding])\n .padding(0.1);\n\n const yScale = d3.scaleLinear()\n .domain([0, d3.max(averageData, d => d.value)])\n .nice()\n .range([svgHeight - padding, padding]);\n\n // Create an SVG container\n const svg = d3.select('#chart')\n .append('svg')\n .attr('width', svgWidth)\n .attr('height', svgHeight);\n\n // Add a title to the SVG container\n svg.append('text')\n .attr('x', svgWidth / 2) // Center the title horizontally\n .attr('y', padding / 1.5) // Position the title near the top\n .attr('text-anchor', 'middle') // Center the text\n .attr('font-size', '30px') // Set the font size\n .attr('fill', 'black') // Set the text color\n .text('Car emisions over 10 years (in metric tons)'); // Set the title text\n\n // Append bars to the SVG container\n svg.selectAll('rect')\n .data(averageData)\n .enter()\n .append('rect')\n .attr('x', d => xScale(d.name))\n .attr('y', svgHeight - padding) // Start from the bottom of the SVG\n .attr('width', xScale.bandwidth())\n .attr('height', 0) // Start with height of 0\n .attr('fill', d => d.color) // Set the bar color based on the data\n .on('click', function (event, d) { // Add click event listener\n displayDetailedGraph(d.name, data); // Call the function to display the detailed graph\n })\n .transition() // Start a transition\n .duration(1000) // Duration of the animation (1 second)\n .attr('y', d => yScale(d.value)) // Animate to the correct y position\n .attr('height', d => svgHeight - padding - yScale(d.value)); // Animate to the correct height\n\n // Append text labels for each bar\n svg.selectAll('text.bar-label')\n .data(averageData)\n .enter()\n .append('text')\n .attr('class', 'bar-label')\n .attr('x', d => xScale(d.name) + xScale.bandwidth() / 2) // Center text in the bar\n .attr('y', svgHeight - padding) // Start text at the bottom of the SVG\n .attr('text-anchor', 'middle') // Center text horizontally\n .attr('fill', 'black') // Set text color to match the bar color\n .text(d => d.name) // Set text content\n .transition() // Start a transition\n .duration(1000) // Duration of the animation (1 second)\n .attr('y', d => yScale(d.value) - 5); // Animate to the correct y position\n\n // Append value labels for each bar\n svg.selectAll('text.value-label')\n .data(averageData)\n .enter()\n .append('text')\n .attr('class', 'value-label')\n .attr('x', d => xScale(d.name) + xScale.bandwidth() / 2) // Center text in the bar\n .attr('y', svgHeight - padding + 15) // Start text inside the bar\n .attr('text-anchor', 'middle') // Center text horizontally\n .attr('fill', 'orange') // Set text color\n .attr('font-size', '17px') // Set font size\n .text(d => d.value) // Set text content to the rounded value\n .transition() // Start a transition\n .duration(1000) // Duration of the animation (1 second)\n .attr('y', d => yScale(d.value) + 15); // Animate to the correct y position\n\n}\n// Function to display a detailed graph with the unaveraged values\nfunction displayDetailedGraph(name, data) {\n // Remove any existing detailed graph\n d3.select('#detailed-chart').remove();\n\n // Get the data for the selected name\n const selectedData = data.find(d => d.name === name);\n\n // Set SVG dimensions and padding for the detailed graph\n const svgWidth = 480;\n const svgHeight = 300;\n const padding = 40;\n\n // Create scales for the x and y axes\n const xScale = d3.scaleBand()\n .domain(selectedData.values.map(v => v.label)) // Use names from the data\n .range([padding, svgWidth - padding])\n .padding(0.1);\n\n const yScale = d3.scaleLinear()\n .domain([0, d3.max(selectedData.values, d => d.value)])\n .nice()\n .range([svgHeight - padding, padding]);\n\n // Create an SVG container for the detailed graph within the detailed chart container\n const svg = d3.select('#detailed-chart-container')\n .append('svg')\n .attr('id', 'detailed-chart') // Add an ID for easy removal later\n .attr('width', svgWidth)\n .attr('height', svgHeight);\n\n // Add a title to the detailed graph\n svg.append('text')\n .attr('x', svgWidth / 2) // Center the title horizontally\n .attr('y', padding / 1.5) // Position the title near the top\n .attr('text-anchor', 'middle') // Center the text\n .attr('font-size', '20px') // Set the font size\n .attr('fill', 'black') // Set the text color\n .text(`Emissions for: ${name}`); // Set the title text\n\n // Append bars to the detailed graph\n svg.selectAll('rect')\n .data(selectedData.values)\n .enter()\n .append('rect')\n .attr('x', d => xScale(d.label))\n .attr('y', d => yScale(d.value))\n .attr('width', xScale.bandwidth())\n .attr('height', d => svgHeight - padding - yScale(d.value))\n .attr('fill', selectedData.color); // Set the bar color based on the data\n\n\n // Append value labels for each bar in the detailed graph\n svg.selectAll('text.value-label')\n .data(selectedData.values)\n .enter()\n .append('text')\n .attr('class', 'value-label')\n .attr('x', d => xScale(d.label) + xScale.bandwidth() / 2) // Center text in the bar\n .attr('y', d => yScale(d.value) - 10) // Position text inside the bar\n .attr('text-anchor', 'middle') // Center text horizontally\n .attr('fill', 'orange') // Set text color\n .attr('font-size', '17px') // Set font size\n .text(d => d.value); // Set text content to the value\n\n // Append descriptive labels for each bar in the detailed graph\n svg.selectAll('text.bar-label')\n .data(selectedData.values)\n .enter()\n .append('text')\n .attr('class', 'bar-label')\n .attr('x', d => xScale(d.label) + xScale.bandwidth() / 2) // Center text in the bar\n .attr('y', svgHeight - padding + 15) // Position text below the bar\n .attr('text-anchor', 'middle') // Center text horizontally\n .attr('fill', 'black') // Set text color\n .attr('font-size', '17px') // Set font size\n .text(d => d.label); // Set text content to descriptive names\n\n}\n\n// Helper function to calculate average\nfunction calculateAverage(values) {\n const total = values.reduce((sum, value) => sum + value, 0);\n return total;\n}","style.css":"body {\n font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif, Helvetica, sans-serif, Haettenschweiler, 'Arial Narrow Bold', sans-serif, sans-serif;\n}\n\n#chart {\n margin: 10px auto;\n width: 800px;\n /* Adjust width to match SVG width (480) plus padding (40) */\n height: 500px;\n /* Increase the height to extend the background */\n text-align: center;\n background-color: rgba(36, 97, 0, 0.459);\n /* Set background color */\n}\n\n#detailed-chart-container {\n margin: 10px auto;\n width: 800px;\n /* Adjust width to match SVG width (480) plus padding (40) */\n height: 350px;\n /* Set the height for the detailed chart container */\n text-align: center;\n background-color: rgba(24, 102, 0, 0.651);\n /* Set background color and transparency */\n padding: 20px;\n /* Add padding */\n border-radius: 10px;\n /* Make the corners rounded */\n}","index.html":"\n\n\n\n \n \n Interactive Bar Chart Builder\n \n\n\n\n

\n \n \n\n\n"},"chat_history":[],"assets":[],"messages_sent":0,"comments":[],"steps":[{"instruction":"Add emojis as visual game elements on the canvas","title":"Display emoji sprites on canvas","created_at":"2024-05-30T19:06:35.306544","project_id":1864,"complete":false,"step_number":0,"updated_at":"2024-06-13T14:55:01.608715","id":9768},{"instruction":"Allow users to control the movement of emojis using keyboard or mouse input","title":"Implement user input for emoji movement","created_at":"2024-05-30T19:06:35.306692","project_id":1864,"complete":false,"step_number":1,"updated_at":"2024-06-13T14:55:01.608809","id":9769},{"instruction":"Create logic for emojis to interact with each other and detect collisions","title":"Emoji interaction and collision detection","created_at":"2024-05-30T19:06:35.307311","project_id":1864,"complete":false,"step_number":2,"updated_at":"2024-06-13T14:55:01.608865","id":9770},{"instruction":"Implement a scoring mechanism to track emoji interactions and display scores","title":"Scoring system for emoji interactions","created_at":"2024-05-30T19:06:35.307412","project_id":1864,"complete":false,"step_number":3,"updated_at":"2024-06-13T14:55:01.608914","id":9771},{"instruction":"Add animations and visual effects to emojis to enhance the visual experience","title":"Emoji animations and visual effects","created_at":"2024-05-30T19:06:35.307579","project_id":1864,"complete":false,"step_number":4,"updated_at":"2024-06-13T14:55:01.608962","id":9772}]}