|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>Heart Disease Scatter Plot</title> |
|
<style> |
|
body { |
|
margin: 0; |
|
overflow: hidden; |
|
} |
|
.tick text { |
|
font-size: 24px; |
|
} |
|
</style> |
|
<script src="https://unpkg.com/d3@6.7.0/dist/d3.min.js"></script> |
|
</head> |
|
<body> |
|
<script> |
|
const { |
|
csv, |
|
min, |
|
max, |
|
select, |
|
scaleLinear, |
|
extent, |
|
axisLeft, |
|
axisBottom, |
|
} = d3; |
|
|
|
const csvUrl = [ |
|
'https://gist.githubusercontent.com/', |
|
'RyanYun0017/', // User |
|
|
|
'cc46aeeef6bf15531920616f5ee3b149/', // Id of the Gist |
|
'raw/195683e9b475fa7df08401d6b3969277779c99fa/', // commit |
|
'HeartDisease.csv', // File name |
|
].join(''); |
|
const parseRow = (d) => { |
|
d.age = +d.age; |
|
d.sex = +d.sex; //0: Female,1: Male |
|
d.cp = +d.cp; //Chest Pain Type: //0: Typical Angina |
|
//1: Atypical Angina |
|
//2: Non-Anginal Pain |
|
//3: Asymptomatic |
|
|
|
d.trestbps = +d.trestbps; //Resting Blood Pressure: Person's resting blood pressure. |
|
|
|
d.chol = +d.chol; //Cholesterol: Serum Cholesterol in mg/dl |
|
|
|
d.fbs = +d.fbs; //Fasting Blood Sugar: |
|
//0:Less Than 120mg/ml |
|
//1: Greater Than 120mg/ml |
|
|
|
d.restecg = +d.restecg; //Resting Electrocardiographic Measurement: |
|
//0: Normal |
|
//1: ST-T Wave Abnormality |
|
//2: Left Ventricular Hypertrophy |
|
|
|
d.thalach = +d.thalach; //Max Heart Rate Achieved: Maximum Heart Rate Achieved |
|
|
|
d.exang = +d.exang; //Exercise Induced Angina: |
|
//1: Yes |
|
//0: No |
|
|
|
d.slope = +d.slope; //Slope: Slope of the peak exercise ST segment: |
|
//0: Upsloping |
|
//1: Flat |
|
//2: Downsloping |
|
d.ca = +d.ca; |
|
d.oldpeak = +d.oldpeak; |
|
d.thal = +d.thal; //Thalassemia: A blood disorder called 'Thalassemia': |
|
//0: Normal |
|
//1: Fixed Defect |
|
//2: Reversable Defect |
|
return d; |
|
}; |
|
const xValue = (d) => d.age; |
|
const yValue = (d) => d.thalach; |
|
const margin = { |
|
top: 20, |
|
right: 40, |
|
bottom: 60, |
|
left: 90, |
|
}; |
|
const radius = 5; |
|
|
|
const width = window.innerWidth; |
|
const height = window.innerHeight; |
|
const svg = select('body') |
|
.append('svg') |
|
.attr('width', width) |
|
.attr('height', height); |
|
|
|
const main = async () => { |
|
const data = await csv(csvUrl, parseRow); |
|
|
|
const x = scaleLinear() |
|
.domain([ |
|
min(data, xValue) - 2, |
|
max(data, xValue), |
|
]) |
|
.range([margin.left, width - margin.right]); |
|
|
|
const y = scaleLinear() |
|
.domain([ |
|
min(data, yValue) - 0.5, |
|
max(data, yValue), |
|
]) |
|
.range([height - margin.bottom, margin.top]); |
|
|
|
const marks = data.map((d) => ({ |
|
x: x(xValue(d)), |
|
y: y(yValue(d)), |
|
color: d.sex == 0 ? 'red' : 'blue', |
|
})); |
|
|
|
svg |
|
.selectAll('circle') |
|
.data(marks) |
|
.join('circle') |
|
.attr('cx', (d) => d.x) |
|
.attr('cy', (d) => d.y) |
|
.attr('r', radius) |
|
.attr('fill', (d) => d.color) |
|
.attr('fill-opacity', 0.5); |
|
|
|
svg |
|
.append('g') |
|
.attr('transform', `translate(${margin.left},0)`) |
|
.call(axisLeft(y)); |
|
|
|
svg |
|
.append('g') |
|
.attr( |
|
'transform', |
|
`translate(0,${height - margin.bottom})` |
|
) |
|
.call(axisBottom(x)); |
|
svg |
|
.append('text') |
|
.attr('text-anchor', 'end') |
|
.attr('x', width / 2 + 85) |
|
.attr('y', height - margin.top + 5) |
|
.attr('font-size', '18px') |
|
.text('Age of Patients'); |
|
|
|
svg |
|
.append('text') |
|
.attr('text-anchor', 'middle') |
|
.attr('transform', 'rotate(-90)') |
|
.attr('y', margin.left / 2.5) |
|
.attr('x', -(height / 2 - 15)) |
|
.attr('font-size', '16px') |
|
.text('The Maximum Heart rate Achived'); |
|
}; |
|
main(); |
|
</script> |
|
</body> |
|
</html> |