update chart

This commit is contained in:
Mahdi Dibaiee 2021-10-16 21:23:03 +01:00
parent 11d12b9ac3
commit f9b777d061
4 changed files with 47 additions and 8 deletions

View File

@ -10,6 +10,22 @@ header {
margin-bottom: 2rem;
}
.text-center {
text-align: center;
}
.alcohol-abuse-chart-box {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
flex-direction: column;
}
.alcohol-abuse-chart-box p {
margin-top: 1rem;
}
.heading h1, .heading h2 {
text-align: center;
}

View File

@ -95,14 +95,18 @@
</div>
</div>
<div class='row'>
<div class='column'>
<div class='column column-50'>
<p>Binge drinking (drinking 5 units over a 2 hour period, followed by a period of abstinence) and high alcohol intake (more than 5 units a day), can lead to dependence, tolerance and cravings, which lead to a continuation of alcohol abuse to prevent withdrawal symptoms.</p>
<p>Chronic alcohol abuse can have adverse effects such as loss of balance and gait, slurred speech, slower reactions, poor memory consolidation, compromised emotional modulation and judgement. These effects in turn can lead to difficulties in social and emotional interactions, and a reduction in motivation, attention and impulse control.</p>
<p>These effects are studied and proven using methods such as MRI scans which show loss of neurons, particularly in the frontal lobe, the area most associated with reasoning, decision-making and rationality, however it can affect other areas of the brain such as the cerebellum (associated with balance and movement), hippocampus (memory) and amygdala (memory, decision making and emotional responses). [<a href='#ref-1'>1</a>]</p>
<p>Every year millions of people suffer from Alcohol use disorder, leading to physical and mental health problems.</p>
</div>
<div class='column column-50'>
<div class='alcohol-abuse-chart-box'>
<canvas id='alcohol-abuse'></canvas>
<p class='text-center'>Alcohol Abuse Across The World [<a href='#ref-2'>2</a>]</p>
</div>
</div>
</div>

View File

@ -9,14 +9,29 @@ const alcoholAbuseChart = new Chart(alcoholAbuseCanvas, {
labels: alcoholDeathPercent.map(function(a) { return a.year }),
datasets: [{
label: 'Deaths by Alcohol Abuse',
data: alcoholDeathPercent.map(function(a) { return a.val }),
data: alcoholDeathPercent.map(function(a) { return a.val * 100 }),
fill: true,
backgroundColor: 'rgb(249, 98, 200)'
}, {
label: 'Prevalence of Alcohol Abuse',
data: alcoholPrevalencePercent.map(function(a) { return a.val }),
data: alcoholPrevalencePercent.map(function(a) { return a.val * 100 }),
borderColor: 'rgb(97, 152, 250)'
}]
},
options: {
aspectRatio: 1,
scales: {
y: {
type: 'linear',
beginAtZero: true,
max: 2,
ticks: {
callback: function(value, index, values) {
return value + '%';
}
}
}
}
}
});

View File

@ -26,14 +26,18 @@
</div>
</div>
<div class='row'>
<div class='column'>
<div class='column column-50'>
<p>Binge drinking (drinking 5 units over a 2 hour period, followed by a period of abstinence) and high alcohol intake (more than 5 units a day), can lead to dependence, tolerance and cravings, which lead to a continuation of alcohol abuse to prevent withdrawal symptoms.</p>
<p>Chronic alcohol abuse can have adverse effects such as loss of balance and gait, slurred speech, slower reactions, poor memory consolidation, compromised emotional modulation and judgement. These effects in turn can lead to difficulties in social and emotional interactions, and a reduction in motivation, attention and impulse control.</p>
<p>These effects are studied and proven using methods such as MRI scans which show loss of neurons, particularly in the frontal lobe, the area most associated with reasoning, decision-making and rationality, however it can affect other areas of the brain such as the cerebellum (associated with balance and movement), hippocampus (memory) and amygdala (memory, decision making and emotional responses). [<a href='#ref-1'>1</a>]</p>
<p>Every year millions of people suffer from Alcohol use disorder, leading to physical and mental health problems.</p>
</div>
<div class='column column-50'>
<div class='alcohol-abuse-chart-box'>
<canvas id='alcohol-abuse'></canvas>
<p class='text-center'>Alcohol Abuse Across The World [<a href='#ref-2'>2</a>]</p>
</div>
</div>
</div>