d3 = require('d3@7')
// Label encoding qualitative variables
function encodeCategory(value, categories) {
const index = categories.indexOf(value);
return index !== 0 ? index : 0; // Return 0 if the category doesn't exist
}
// Scale correlation to the range [-1, 1]
scaleCorrelation = (correlation) => {
const scale = d3.scaleLinear()
.domain([-5, 5])
.range([-1, 1]);
return scale(correlation);
}
data = d3.csv('https://raw.githubusercontent.com/balleromair12/DataViz_finalproject/main/heart_2020_cleaned.csv', d => {
return {
heartDisease: d.HeartDisease === 'Yes' ? 1 : 0, // Heart disease
bmi: +d.BMI, // Body Mass Index
smoking: d.Smoking === 'Yes' ? 1 : 0, // Smoking
alcoholDrinking: d.AlcoholDrinking === 'Yes' ? 1 : 0, // Alcohol Drinking
stroke: d.Stroke === 'Yes' ? 1 : 0, // Stroke
physicalHealth: +d.PhysicalHealth, // Physical health condition
mentalHealth: +d.MentalHealth, // Mental health condition
diffWalking: d.DiffWalking === 'Yes' ? 1 : 0, // Difficulty walking
sex: d.Sex === 'Male' ? 1 : 0, // Sex
// Label encoding for AgeCategory
ageCategory: encodeCategory(d.AgeCategory, ['18-24', '25-29', '30-34', '35-39', '40-44', '45-49', '50-54', '55-59', '60-64', '65-69', '70-74', '75-79', '80 or older']),
// Label encoding for Race
raceCategory: encodeCategory(d.Race, ['American Indian/Alaskan Native', 'White', 'Black', 'Asian', 'Hispanic', 'Other']),
diabetic: d.Diabetic === 'Yes' ? 1 : 0, // Diabetic
physicalActivity: d.PhysicalActivity === 'Yes' ? 1 : 0, // Physical Activity
// Label encoding for GenHealth
genHealth: encodeCategory(d.GenHealth, ['Excellent', 'Very Good', 'Good', 'Fair', 'Poor']),
sleepTime: +d.SleepTime, // Sleep time
asthma: d.Asthma === 'Yes' ? 1 : 0, // Asthma
kidneyDisease: d.KidneyDisease === 'Yes' ? 1 : 0, // Kidney Disease
skinCancer: d.SkinCancer === 'Yes' ? 1 : 0, // Skin Cancer
};
});
viewof bmi = Inputs.range([10, 50], {label: 'BMI', step: 0.1, value: 25})
viewof smoking = Inputs.checkbox(['Smoking?'], {value: []})
viewof alcoholDrinking = Inputs.checkbox(['Alcohol Drinking?'], {value: []})
viewof stroke = Inputs.checkbox(['Stroke History?'], {value: []})
viewof physicalHealth = Inputs.range([0, 30], {label: 'Physical Health Status (smaller value indicates better status)', step: 1, value: 5})
viewof mentalHealth = Inputs.range([0, 30], {label: 'Mental Health Status (smaller value indicates better status)', step: 1, value: 5})
viewof diffWalking = Inputs.checkbox(['Difficulty Walking?'], {value: []})
viewof sex = Inputs.select(['Male', 'Female'], {label: 'Sex'})
viewof ageCategory = Inputs.select(['18-24', '25-29', '30-34', '35-39', '40-44', '45-49', '50-54', '55-59', '60-64', '65-69', '70-74', '75-79', '80 or older'], {label: 'Age Category'})
viewof raceCategory = Inputs.select(['American Indian/Alaskan Native', 'White', 'Black', 'Asian', 'Hispanic', 'Other'], {label: 'Race'})
viewof diabetic = Inputs.checkbox(['Diabetic?'], {value: []})
viewof physicalActivity = Inputs.checkbox(['Physically Active?'], {value: []})
viewof genHealth = Inputs.select(['Excellent', 'Very Good', 'Good', 'Fair', 'Poor'], {label: 'General Health'})
viewof sleepTime = Inputs.range([0, 24], {label: 'Sleep Time', step: 1, value: 1})
viewof asthma = Inputs.checkbox(['Has Asthma?'], {value: []})
// Sigmoid function
function sigmoid(z) {
return 1 / (1 + Math.exp(-z));
}
// Normalization
function normalize(value, min, max) {
return (value - min) / (max - min);
}
// Prediction function using dot product
function predict(input, weights, bias = 0) {
let z = bias;
for (let i = 0; i < input.length; i++) {
z += input[i] * weights[i];
}
return sigmoid(z);
}
// Function to create features
function createFeatures({
bmi,
smoking,
alcoholDrinking,
stroke,
physicalHealth,
mentalHealth,
diffWalking,
sex,
ageCategory,
raceCategory,
diabetic,
physicalActivity,
genHealth,
sleepTime,
asthma
}) {
return {
bmi: normalize(bmi, 10, 50),
smoking: smoking.includes('Smoker?') ? 1 : 0,
alcoholDrinking: alcoholDrinking.includes('Drinks Alcohol?') ? 1 : 0,
stroke: stroke.includes('Stroke History?') ? 1 : 0,
physicalHealth: normalize(physicalHealth, 0, 30),
mentalHealth: normalize(mentalHealth, 0, 30),
diffWalking: diffWalking.includes('Difficulty Walking?') ? 1 : 0,
sex: sex === 'Male' ? 1 : 0,
ageCategory: encodeCategory(ageCategory, ['18-24', '25-29', '30-34', '35-39', '40-44', '45-49', '50-54', '55-59', '60-64', '65-69', '70-74', '75-79', '80 or older']),
raceCategory: encodeCategory(raceCategory, ['American Indian/Alaskan Native', 'White', 'Black', 'Asian', 'Hispanic', 'Other']),
diabetic: diabetic.includes('Diabetic?') ? 1 : 0,
physicalActivity: physicalActivity.includes('Physically Active?') ? 1 : 0,
genHealth: encodeCategory(genHealth, ['Excellent', 'Very Good', 'Good', 'Fair', 'Poor']),
sleepTime: normalize(sleepTime, 0, 24),
asthma: asthma.includes('Asthma?') ? 1 : 0
};
}
features = createFeatures({
bmi,
smoking,
alcoholDrinking,
stroke,
physicalHealth,
mentalHealth,
diffWalking,
sex,
ageCategory,
raceCategory,
diabetic,
physicalActivity,
genHealth,
sleepTime,
asthma
});
inputVector = Object.values(features);
// Get weights of features; weights are obtained from correlation matrix
function getWeights() {
return {
heartDisease: [0.09, 0.2, -0.06, 0.24, 0.25, 0.05, 0.31, 0.13, 0.5, -0.08, 0.28, -0.17, 0.39, 0.01, 0.07],
kidneyDisease: [0.19, 0.14, -0.13, 0.26, 0.45, 0.13, 0.50, -0.4, 0.55, -0.05, 0.50, -0.3, 0.62, 0.02, 0.15],
skinCancer: [-0.06, 0.06, -0.01, 0.07, 0.07, -0.06, 0.1, 0.02, 0.53, -0.23, 0.06, 0, 0.06, 0.07, 0]};
}
weights = getWeights();
// Predict the probability for heart disease
predict(inputVector, weights.heartDisease)
// Predict the probability for kidney disease
predict(inputVector, weights.kidneyDisease)
// Predict the probability for skin cancer
predict(inputVector, weights.skinCancer)
// Heart disease (yes/no)
heartPrediction = predict(inputVector, weights.heartDisease) > 0.98 ? 'Yes' : 'No';
// Kidney disease (yes/no)
kidneyPrediction = predict(inputVector, weights.kidneyDisease) > 0.98 ? 'Yes' : 'No';
// Skin cancer (yes/no)
skinPrediction = predict(inputVector, weights.skinCancer) > 0.98 ? 'Yes' : 'No';
predictor = html`
<div style="border: 2px solid #ccc; border-radius: 12px; padding: 40px; max-width: 400px; font-family: sans-serif; background: #f9f9f9;">
<h3 style="margin-top: 0; margin-bottom: 16px; color: #444;">Predicted Disease Risk</h3>
<div style="margin-bottom: 10px;">
<strong>Heart Disease:</strong> <span style="color: ${heartPrediction === 'Yes' ? 'red' : 'green'}">${heartPrediction}</span>
</div>
<div style="margin-bottom: 10px;">
<strong>Kidney Disease:</strong> <span style="color: ${kidneyPrediction === 'Yes' ? 'red' : 'green'}">${kidneyPrediction}</span>
</div>
<div>
<strong>Skin Cancer:</strong> <span style="color: ${skinPrediction === 'Yes' ? 'red' : 'green'}">${skinPrediction}</span>
</div>
</div>
`
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.
