[+] Hold down E to full screen image

This commit is contained in:
Hykilpikonna
2021-11-25 11:27:44 -05:00
parent 0b9838b51b
commit 98b4d92781
3 changed files with 21 additions and 6 deletions
+1
View File
@@ -233,6 +233,7 @@ def report_histograms(sample: Sample) -> None:
x = [f.data for f in sample.frequencies]
title = f'COVID-related posting frequency for {sample.name}'
report_histogram(x, f'freq/{sample.name}-hist-outliers.png', title, False, 100)
x = [p for p in x if p > 0.0005]
report_histogram(x, f'freq/{sample.name}-hist.png', title, True)
x = [f.data for f in sample.popularity_ratios]
+5 -3
View File
@@ -16,10 +16,12 @@ First, we analyzed how frequently the users in these three datasets are posing a
The `eng-news` sample has the lowest number of users who didn't have COVID-related posts, the `500-rand` sample has the highest, while `500-pop` sits in between. This large difference between `eng-news` and the rest can be explained by the news channels' obligation to report news, which includes news about new outbreaks, progress of vaccination, new cross-border policies, etc. Also, we observed that `500-pop` has much more users who posted COVID-related content than `500-rand`, while they have similar amounts of users posting less than 1%. This finding might be explained by how influential people have more incentive to express their support toward slowing the spread of the pandemic than regular users, which doesn't require frequent posting like news channels.
We might graph the frequencies on a histogram to gain more insight: (You can click on the images to enlarge them, and hold down E to view full screen).
<div class="image-row">
<div><img src="/freq/500-pop-hist.png" alt="hist"></div>
<div><img src="/freq/500-rand-hist.png" alt="hist"></div>
<div><img src="/freq/eng-news-hist.png" alt="hist"></div>
<div><img src="/freq/500-pop-hist-outliers.png" alt="hist"></div>
<div><img src="/freq/500-rand-hist-outliers.png" alt="hist"></div>
<div><img src="/freq/eng-news-hist-outliers.png" alt="hist"></div>
</div>
## COVID-19 Popularity Ratios
+15 -3
View File
@@ -70,6 +70,14 @@
img.clickable {
cursor: pointer;
}
#modal {
transition: all 0.25s ease;
}
#modal.zoom {
background-size: contain !important;
}
</style>
</head>
<body>
@@ -89,7 +97,7 @@ document.getElementById('content').innerHTML =
marked.parse(markdown);
// Make images clickable
// Credit: https://stackoverflow.com/a/50430187/7346633
// Improved from: https://stackoverflow.com/a/50430187/7346633
body = $('body')
$('img').addClass('clickable').click(function() {
const src = $(this).attr('src');
@@ -100,7 +108,7 @@ $('img').addClass('clickable').click(function() {
body.off('keyup.modal-close');
}
modal = $('<div>').css({
modal = $('<div id="modal">').css({
background: 'RGBA(0,0,0,.5) url(' + src + ') no-repeat center',
backgroundSize: 'auto',
width: '100vw',
@@ -114,10 +122,14 @@ $('img').addClass('clickable').click(function() {
removeModal();
}).appendTo('body');
//handling ESC
// Handling keyboard shortcuts
body.on('keyup.modal-close', (e) => {
if (e.key === 'Escape') removeModal();
if (e.key === 'e') modal.removeClass('zoom')
});
body.on('keydown.modal-close', (e) => {
if (e.key === 'e') modal.addClass('zoom')
})
});
</script>