27:null 28:["$","title",null,{"children":"Scraping ALICE Household Budget Data | Shiv-zz's Workspace | Observable"}] 2d:T6af,function transformDataset(dataset) { return dataset.map(record => ({ state: record["State"], county: record["County"], demographics: { adults_18_64: parseInt(record["ADULTS (Age 18-64)"], 10), adults_65_plus: parseInt(record["ADULTS (AGE 65+)"], 10), infants_0_2: parseInt(record["INFANTS (AGE 0-2)"], 10), preschoolers_3_4: parseInt(record["PRESCHOOLERS (AGE 3-4)"], 10), school_age_children_5_17: parseInt(record["SCHOOL-AGE CHILDREN(AGE 5-17)"], 10) }, expenses: { housing: { rent: parseFloat(record["Housing - Rent"].replace("$", "").replace(",", "")), utilities: parseFloat(record["Housing - Utilities"].replace("$", "").replace(",", "")) }, child_care: parseFloat(record["Child Care"].replace("$", "").replace(",", "")), food: parseFloat(record["Food"].replace("$", "").replace(",", "")), transportation: parseFloat(record["Transportation"].replace("$", "").replace(",", "")), health_care: parseFloat(record["Health Care"].replace("$", "").replace(",", "")), technology: parseFloat(record["Technology"].replace("$", "").replace(",", "")), miscellaneous: parseFloat(record["Miscellaneous"].replace("$", "").replace(",", "")) }, taxes: { payments: parseFloat(record["Tax Payments"].replace("$", "").replace(",", "")), credits: parseFloat(record["Tax Credits"].replace("$", "").replace(",", "")) }, totals: { monthly: parseFloat(record["Monthly Total"].replace("$", "").replace(",", "")), annual: parseFloat(record["ANNUAL TOTAL"].replace("$", "").replace(",", "")), hourly_wage: parseFloat(record["Hourly Wage"].replace("$", "")) } })); } 2e:T3a10,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 chartContainerTotalCosts = document.createElement("div"); const chartContainerExpenses = document.createElement("div"); const chartContainerHousing = document.createElement("div"); const chartContainerTaxes = document.createElement("div"); chartContainerTotalCosts.style.width = "100%"; chartContainerTotalCosts.style.height = "600px"; [chartContainerExpenses, chartContainerHousing, chartContainerTaxes].forEach(container => { container.style.width = "33%"; container.style.height = "400px"; container.style.display = "inline-block"; container.style.verticalAlign = "top"; }); // 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 } } }); // Total Costs Distribution 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 } }, annotations: [{ text: `Total: $${Object.values(totalCosts).reduce((a, b) => a + b, 0).toFixed(2)}`, x: 0.5, y: 0.5, showarrow: false, font: { size: 16, color: "black" } }] }); } // 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"); container.appendChild(chartContainerTotalCosts); chartRow.appendChild(chartContainerExpenses); chartRow.appendChild(chartContainerHousing); chartRow.appendChild(chartContainerTaxes); container.appendChild(chartRow); // Set default values for dropdowns and update chart countyDropdown.querySelector("select").value = "Adams"; // Default county to Adams adults18_64Dropdown.querySelector("select").value = "1"; // Default to 1 adult (18-64) adults65PlusDropdown.querySelector("select").value = "0"; // Default to 0 adults (65+) infants0_2Dropdown.querySelector("select").value = "0"; // Default to 0 infants preschoolers3_4Dropdown.querySelector("select").value = "0"; // Default to 0 preschoolers schoolAgeChildren5_17Dropdown.querySelector("select").value = "0"; // Default to 0 school-age children updateChart(); // Initial chart update return container; } 2f:T11a7,heatmapChart = { const Plotly = await require("https://cdn.plot.ly/plotly-latest.min.js"); // Define dropdown function const createDropdown = (labelText, name, options) => { const container = document.createElement("span"); const label = document.createElement("label"); label.innerText = `${labelText}: `; label.style.fontWeight = "bold"; label.style.marginRight = "5px"; 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"; container.appendChild(label); container.appendChild(select); return container; }; // Data and options const data = transformedDataset; // Ensure this is the filtered and transformed dataset 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 adults18_64Options = [0, 1, 2, 3, 4, 5, 6]; // Dropdown for adults 18–64 const childrenOptions = [0, 1, 2, 3, 4, 5, 6]; // Number of children const adults18_64Dropdown = createDropdown("Adults 18-64", "Adults 18-64", adults18_64Options); // Create chart container const chartContainer = document.createElement("div"); chartContainer.style.width = "100%"; chartContainer.style.height = "600px"; // Update chart function function updateChart() { const selectedAdults18_64 = parseInt(adults18_64Dropdown.querySelector("select").value); // Filter data based on selected adults const filteredData = data.filter(entry => entry.demographics.adults_18_64 === selectedAdults18_64); // Prepare heatmap data const zValues = indianaCounties.map(county => { return childrenOptions.map(childrenCount => { const matchingData = filteredData.filter(entry => { const totalChildren = entry.demographics.infants_0_2 + entry.demographics.preschoolers_3_4 + entry.demographics.school_age_children_5_17; return entry.county === county && totalChildren === childrenCount; }); // Calculate average child care cost return matchingData.length ? matchingData.reduce((sum, entry) => sum + entry.expenses.child_care, 0) / matchingData.length : 0; }); }); // Prepare Plotly heatmap data const trace = { x: childrenOptions, // Number of children y: indianaCounties, // Counties z: zValues, // Average child care costs type: "heatmap", colorscale: "Viridis", // Color scale hovertemplate: "County: %{y}
Children: %{x}
Avg. Cost: $%{z:.2f}" }; const layout = { title: { text: "Child Care Costs Heatmap", font: { size: 20 } }, xaxis: { title: "Number of Children" }, yaxis: { title: "Counties", automargin: true }, height: 600, width: 800 }; Plotly.newPlot(chartContainer, [trace], layout); } // Container for dropdowns const dropdownContainer = document.createElement("div"); dropdownContainer.appendChild(adults18_64Dropdown); dropdownContainer.style.marginBottom = "15px"; // Main container const container = document.createElement("div"); container.appendChild(dropdownContainer); container.appendChild(chartContainer); updateChart(); // Initial chart update return container; } 30:[{"id":"f2b6eea605a28bbad70db19b2866fc1976392eded2b075a09e427de5faf9f3340636dd189122e04f44b5bd836c73035e3196970ce1f67b36e5fa893371664777","href":"https://static.observableusercontent.com/files/f2b6eea605a28bbad70db19b2866fc1976392eded2b075a09e427de5faf9f3340636dd189122e04f44b5bd836c73035e3196970ce1f67b36e5fa893371664777","name":"ALICEFINAL.csv","type":"text/csv","lastModified":1731817418944.663,"size":26444281}] 2b:{"id":"ffe7af3a5705d362","slug":null,"title":"Scraping ALICE Household Budget Data","thumbnail":"d9a5a3e70455a8d3377b6b3307e5a51938748ffc4ab60b4a648397d27447c1d8","access_level":"public","create_time":"$D2024-11-13T03:50:43.521Z","update_time":"$D2024-11-24T22:03:35.884Z","view_time":null,"first_public_time":"$D2024-11-20T17:12:39.051Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6e7015155a3f9b0b","login":"harishiv-zz-ws","name":"Shiv-zz's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/7014a49220dde92cbb241fa6b11ea6245ccfb0402fe88aaf33bd01cab0c9c89e","tier":"starter_2024"},"version":569,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"49576d670403ba18","login":"harishiv-zz","name":"Shiv-zz","avatar_url":"https://avatars-next.observableusercontent.com/de1b6ed913f644fd942a0ec73e4aa30da4bbc037f701cef5f26a1f90ff5cae21","tier":null}],"members":[{"type":"individual","id":"49576d670403ba18","login":"harishiv-zz","name":"Shiv-zz","avatar_url":"https://avatars-next.observableusercontent.com/de1b6ed913f644fd942a0ec73e4aa30da4bbc037f701cef5f26a1f90ff5cae21","tier":null,"role":"editor"},{"type":"team","id":"6e7015155a3f9b0b","login":"harishiv-zz-ws","name":"Shiv-zz's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/7014a49220dde92cbb241fa6b11ea6245ccfb0402fe88aaf33bd01cab0c9c89e","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Scraping ALICE Household Budget Data","cells":[{"id":0,"value":"# Scraping ALICE Household Budget Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":479,"value":"## Introduction:\nALICE - Asset Limited, Income Constrained, Employed.\nIt refers to households that earn above the Federal Poverty Level (FPL) but cannot afford the basic cost of living in their county. Although ALICE households face financial hardship, they generally do not meet the criteria for public assistance.\n\nThe ALICE Household Survival Budget is the foundation of the ALICE research. This budget calculates the bare minimum cost of the household basics needed to live and work in the modern economy by household composition, in every county. It serves as the foundation for assessing if households in each county are above or below the ALICE Threshold.\n\n## Objective:\nTo automate the data download process to retrieve the ALICE Household Survival Budget data for all counties in the state of Indiana for the year 2022(latest).\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":485,"value":"## Data Description:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"alice_counties_merged = await FileAttachment(\"ALICEFINAL.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"alice_counties_merged","database":"$undefined"},{"id":8,"value":"alice = FileAttachment(\"ALICEFINAL.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"## Data Transformation:\n\n- **Converted Raw Strings to Usable Data Types:** Transformed string data (e.g., dollar amounts) into integers, removing characters like `$` and `,` to enable mathematical operations.\n\n- **Data Hierarchy:** Grouped related fields (e.g., demographics, expenses, taxes) for clarity and ease of access, ensuring logical organization for data visualization.\n\n- **Standardized Data:** Ensured all records follow the same format, making the dataset easier to process and query.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":77,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"transformedDataset = transformDataset(alice);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"console.log(transformedDataset);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"d3 = require(\"d3@7\")\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"import { addTooltips } from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"Plotly = require(\"https://cdn.plot.ly/plotly-latest.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"import { Tooltip } from \"@clhenrick/tooltip-component\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"Special Additions:\n- Adding validation for number of adults and children\n- Hiding charts when validation fails\n- Showing a message when no data is available for selected combinations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":415,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"import { select } from \"@observablehq/inputs\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":524,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"marionchart = {\n const categories = ['Housing - Rent', 'Child Care', 'Food', 'Transportation', \n 'Health Care', 'Miscellaneous', 'Tax Payments'];\n\n const costs = [728, 1246, 1158, 1048, 677, 528, 1163]; // Corresponding costs\n\n // Pie chart configuration\n const data = [{\n type: 'pie',\n labels: categories,\n values: costs,\n hole: 0.3, // Donut chart\n textinfo: 'percent', // Display label and percentage\n hoverinfo: 'label+value+percent' // Display label, value, and percentage on hover\n }];\n\n // Layout configuration\n const layout = {\n title: 'Cost Distribution in Marion County (2 Adults, 1 Infant, 1 Preschooler)',\n showlegend: true,\n width: 600,\n height: 400\n };\n\n // Create a container for Plotly chart\n const container = document.createElement(\"div\");\n container.id = \"pie-chart-container\";\n \n // Render the Plotly chart inside the container\n Plotly.newPlot(container, data, layout);\n\n return container;\n}\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2c:"$2b:body"