diff --git a/.vscode/.prettierrc.yaml b/.vscode/.prettierrc.yaml
index a51674bd..f51d99fc 100644
--- a/.vscode/.prettierrc.yaml
+++ b/.vscode/.prettierrc.yaml
@@ -1,5 +1,5 @@
-trailingComma: "all"
+trailingComma: 'all'
tabWidth: 2
semi: true
singleQuote: true
-printWidth: 150
+printWidth: 80
diff --git a/web/src/components/d3component.js b/web/src/components/d3component.js
index 133881ec..90a67d4c 100644
--- a/web/src/components/d3component.js
+++ b/web/src/components/d3component.js
@@ -21,6 +21,9 @@ const D3Component = React.memo(({ callback, data, useDiv = false }) => {
D3Component.propTypes = {
callback: PropTypes.func.isRequired,
data: PropTypes.any,
+ // Using a div node instead of a svg node allows usage of child components of other types:
+ // i.g., for performance issues, we used both canvas & svg child elements in a visualisation.
+ useDiv: PropTypes.bool,
};
export default D3Component;
diff --git a/web/src/components/d3component_scrollytelling.js b/web/src/components/d3component_scrollytelling.js
new file mode 100644
index 00000000..e33ef13d
--- /dev/null
+++ b/web/src/components/d3component_scrollytelling.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import D3Component from './d3component';
+
+const D3ComponentScrollyTelling = ({
+ callback,
+ data,
+ isInitialized,
+ setIsInitialized,
+ useDiv = false,
+}) => {
+ const createCallback = (svg, data) => {
+ if (!isInitialized) {
+ setIsInitialized(true);
+ callback(svg, data);
+ }
+ };
+
+ return
- Of course, we are analyzing only one night of sleep so it is therefore tricky to draw general conclusions about your sleep. It is however
+ Of course, we are analyzing only one night of sleep so it is therefore
+ tricky to draw general conclusions about your sleep. It is however
fascinating to see how your night was.
Without further ado, this is what was your night of sleep:
- We have seen that sleep can be decomposed in mainly two stages, whereas REM and NREM, and that we can observe different stage proportions
- across age, gender and different sleep disorders. We’ve also defined other measures of your sleep architecture, such as your sleep latency,
- efficiency and total sleep time. In order to improve your sleep hygiene, many elements can be considered:
+ We have seen that sleep can be decomposed in mainly two stages,
+ whereas REM and NREM, and that we can observe different stage
+ proportions across age, gender and different sleep disorders. We’ve
+ also defined other measures of your sleep architecture, such as your
+ sleep latency, efficiency and total sleep time. In order to improve
+ your sleep hygiene, many elements can be considered:
- Alimentation: having a balanced diet and avoiding sources of caffeine can have a positive impact on one’s sleep. Chocolate, soft drink,
- tea and decaffeinated coffee are unexpected sources of caffeine.
+ Alimentation: having a balanced diet and avoiding sources of
+ caffeine can have a positive impact on one’s sleep. Chocolate, soft
+ drink, tea and decaffeinated coffee are unexpected sources of
+ caffeine.
+
+
+ Routine: going to sleep about at the same time, in a darkened and
+ quiet environment.
+
+
+ Routine: going to sleep about at the same time, in a darkened and
+ quiet environment.
+
+
+ Routine: going to sleep about at the same time, in a darkened and
+ quiet environment.
- Routine: going to sleep about at the same time, in a darkened and quiet environment.
- Routine: going to sleep about at the same time, in a darkened and quiet environment.
- Routine: going to sleep about at the same time, in a darkened and quiet environment.
- Although we’ve looked at many aspects of your night’s sleep, we haven’t properly looked at your sleep dynamics, whereas how your sleep
+ Although we’ve looked at many aspects of your night’s sleep, we
+ haven’t properly looked at your sleep dynamics, whereas how your sleep
evolves overnight.
Hypnogram
- A hypnogram allows you to visually inspect the evolution of your night, through time. The vertical axis represents how hard it is to wake
- up, namely the sleep deepness. We see that REM is one of the lightest sleep stages (along with N1), because we unknowingly wake up from that
- stage. Those short periods of arousal often last no longer than 15 seconds, are followed by a lighter sleep stage, and cannot be remembered
- the next morning. If they are too frequent, they can affect your sleep quality. [5] We can see that, throughout the night, stages follow
- about the same pattern, whereas we go from NREM (either N1, N2 and N3) and then to REM, and so on. We call those sleep cycles, and those
- typically range from four to six, each one lasting from 90 to 110 minutes. Another commonly looked at measurement is the time between sleep
- onset and the first REM epoch, namely REM latency, which corresponds to 20 minutes.
+ A hypnogram allows you to visually inspect the evolution of your
+ night, through time. The vertical axis represents how hard it is to
+ wake up, namely the sleep deepness. We see that REM is one of the
+ lightest sleep stages (along with N1), because we unknowingly wake up
+ from that stage. Those short periods of arousal often last no longer
+ than 15 seconds, are followed by a lighter sleep stage, and cannot be
+ remembered the next morning. If they are too frequent, they can affect
+ your sleep quality. [5] We can see that, throughout the night, stages
+ follow about the same pattern, whereas we go from NREM (either N1, N2
+ and N3) and then to REM, and so on. We call those sleep cycles, and
+ those typically range from four to six, each one lasting from 90 to
+ 110 minutes. Another commonly looked at measurement is the time
+ between sleep onset and the first REM epoch, namely REM latency, which
+ corresponds to 20 minutes.
-
- Sleep cycles take place in a broader process, named the circadian rhythm. It is the one that regulates our wake and sleep cycles over a 24
- hours period.
+ Sleep cycles take place in a broader process, named the circadian
+ rhythm. It is the one that regulates our wake and sleep cycles over a
+ 24 hours period.
- You’ve been able to visualize and inspect your night of sleep, which we’ve classified only based on your EEG recordings. In a sleep lab,
- electrophysiology technicians generally look at your EEG, EOG and submental EMG, and then manually classify each epoch of 30 seconds that
- compose your night. By looking at your EEG recordings, we can see some patterns that can help electrophysiology technicians, and our
+ You’ve been able to visualize and inspect your night of sleep, which
+ we’ve classified only based on your EEG recordings. In a sleep lab,
+ electrophysiology technicians generally look at your EEG, EOG and
+ submental EMG, and then manually classify each epoch of 30 seconds
+ that compose your night. By looking at your EEG recordings, we can see
+ some patterns that can help electrophysiology technicians, and our
classifier, discriminate sleep stages throughout the night.
Spectrogram
- Above, we can see the same chart from the first visualization, which represents your sleep stages through the night. Below it, there are
- spectrograms of both your EEG channels. Spectrograms can be viewed as if we took all of your nights signal, we’ve separated it in contiguous
- 30 seconds chunks, stacked then horizontally and to which we’ve applied the fast fourier transform. We then have, for each 30 seconds epoch,
- the corresponding amplitudes for each frequency that makes up the signal, hence the spectra. We then converted the scale to logarithmic, to
- better see the differences in the spectrums. We then speak of signal power instead of signal amplitude, because we look at the spectrums in
- a logarithmic scale.
+ Above, we can see the same chart from the first visualization, which
+ represents your sleep stages through the night. Below it, there are
+ spectrograms of both your EEG channels. Spectrograms can be viewed as
+ if we took all of your nights signal, we’ve separated it in contiguous
+ 30 seconds chunks, stacked then horizontally and to which we’ve
+ applied the fast fourier transform. We then have, for each 30 seconds
+ epoch, the corresponding amplitudes for each frequency that makes up
+ the signal, hence the spectra. We then converted the scale to
+ logarithmic, to better see the differences in the spectrums. We then
+ speak of signal power instead of signal amplitude, because we look at
+ the spectrums in a logarithmic scale.
How to read it?
- Red therefore means that in that 30 seconds time frame, that particular frequency had a big amplitude. Green means that you had that
- frequency with a lower amplitude. Dark blue means that you didn’t have that frequency in the signal.
+ Red therefore means that in that 30 seconds time frame, that
+ particular frequency had a big amplitude. Green means that you had
+ that frequency with a lower amplitude. Dark blue means that you didn’t
+ have that frequency in the signal.
- To get a better understanding at how spectrograms work, you can check out
-
+ To get a better understanding at how spectrograms work, you can check
+ out
+
{' '}
this visualization{' '}
that decomposes sound frequency from your microphone.
-
- Generally, when talking about brain waves, we group certain frequencies together into bands. There are overall five frequency bands, where
- each has a general associated behaviour, or state of mind. We will cover those when looking at time frames corresponding to each sleep
- stage.
+ Generally, when talking about brain waves, we group certain
+ frequencies together into bands. There are overall five frequency
+ bands, where each has a general associated behaviour, or state of
+ mind. We will cover those when looking at time frames corresponding to
+ each sleep stage.
- We can associate wake stages with low-amplitude activity in the 15 to 60 Hz frequency range, called the beta band. By slowly falling asleep,
- the signal frequencies tend to decrease into the 4 to 8 Hz range, or the theta band, and to have larger amplitudes. These characteristics
- are associated with N1. N2 stage has the same characteristics, and also includes sleep spindles. They last only a few seconds and are a
- large oscillation in the 10 to 15 hz band. Because they do not occur during all of the 30 seconds period, they cannot be seen here. Stage
- N3, also called slow wave sleep, is characterized by slower waves between 0.5 and 4 Hz, known as the delta range, with large amplitudes. REM
- stage has the same characteristics as Wake stage, whereas there are low voltage high frequency activity.
+ We can associate wake stages with low-amplitude activity in the 15 to
+ 60 Hz frequency range, called the beta band. By slowly falling asleep,
+ the signal frequencies tend to decrease into the 4 to 8 Hz range, or
+ the theta band, and to have larger amplitudes. These characteristics
+ are associated with N1. N2 stage has the same characteristics, and
+ also includes sleep spindles. They last only a few seconds and are a
+ large oscillation in the 10 to 15 hz band. Because they do not occur
+ during all of the 30 seconds period, they cannot be seen here. Stage
+ N3, also called slow wave sleep, is characterized by slower waves
+ between 0.5 and 4 Hz, known as the delta range, with large amplitudes.
+ REM stage has the same characteristics as Wake stage, whereas there
+ are low voltage high frequency activity.
Wanna know how accurate this data is?
diff --git a/web/src/views/sleep-analysis/spectrogram_scrollytelling.js b/web/src/views/sleep-analysis/spectrogram_scrollytelling.js
new file mode 100644
index 00000000..0b72de38
--- /dev/null
+++ b/web/src/views/sleep-analysis/spectrogram_scrollytelling.js
@@ -0,0 +1,169 @@
+import React, { useState } from 'react';
+import { Container, Card, CardBody } from 'reactstrap';
+
+import { HYPNOGRAM_KEY } from '../../d3/spectrogram/constants';
+import createSpectrogram, {
+ spectrogramCallbacks,
+} from '../../d3/spectrogram/spectrogram';
+import D3ComponentScrollyTelling from '../../components/d3component_scrollytelling';
+import WaypointDirection from '../../components/waypoint_direction';
+
+import { useCSVData } from '../../hooks/api_hooks';
+
+import hypnogramDataSleepEDFPath from 'assets/data/hypnogram.csv';
+import spectrogramData from 'assets/data/spectrograms.json';
+
+const SpectrogramScrollyTelling = () => {
+ const csvDataSleepEDF = useCSVData(hypnogramDataSleepEDFPath);
+ const spectrogramWithHypnogramData = csvDataSleepEDF
+ ? { ...spectrogramData, [HYPNOGRAM_KEY]: csvDataSleepEDF }
+ : null;
+ const [isInitialized, setIsInitialized] = useState(false);
+
+ return (
+
+
+
+
+
+
+
+ Here is represented spectrograms of both your EEG channels.
+ Spectrograms can be viewed as if we took all of your nights signal,
+ we’ve separated it in contiguous 30 seconds chunks, stacked then
+ horizontally and to which we’ve applied the fast fourier transform.
+ We then have, for each 30 seconds epoch, the corresponding
+ amplitudes for each frequency that makes up the signal, hence the
+ spectra.
+
+
+ We then converted the scale to logarithmic, to better see the
+ differences in the spectrums. We then speak of signal power instead
+ of signal amplitude, because we look at the spectrums in a
+ logarithmic scale.
+
+ How to read it?
+
+ Red therefore means that in that 30 seconds time frame, that
+ particular frequency had a big amplitude. Green means that you had
+ that frequency with a lower amplitude. Dark blue means that you
+ didn’t have that frequency in the signal.
+
+
+ To get a better understanding at how spectrograms work, you can{' '}
+
+ check out this example
+ {' '}
+ that decomposes sound frequency from your microphone.
+
+
+
+
+
+
+
+ Generally, when talking about brain waves, we group certain
+ frequencies together into bands. There are overall five frequency
+ bands, where each has a general associated behaviour, or state of
+ mind. We will cover those when looking at time frames corresponding
+ to each sleep stage.
+
+
+
+ {isInitialized && (
+
+
+
+
+ We can associate wake stages with low-amplitude activity in the 15
+ to 60 Hz frequency range, called the beta band. [6]
+
+
+
+ {isInitialized && (
+
+
+
+
+ By slowly falling asleep, the signal frequencies tend to decrease
+ into the 4 to 8 Hz range, or the theta band, and to have larger
+ amplitudes. These characteristics are associated with N1.
+
+
+
+ {isInitialized && (
+
+
+
+
+ N2 stage has the same characteristics as N1, and also includes sleep
+ spindles. They last only a few seconds and are a large oscillation
+ in the 10 to 15 hz band. Because they do not occur during all of the
+ 30 seconds period, they cannot be seen here. [6]
+
+
+
+ {isInitialized && (
+
+
+
+
+ Stage N3, also called slow wave sleep, is characterized by slower
+ waves between 0.5 and 4 Hz, known as the delta range, with large
+ amplitudes. [6]
+
+
+
+ {isInitialized && (
+
+
+
+
+ REM stage has the same characteristics as Wake stage, whereas there
+ are low voltage high frequency activity. [6]
+
+
+
+
+
+
+ );
+};
+
+export default SpectrogramScrollyTelling;
diff --git a/web/src/views/sleep-analysis/stacked_bar_chart_scrollytelling.js b/web/src/views/sleep-analysis/stacked_bar_chart_scrollytelling.js
index 64f0703b..97e13c0e 100644
--- a/web/src/views/sleep-analysis/stacked_bar_chart_scrollytelling.js
+++ b/web/src/views/sleep-analysis/stacked_bar_chart_scrollytelling.js
@@ -3,7 +3,7 @@ import { Container, Card, CardBody } from 'reactstrap';
import hypnogramCSVPath from 'assets/data/hypnogram.csv';
-import D3Component from 'components/d3component';
+import D3ComponentScrollyTelling from 'components/d3component_scrollytelling';
import WaypointDirection from 'components/waypoint_direction';
import createEvolvingChart, {
@@ -17,44 +17,65 @@ import { useCSVData } from 'hooks/api_hooks';
const StackedBarChartScrollyTelling = () => {
const csvData = useCSVData(hypnogramCSVPath);
const [isInitialized, setIsInitialized] = useState(false);
- const createEvolvingChartCallback = (svg, data) => {
- if (!isInitialized) {
- setIsInitialized(true);
- createEvolvingChart(svg, data);
- }
- };
return (
-
- We can see that each colored block represents a part of your night. They are ordered from bed time to out of bed timestamps you’ve written
- in your journal. Each color is associated with a specific sleep stage. You went to bed at 12:22 am and you got out of bed at 9:47 am,
- which adds up to 9 hours and 25 minutes of time spent in bed. Of this total time, you spent 7 hours and 27 minutes actually sleeping. You
- first fell asleep at XX:XX, to which we will refer to as sleep onset. The last non wake block ended at XX:XX, which can also be referred
- to as sleep offset. During that night's sleep, you went through each of the 5 five stages. Let's try to see a little better what happened
- about each of them.
+ We can see that each colored block represents a part of your night.
+ They are ordered from bed time to out of bed timestamps you’ve
+ written in your journal. Each color is associated with a specific
+ sleep stage. You went to bed at 12:22 am and you got out of bed at
+ 9:47 am, which adds up to 9 hours and 25 minutes of time spent in
+ bed. Of this total time, you spent 7 hours and 27 minutes actually
+ sleeping. You first fell asleep at XX:XX, to which we will refer to
+ as sleep onset. The last non wake block ended at XX:XX, which can
+ also be referred to as sleep offset. During that night's sleep, you
+ went through each of the 5 five stages. Let's try to see a little
+ better what happened about each of them.
- {isInitialized &&
- Wake stage is of course the stage we want to minimize when in bed. It can be decomposed into two parts:
+
+ Wake stage is of course the stage we want to minimize when in bed.
+ It can be decomposed into two parts:
+
- Sleep latency : Time spent before falling asleep, which corresponds to X minutes in your case.
- Wake after sleep onset (WASO): Time spent awake after first falling asleep and before waking up.
{' '}
- For healthy adults, it is normal to experience small awakenings during the night. Unprovoked awakenings are mostly during or after REM
- stages.{' '}
+ Sleep latency : Time spent before falling asleep, which
+ corresponds to X minutes in your case.{' '}
+
+
+ {' '}
+ Wake after sleep onset (WASO): Time spent awake after first
+ falling asleep and before waking up.{' '}
+
+
+ {' '}
+ For healthy adults, it is normal to experience small awakenings
+ during the night. Unprovoked awakenings are mostly during or after
+ REM stages.{' '}
@@ -63,32 +84,45 @@ const StackedBarChartScrollyTelling = () => {
- REM stage stands for “Rapid Eyes Movements” and is also known as “paradoxical sleep”. It is associated with dreaming and,
- as the National Sleep Foundation says, “the brain is awake and body paralyzed.”
+ REM stage stands for “Rapid Eyes Movements” and is
+ also known as “paradoxical sleep”. It is associated with dreaming
+ and, as the National Sleep Foundation says,{' '}
+ “the brain is awake and body paralyzed.”
- N1 stage is associated with that drowsy feeling before falling asleep. Most people wouldn’t say they fell asleep if
+ N1 stage is associated with that drowsy feeling
+ before falling asleep. Most people wouldn’t say they fell asleep if
they’ve been woken up from N1 sleep.
- N2 stage still corresponds to a light sleep, but where the muscle activity decreases more, and the eyes have stopped
+ N2 stage still corresponds to a light sleep, but
+ where the muscle activity decreases more, and the eyes have stopped
moving. It is called, along with N1, light sleep .
- N3 stage is when you are deeply asleep, hence it’s also called deep sleep , or sometimes{' '}
- slow wave sleep, and is the most difficult to wake up from. It is during those stages that your cells get repaired, and
- that tissue grows. But how much time did you spend in each stage during the whole night?
+ N3 stage is when you are deeply asleep, hence it’s
+ also called deep sleep , or sometimes{' '}
+ slow wave sleep, and is the most difficult to wake
+ up from. It is during those stages that your cells get repaired, and
+ that tissue grows. But how much time did you spend in each stage
+ during the whole night?
- {isInitialized &&
- From here, we can look at your sleep efficiency, which is the proportion of time spent asleep over the overall time spent in bed. In your
- case, it corresponds to 79%, or 7h27.
+ From here, we can look at your sleep efficiency, which is the
+ proportion of time spent asleep over the overall time spent in bed.
+ In your case, it corresponds to 79%, or 7h27.
@@ -96,9 +130,11 @@ const StackedBarChartScrollyTelling = () => {
- We are currently looking at your in bed sleep stage proportions. Wake time may be overrepresented, because it includes your sleep latency
- and the time you spent in bed after waking up. In order to look at your actual stage proportions, we must cut them out from wake time to
- only keep WASO.
+ We are currently looking at your in bed sleep stage proportions.
+ Wake time may be overrepresented, because it includes your sleep
+ latency and the time you spent in bed after waking up. In order to
+ look at your actual stage proportions, we must cut them out from
+ wake time to only keep WASO.
@@ -106,19 +142,26 @@ const StackedBarChartScrollyTelling = () => {
- We can see that the most prominent sleep stage is N2, which in your case corresponds to XXXX. How does your night compare to other
+ We can see that the most prominent sleep stage is N2, which in your
+ case corresponds to XXXX. How does your night compare to other
people’s night?
- {isInitialized &&
- As a rule of thumb, adults approximately stay 5% of their total sleep time in N1; 50% in N2; and 20% is in N3. The remaining 25% is REM
- stage sleep.
+ As a rule of thumb, adults approximately stay 5% of their total
+ sleep time in N1; 50% in N2; and 20% is in N3. The remaining 25% is
+ REM stage sleep.