The avatar for @ipums
ipums
Public
Edited
Nov 24, 2024
1
Insert cell
Insert cell
IPUMS_USA.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
viz1={
const Plotly = await require("https://cdn.plot.ly/plotly-latest.min.js");

// Function to create dropdowns
const createDropdown = (name, options) => {
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 = updateDropdowns;
return select;
};

// Function to update the dropdowns (this was missing earlier)
function updateDropdowns() {
updateChart(); // Update the chart whenever a dropdown value is changed
}

// Use the IPUMS USA data (data already provided as ipums_df)
const data = ipums_df;

// Define dropdown options
const raceOptions = ["All", "White", "Black", "Asian", "Hispanic", "Native American"];
const educationOptions = ["All", "High School Diploma", "Some College", "Bachelor's Degree", "Master's Degree", "Ph.D.", "Associate's Degree"];
const employmentStatusOptions = ["All", "Employed", "Unemployed", "Retired"];

// Create dropdowns
const raceDropdown = createDropdown("Race", raceOptions);
const educationDropdown = createDropdown("Education", educationOptions);
const employmentStatusDropdown = createDropdown("Employment Status", employmentStatusOptions);

// Create chart container
const chartContainer = document.createElement("div");
chartContainer.style.width = "100%";
chartContainer.style.height = "600px";

// Function to update the chart based on selected dropdown values
function updateChart() {
// Filter data based on selected dropdown values
const selectedRace = raceDropdown.value;
const selectedEducation = educationDropdown.value;
const selectedEmploymentStatus = employmentStatusDropdown.value;

const filteredData = data.filter(entry => {
let includeData = true;

// Filter by race
if (selectedRace !== "All" && entry.RACE !== selectedRace) {
includeData = false;
}

// Filter by education level
if (selectedEducation !== "All" && entry.EDUC !== selectedEducation) {
includeData = false;
}

// Filter by employment status
if (selectedEmploymentStatus !== "All" && entry.EMPSTAT !== selectedEmploymentStatus) {
includeData = false;
}

return includeData;
});

// Prepare data for bar chart (Educational Attainment by Race)
const raceGroups = [...new Set(filteredData.map(entry => entry.RACE))];
const educationLevels = educationOptions.slice(1); // Exclude 'All' option
const educationCounts = educationLevels.map(level => {
return raceGroups.map(race => {
return filteredData.filter(entry => entry.RACE === race && entry.EDUC === level).length;
});
});

// Bar chart data for educational attainment
const traces = raceGroups.map((race, i) => ({
x: educationLevels,
y: educationCounts.map(count => count[i]),
name: race,
type: 'bar'
}));

// Create layout for bar chart
const layout = {
title: 'Educational Attainment by Race',
barmode: 'group',
xaxis: { title: 'Education Level' },
yaxis: { title: 'Count' },
};

// Plot the chart
Plotly.newPlot(chartContainer, traces, layout);
}

// UI setup
const uiContainer = document.createElement("div");
uiContainer.appendChild(document.createTextNode("Select Filters: "));
uiContainer.appendChild(raceDropdown);
uiContainer.appendChild(educationDropdown);
uiContainer.appendChild(employmentStatusDropdown);

const container = document.createElement("div");
container.appendChild(uiContainer);
container.appendChild(chartContainer);

updateChart(); // Initial chart rendering

return container;
}

Insert cell
Insert cell
Insert cell
viz2={
const Plotly = await require("https://cdn.plot.ly/plotly-latest.min.js");

// Dropdown creation
const createDropdown = (name, options) => {
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;
return select;
};

// Data (ipums_df assumed to be available)
const data = ipums_df;

// Dropdown options
const raceOptions = ["All", "White", "Black", "Asian", "Hispanic", "Native American"];
const educationOptions = ["All", "High School Diploma", "Some College", "Bachelor's Degree", "Master's Degree", "Ph.D.", "Associate's Degree"];
const employmentStatusOptions = ["All", "Employed", "Unemployed", "Retired"];

// Create dropdowns
const raceDropdown = createDropdown("Race", raceOptions);
const educationDropdown = createDropdown("Education", educationOptions);
const employmentStatusDropdown = createDropdown("Employment Status", employmentStatusOptions);

// Chart container
const chartContainer = document.createElement("div");
chartContainer.style.width = "100%";
chartContainer.style.height = "600px";

// Function to update chart based on dropdowns
function updateChart() {
const selectedRace = raceDropdown.value;
const selectedEducation = educationDropdown.value;
const selectedEmploymentStatus = employmentStatusDropdown.value;

const filteredData = data.filter(entry => {
let include = true;
if (selectedRace !== "All" && entry.RACE !== selectedRace) include = false;
if (selectedEducation !== "All" && entry.EDUC !== selectedEducation) include = false;
if (selectedEmploymentStatus !== "All" && entry.EMPSTAT !== selectedEmploymentStatus) include = false;
return include;
});

const educationLevels = educationOptions.slice(1); // Exclude "All"

const boxTraces = educationLevels.map(level => ({
y: filteredData.filter(d => d.EDUC === level).map(d => d.INCOME),
name: level,
type: 'box'
}));

const layout = {
title: 'Income Distribution by Education Level',
yaxis: { title: 'Income' },
};

Plotly.newPlot(chartContainer, boxTraces, layout);
}

// UI setup
const uiContainer = document.createElement("div");
uiContainer.appendChild(document.createTextNode("Select Filters: "));
uiContainer.appendChild(raceDropdown);
uiContainer.appendChild(educationDropdown);
uiContainer.appendChild(employmentStatusDropdown);

const container = document.createElement("div");
container.appendChild(uiContainer);
container.appendChild(chartContainer);

updateChart(); // Initial chart

return container;
}

Insert cell
Insert cell
viz3={
const Plotly = await require("https://cdn.plot.ly/plotly-latest.min.js");

const createDropdown = (name, options) => {
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;
return select;
};

const data = ipums_df;

const raceOptions = ["All", "White", "Black", "Asian", "Hispanic", "Native American"];
const educationOptions = ["All", "High School Diploma", "Some College", "Bachelor's Degree", "Master's Degree", "Ph.D.", "Associate's Degree"];
const employmentStatusOptions = ["All", "Employed", "Unemployed", "Retired"];

const raceDropdown = createDropdown("Race", raceOptions);
const educationDropdown = createDropdown("Education", educationOptions);
const employmentStatusDropdown = createDropdown("Employment Status", employmentStatusOptions);

const chartContainer = document.createElement("div");
chartContainer.style.width = "100%";
chartContainer.style.height = "600px";

function updateChart() {
const selectedRace = raceDropdown.value;
const selectedEducation = educationDropdown.value;
const selectedEmploymentStatus = employmentStatusDropdown.value;

const filteredData = data.filter(entry => {
let include = true;
if (selectedRace !== "All" && entry.RACE !== selectedRace) include = false;
if (selectedEducation !== "All" && entry.EDUC !== selectedEducation) include = false;
if (selectedEmploymentStatus !== "All" && entry.EMPSTAT !== selectedEmploymentStatus) include = false;
return include;
});

const employmentGroups = employmentStatusOptions.slice(1);

const scatterTraces = employmentGroups.map(status => ({
x: filteredData.filter(d => d.EMPSTAT === status).map(d => d.AGE),
y: filteredData.filter(d => d.EMPSTAT === status).map(d => d.INCOME),
mode: 'markers',
name: status
}));

const layout = {
title: 'Age vs. Income by Employment Status',
xaxis: { title: 'Age' },
yaxis: { title: 'Income' },
};

Plotly.newPlot(chartContainer, scatterTraces, layout);
}

const uiContainer = document.createElement("div");
uiContainer.appendChild(document.createTextNode("Select Filters: "));
uiContainer.appendChild(raceDropdown);
uiContainer.appendChild(educationDropdown);
uiContainer.appendChild(employmentStatusDropdown);

const container = document.createElement("div");
container.appendChild(uiContainer);
container.appendChild(chartContainer);

updateChart(); // Initial rendering

return container;
}

Insert cell
Insert cell
viz4={
const Plotly = await require("https://cdn.plot.ly/plotly-latest.min.js");

const createDropdown = (name, options) => {
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;
return select;
};

const data = ipums_df;

const raceOptions = ["All", "White", "Black", "Asian", "Hispanic", "Native American"];
const educationOptions = ["All", "High School Diploma", "Some College", "Bachelor's Degree", "Master's Degree", "Ph.D.", "Associate's Degree"];
const employmentStatusOptions = ["All", "Employed", "Unemployed", "Retired"];

const raceDropdown = createDropdown("Race", raceOptions);
const educationDropdown = createDropdown("Education", educationOptions);
const employmentStatusDropdown = createDropdown("Employment Status", employmentStatusOptions);

const chartContainer = document.createElement("div");
chartContainer.style.width = "100%";
chartContainer.style.height = "600px";

function updateChart() {
const selectedRace = raceDropdown.value;
const selectedEducation = educationDropdown.value;
const selectedEmploymentStatus = employmentStatusDropdown.value;

const filteredData = data.filter(entry => {
let include = true;
if (selectedRace !== "All" && entry.RACE !== selectedRace) include = false;
if (selectedEducation !== "All" && entry.EDUC !== selectedEducation) include = false;
if (selectedEmploymentStatus !== "All" && entry.EMPSTAT !== selectedEmploymentStatus) include = false;
return include;
});

const employmentGroups = employmentStatusOptions.slice(1);

const employmentCounts = employmentGroups.map(status => {
return raceOptions.slice(1).map(race => {
return filteredData.filter(entry => entry.RACE === race && entry.EMPSTAT === status).length;
});
});

const traces = raceOptions.slice(1).map((race, i) => ({
x: employmentGroups,
y: employmentCounts.map(count => count[i]),
name: race,
type: 'bar'
}));

const layout = {
title: 'Employment Status Distribution by Race',
barmode: 'stack',
xaxis: { title: 'Employment Status' },
yaxis: { title: 'Count' },
};

Plotly.newPlot(chartContainer, traces, layout);
}

const uiContainer = document.createElement("div");
uiContainer.appendChild(document.createTextNode("Select Filters: "));
uiContainer.appendChild(raceDropdown);
uiContainer.appendChild(educationDropdown);
uiContainer.appendChild(employmentStatusDropdown);

const container = document.createElement("div");
container.appendChild(uiContainer);
container.appendChild(chartContainer);

updateChart(); // Initial rendering

return container;
}

Insert cell
Insert cell
viz6={
const Plotly = await require("https://cdn.plot.ly/plotly-latest.min.js");

// Function to create dropdown elements
const createDropdown = (name, options) => {
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; // Updates chart when the selection changes
return select;
};

// Mock data provided
const data = ipums_df;

// Dropdown options
const raceOptions = ["All", "White", "Black", "Asian", "Hispanic", "Native American"];
const educationOptions = ["All", "High School Diploma", "Some College", "Bachelor's Degree", "Master's Degree", "Ph.D.", "Associate's Degree"];
const employmentStatusOptions = ["All", "Employed", "Unemployed", "Retired"];

// Create dropdown elements
const raceDropdown = createDropdown("Race", raceOptions);
const educationDropdown = createDropdown("Education", educationOptions);
const employmentStatusDropdown = createDropdown("Employment Status", employmentStatusOptions);

// Create a div for the chart
const chartContainer = document.createElement("div");
chartContainer.style.width = "100%";
chartContainer.style.height = "600px";

// Function to update the chart
function updateChart() {
const selectedRace = raceDropdown.value;
const selectedEducation = educationDropdown.value;
const selectedEmploymentStatus = employmentStatusDropdown.value;

// Filter data based on selected filters
const filteredData = data.filter(entry => {
let include = true;
if (selectedRace !== "All" && entry.RACE !== selectedRace) include = false;
if (selectedEducation !== "All" && entry.EDUC !== selectedEducation) include = false;
if (selectedEmploymentStatus !== "All" && entry.EMPSTAT !== selectedEmploymentStatus) include = false;
return include;
});

// Define income brackets
const incomeBrackets = ["<25k", "25k-50k", "50k-75k", "75k-100k", ">100k"];
// Calculate count of entries for each income bracket
const incomeCounts = incomeBrackets.map(bracket => {
return filteredData.filter(entry => {
const income = parseInt(entry.INCOME.replace(/[^0-9]/g, ''), 10); // Clean income data
if (bracket === "<25k") return income < 25000;
if (bracket === "25k-50k") return income >= 25000 && income < 50000;
if (bracket === "50k-75k") return income >= 50000 && income < 75000;
if (bracket === "75k-100k") return income >= 75000 && income < 100000;
if (bracket === ">100k") return income >= 100000;
}).length;
});

// Define the pie chart trace
const trace = {
values: incomeCounts,
labels: incomeBrackets,
type: 'pie'
};

// Define layout for the chart
const layout = {
title: 'Income Bracket Distribution by Employment Status',
};

// Plot the chart
Plotly.newPlot(chartContainer, [trace], layout);
}

// Create UI container for the dropdown filters
const uiContainer = document.createElement("div");
uiContainer.appendChild(document.createTextNode("Select Filters: "));
uiContainer.appendChild(raceDropdown);
uiContainer.appendChild(educationDropdown);
uiContainer.appendChild(employmentStatusDropdown);

// Append UI and chart containers
const container = document.createElement("div");
container.appendChild(uiContainer);
container.appendChild(chartContainer);

// Initial rendering of the chart
updateChart();

return container;
}

Insert cell
Insert cell
viz5={
const Plotly = await require("https://cdn.plot.ly/plotly-latest.min.js");

const createDropdown = (name, options) => {
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;
return select;
};

// Mock data provided
const data = ipums_df;

// Dropdown options
const raceOptions = ["All", "White", "Black", "Asian", "Hispanic", "Native American"];
const employmentStatusOptions = ["All", "Employed", "Unemployed", "Retired"];

// Create dropdown elements
const raceDropdown = createDropdown("Race", raceOptions);
const employmentStatusDropdown = createDropdown("Employment Status", employmentStatusOptions);

// Create a div for the chart
const chartContainer = document.createElement("div");
chartContainer.style.width = "100%";
chartContainer.style.height = "600px";

// Function to update the heatmap chart
function updateChart() {
const selectedRace = raceDropdown.value;
const selectedEmploymentStatus = employmentStatusDropdown.value;

// Filter data based on selected race and employment status
const filteredData = data.filter(entry => {
let include = true;
if (selectedRace !== "All" && entry.RACE !== selectedRace) include = false;
if (selectedEmploymentStatus !== "All" && entry.EMPSTAT !== selectedEmploymentStatus) include = false;
return include;
});

// Define income brackets and educational levels for the heatmap
const incomeBrackets = ["<25k", "25k-50k", "50k-75k", "75k-100k", ">100k"];
const educationLevels = ["High School Diploma", "Some College", "Bachelor's Degree", "Master's Degree", "Ph.D.", "Associate's Degree"];

// Calculate counts for the heatmap matrix
const heatmapMatrix = educationLevels.map(education => {
return incomeBrackets.map(bracket => {
return filteredData.filter(entry => {
const income = parseInt(entry.INCOME.replace(/[^0-9]/g, ''), 10); // Clean income data
let incomeInBracket = false;
if (bracket === "<25k") incomeInBracket = income < 25000;
if (bracket === "25k-50k") incomeInBracket = income >= 25000 && income < 50000;
if (bracket === "50k-75k") incomeInBracket = income >= 50000 && income < 75000;
if (bracket === "75k-100k") incomeInBracket = income >= 75000 && income < 100000;
if (bracket === ">100k") incomeInBracket = income >= 100000;
return entry.EDUC === education && incomeInBracket;
}).length;
});
});

// Define the heatmap trace with a different color scheme (Blues)
const trace = {
z: heatmapMatrix,
x: incomeBrackets,
y: educationLevels,
type: 'heatmap',
colorscale: 'Cividis' // Updated color scheme
};

// Define layout for the heatmap
const layout = {
title: 'Income Bracket Distribution by Employment Status and Education',
xaxis: { title: 'Income Brackets' },
yaxis: { title: 'Education Levels' }
};

// Plot the heatmap
Plotly.newPlot(chartContainer, [trace], layout);
}

// Create UI container for the dropdown filters
const uiContainer = document.createElement("div");
uiContainer.appendChild(document.createTextNode("Select Filters: "));
uiContainer.appendChild(raceDropdown);
uiContainer.appendChild(employmentStatusDropdown);

// Append UI and chart containers
const container = document.createElement("div");
container.appendChild(uiContainer);
container.appendChild(chartContainer);

// Initial rendering of the chart
updateChart();

return container;
}

Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more