piecharts = { const Plotly = await require("https://cdn.plot.ly/plotly-latest.min.js"); // Create dropdown function with label const createDropdown = (labelText, name, options) => { const container = document.createElement("span"); // Create label const label = document.createElement("label"); label.innerText = `${labelText}: `; label.style.fontWeight = "bold"; label.style.marginRight = "5px"; // Create dropdown const select = document.createElement("select"); select.name = name; options.forEach(option => { const optionElement = document.createElement("option"); optionElement.value = option; optionElement.text = option; select.appendChild(optionElement); }); select.onchange = updateChart; select.style.marginRight = "10px"; // Add space between dropdowns container.appendChild(label); container.appendChild(select); return container; }; // Data and options const data = transformedDataset; const indianaCounties = [ 'Adams', 'Allen', 'Bartholomew', 'Benton', 'Blackford', 'Boone', 'Brown', 'Carroll', 'Cass', 'Clark', 'Clay', 'Clinton', 'Crawford', 'Daviess', 'Dearborn', 'Delaware', 'Dubois', 'Elkhart', 'Fayette', 'Floyd', 'Fountain', 'Franklin', 'Garrett', 'Gibson', 'Grant', 'Greene', 'Hamilton', 'Hancock', 'Harrison', 'Hendricks', 'Henry', 'Howard', 'Huntington', 'Jackson', 'Jasper', 'Jay', 'Jefferson', 'Jennings', 'Johnson', 'Knox', 'Kosciusko', 'LaGrange', 'Lake', 'LaPorte', 'Lawrence', 'Madison', 'Marion', 'Marshall', 'Martin', 'Miami', 'Monroe', 'Montgomery', 'Morgan', 'Newton', 'Noble', 'Ohio', 'Orange', 'Owen', 'Parke', 'Perry', 'Pike', 'Porter', 'Posey', 'Pulaski', 'Putnam', 'Randolph', 'Ripley', 'Rush', 'St. Joseph', 'Scott', 'Shelby', 'Spencer', 'Starke', 'Steuben', 'Sullivan', 'Switzerland', 'Tippecanoe', 'Tipton', 'Union', 'Vanderburgh', 'Vermillion', 'Vigo', 'Wabash', 'Warren', 'Warrick', 'Washington', 'Wayne', 'White', 'Whitley' ]; const countyOptions = [...indianaCounties]; const adults18_64Options = [0, 1, 2, 3, 4, 5, 6]; const adults65PlusOptions = [0, 1, 2, 3, 4, 5, 6]; const infants0_2Options = [0, 1, 2, 3, 4, 5, 6]; const preschoolers3_4Options = [0, 1, 2, 3, 4, 5, 6]; const schoolAgeChildren5_17Options = [0, 1, 2, 3, 4, 5, 6]; // Create dropdown elements with labels const countyDropdown = createDropdown("County", "County", countyOptions); const adults18_64Dropdown = createDropdown("Adults 18-64", "Adults 18-64", adults18_64Options); const adults65PlusDropdown = createDropdown("Adults 65+", "Adults 65+", adults65PlusOptions); const infants0_2Dropdown = createDropdown("Infants 0-2", "Infants 0-2", infants0_2Options); const preschoolers3_4Dropdown = createDropdown("Preschoolers 3-4", "Preschoolers 3-4", preschoolers3_4Options); const schoolAgeChildren5_17Dropdown = createDropdown("School Age Children 5-17", "School Age Children 5-17", schoolAgeChildren5_17Options); // Create chart containers const chartContainerExpenses = document.createElement("div"); const chartContainerHousing = document.createElement("div"); const chartContainerTaxes = document.createElement("div"); const chartContainerTotalCosts = document.createElement("div"); [chartContainerExpenses, chartContainerHousing, chartContainerTaxes].forEach(container => { container.style.width = "33%"; container.style.height = "400px"; container.style.display = "inline-block"; container.style.verticalAlign = "top"; }); chartContainerTotalCosts.style.width = "100%"; chartContainerTotalCosts.style.height = "600px"; // Function to validate selection and display a message if limits are exceeded function validateSelection() { const adultsSelected = parseInt(adults18_64Dropdown.querySelector("select").value) + parseInt(adults65PlusDropdown.querySelector("select").value); const childrenSelected = parseInt(infants0_2Dropdown.querySelector("select").value) + parseInt(preschoolers3_4Dropdown.querySelector("select").value) + parseInt(schoolAgeChildren5_17Dropdown.querySelector("select").value); // Validation message container let validationMessageContainer = document.getElementById("validationMessage"); if (!validationMessageContainer) { validationMessageContainer = document.createElement("div"); validationMessageContainer.id = "validationMessage"; validationMessageContainer.style.color = "red"; validationMessageContainer.style.fontWeight = "bold"; validationMessageContainer.style.marginTop = "10px"; dropdownContainer.appendChild(validationMessageContainer); // Append it to the dropdown container } // Display a message if limits are exceeded if (adultsSelected > 6 || childrenSelected > 6) { validationMessageContainer.innerText = "Please select no more than 6 adults (including those under and over 65 years of age) and no more than 6 children (under 18 years of age)."; return false; } else { validationMessageContainer.innerText = ""; // Clear the message return true; } } // Modify the updateChart function to include validation function updateChart() { [chartContainerExpenses, chartContainerHousing, chartContainerTaxes, chartContainerTotalCosts].forEach(container => { container.style.display = "inline-block"; }); if (!validateSelection()) { // Destroy existing Plotly charts Plotly.purge(chartContainerExpenses); Plotly.purge(chartContainerHousing); Plotly.purge(chartContainerTaxes); Plotly.purge(chartContainerTotalCosts); // Hide the chart containers [chartContainerExpenses, chartContainerHousing, chartContainerTaxes, chartContainerTotalCosts].forEach(container => { container.innerHTML = ''; // Clear any existing content container.style.display = "none"; }); // Show the validation message centered let validationMessageContainer = document.getElementById("validationMessage"); if (!validationMessageContainer) { validationMessageContainer = document.createElement("div"); validationMessageContainer.id = "validationMessage"; validationMessageContainer.style.color = "red"; validationMessageContainer.style.fontWeight = "bold"; validationMessageContainer.style.fontSize = "20px"; validationMessageContainer.style.position = "absolute"; validationMessageContainer.style.top = "50%"; validationMessageContainer.style.left = "50%"; validationMessageContainer.style.transform = "translate(-50%, -50%)"; validationMessageContainer.style.textAlign = "center"; validationMessageContainer.style.zIndex = "9999"; document.body.appendChild(validationMessageContainer); } validationMessageContainer.innerText = "Please select no more than 6 adults (including those under and over 65 years of age) and no more than 6 children (under 18 years of age)."; return; // Exit without updating the charts } // Show the charts if validation is successful const chartContainers = document.querySelectorAll('[id^="chartContainer"]'); chartContainers.forEach(container => { container.style.display = "inline-block"; // Show all chart containers }); // Clear the validation message if validation passes const validationMessageContainer = document.getElementById("validationMessage"); if (validationMessageContainer) { validationMessageContainer.innerText = ""; // Clear the validation message } const selectedCounty = countyDropdown.querySelector("select").value; const selectedAdults18_64 = adults18_64Dropdown.querySelector("select").value; const selectedAdults65Plus = adults65PlusDropdown.querySelector("select").value; const selectedInfants0_2 = infants0_2Dropdown.querySelector("select").value; const selectedPreschoolers3_4 = preschoolers3_4Dropdown.querySelector("select").value; const selectedSchoolAgeChildren5_17 = schoolAgeChildren5_17Dropdown.querySelector("select").value; // Filter and aggregate data as before... // Filter data based on selected values const filteredData = data.filter(entry => { if (selectedCounty !== "All" && entry.county !== selectedCounty) return false; if (selectedAdults18_64 !== "All" && entry.demographics.adults_18_64 !== parseInt(selectedAdults18_64)) return false; if (selectedAdults65Plus !== "All" && entry.demographics.adults_65_plus !== parseInt(selectedAdults65Plus)) return false; if (selectedInfants0_2 !== "All" && entry.demographics.infants_0_2 !== parseInt(selectedInfants0_2)) return false; if (selectedPreschoolers3_4 !== "All" && entry.demographics.preschoolers_3_4 !== parseInt(selectedPreschoolers3_4)) return false; if (selectedSchoolAgeChildren5_17 !== "All" && entry.demographics.school_age_children_5_17 !== parseInt(selectedSchoolAgeChildren5_17)) return false; return true; }); // Filter and aggregate data as before... // Summarize data for each chart if filtered data is available let expenses = { food: 0, transportation: 0, healthCare: 0, technology: 0, miscellaneous: 0, childCare: 0 }; let housing = { rent: 0, utilities: 0 }; let taxes = { payments: 0, credits: 0 }; let totalCosts = { expenses: 0, housing: 0, taxes: 0 }; if (filteredData.length === 0) { // Destroy existing Plotly charts Plotly.purge(chartContainerExpenses); Plotly.purge(chartContainerHousing); Plotly.purge(chartContainerTaxes); Plotly.purge(chartContainerTotalCosts); // Clear chart containers and display "No data" message [chartContainerExpenses, chartContainerHousing, chartContainerTaxes, chartContainerTotalCosts].forEach(container => { container.innerHTML = '

No data available for the selected combination

'; }); return; }else { // Clear any previous "No data" message if valid data is available [chartContainerExpenses, chartContainerHousing, chartContainerTaxes, chartContainerTotalCosts].forEach(container => { container.innerHTML = ''; // Clear the "No data" message }); } if (filteredData.length > 0) { expenses = filteredData.reduce((acc, entry) => ({ food: acc.food + entry.expenses.food, transportation: acc.transportation + entry.expenses.transportation, healthCare: acc.healthCare + entry.expenses.health_care, technology: acc.technology + entry.expenses.technology, miscellaneous: acc.miscellaneous + entry.expenses.miscellaneous, childCare: acc.childCare + entry.expenses.child_care }), expenses); housing = filteredData.reduce((acc, entry) => ({ rent: acc.rent + entry.expenses.housing.rent, utilities: acc.utilities + entry.expenses.housing.utilities }), housing); taxes = filteredData.reduce((acc, entry) => ({ payments: acc.payments + entry.taxes.payments, credits: acc.credits + entry.taxes.credits }), taxes); // Calculate total expenses, total housing, and net total taxes totalCosts.expenses = Object.values(expenses).reduce((sum, val) => sum + val, 0); totalCosts.housing = Object.values(housing).reduce((sum, val) => sum + val, 0); totalCosts.taxes = taxes.payments - taxes.credits; } // Plot each chart Plotly.newPlot(chartContainerExpenses, [{ labels: ["Food", "Transportation", "Health Care", "Technology", "Miscellaneous", "Child Care"], values: Object.values(expenses), type: "pie", hovertemplate: "$%{value:.2f}" }], { title: { text: "Expense Distribution", font: { size: 16 } } }); Plotly.newPlot(chartContainerHousing, [{ labels: ["Rent", "Utilities"], values: Object.values(housing), type: "pie", hovertemplate: "$%{value:.2f}" }], { title: { text: "Housing Distribution", font: { size: 16 } } }); Plotly.newPlot(chartContainerTaxes, [{ labels: ["Payments", "Credits"], values: Object.values(taxes), type: "pie", hovertemplate: "$%{value:.2f}" }], { title: { text: "Tax Distribution", font: { size: 16 } } }); Plotly.newPlot(chartContainerTotalCosts, [{ labels: ["Total Expenses", "Total Housing", "Net Taxes"], values: Object.values(totalCosts), type: "pie", hovertemplate: "$%{value:.2f}" }], { title: { text: "Total Costs Distribution", font: { size: 20 } } }); } // Container for dropdowns // Container for dropdowns const dropdownContainer = document.createElement("div"); dropdownContainer.classList.add("dropdown-container"); dropdownContainer.appendChild(document.createTextNode("Select Filters: ")); dropdownContainer.style.fontWeight = "bold"; dropdownContainer.style.marginBottom = "15px"; // County dropdown on a separate line const countyLine = document.createElement("div"); countyLine.appendChild(countyDropdown); dropdownContainer.appendChild(countyLine); // Other dropdowns on another line const otherDropdownsLine = document.createElement("div"); otherDropdownsLine.appendChild(adults18_64Dropdown); otherDropdownsLine.appendChild(adults65PlusDropdown); otherDropdownsLine.appendChild(infants0_2Dropdown); otherDropdownsLine.appendChild(preschoolers3_4Dropdown); otherDropdownsLine.appendChild(schoolAgeChildren5_17Dropdown); dropdownContainer.appendChild(otherDropdownsLine); // Main container const container = document.createElement("div"); container.appendChild(dropdownContainer); const chartRow = document.createElement("div"); chartRow.appendChild(chartContainerExpenses); chartRow.appendChild(chartContainerHousing); chartRow.appendChild(chartContainerTaxes); container.appendChild(chartRow); container.appendChild(chartContainerTotalCosts); updateChart(); // Initial chart update return container; }