Public
Edited
Nov 24
<iframe src="https://public.tableau.com/views/Trial_17321231466610/Dashboard1?:showVizHome=no&:embed=true"
width="645" height="955"></iframe>
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}<br>Children: %{x}<br>Avg. Cost: $%{z:.2f}<extra></extra>"
};
const layout = {
title: {
text: "<b>Child Care Costs Heatmap</b>",
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;
}
marionchart = {
const categories = ['Housing - Rent', 'Child Care', 'Food', 'Transportation',
'Health Care', 'Miscellaneous', 'Tax Payments'];
const costs = [728, 1246, 1158, 1048, 677, 528, 1163]; // Corresponding costs
// Pie chart configuration
const data = [{
type: 'pie',
labels: categories,
values: costs,
hole: 0.3, // Donut chart
textinfo: 'percent', // Display label and percentage
hoverinfo: 'label+value+percent' // Display label, value, and percentage on hover
}];
// Layout configuration
const layout = {
title: 'Cost Distribution in Marion County (2 Adults, 1 Infant, 1 Preschooler)',
showlegend: true,
width: 600,
height: 400
};
// Create a container for Plotly chart
const container = document.createElement("div");
container.id = "pie-chart-container";
// Render the Plotly chart inside the container
Plotly.newPlot(container, data, layout);
return container;
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.