From c34396527c3900b160ac8017cb10d1511f27f5de Mon Sep 17 00:00:00 2001 From: eAlasdair Date: Wed, 27 Nov 2019 11:25:36 +1300 Subject: [PATCH 01/16] add initial file structure --- .../interactives/content/en/interactives.yaml | 2 ++ .../content/structure/interactives.yaml | 4 ++++ csfieldguide/package.json | 1 + .../static/interactives/data-size/README.md | 7 +++++++ .../interactives/data-size/js/data-size.js | 0 .../static/interactives/data-size/package.json | 8 ++++++++ .../interactives/data-size/scss/data-size.scss | 4 ++++ .../templates/interactives/data-size.html | 18 ++++++++++++++++++ 8 files changed, 44 insertions(+) create mode 100644 csfieldguide/static/interactives/data-size/README.md create mode 100644 csfieldguide/static/interactives/data-size/js/data-size.js create mode 100644 csfieldguide/static/interactives/data-size/package.json create mode 100644 csfieldguide/static/interactives/data-size/scss/data-size.scss create mode 100644 csfieldguide/templates/interactives/data-size.html diff --git a/csfieldguide/interactives/content/en/interactives.yaml b/csfieldguide/interactives/content/en/interactives.yaml index cb35ccedc0..0b39cd9f78 100644 --- a/csfieldguide/interactives/content/en/interactives.yaml +++ b/csfieldguide/interactives/content/en/interactives.yaml @@ -48,6 +48,8 @@ confusing-error: name: Confusing Error data-bias: name: Data Bias +data-size: + name: Data Size data-visualisation: name: Data Visualisation date-picker: diff --git a/csfieldguide/interactives/content/structure/interactives.yaml b/csfieldguide/interactives/content/structure/interactives.yaml index b84a97cd91..02a1a9afb1 100644 --- a/csfieldguide/interactives/content/structure/interactives.yaml +++ b/csfieldguide/interactives/content/structure/interactives.yaml @@ -115,6 +115,10 @@ data-bias: languages: en: interactives/data-bias.html is_interactive: true +data-size: + languages: + en: interactives/data-size.html + is_interactive: true data-visualisation: languages: en: interactives/data-visualisation.html diff --git a/csfieldguide/package.json b/csfieldguide/package.json index 5c5b6594a3..60b61a063e 100644 --- a/csfieldguide/package.json +++ b/csfieldguide/package.json @@ -24,6 +24,7 @@ "csfg-interactive-cmy-mixer": "file:./static/interactives/cmy-mixer/", "csfg-interactive-colour-matcher": "file:./static/interactives/colour-matcher/", "csfg-interactive-data-bias": "file:./static/interactives/data-bias/", + "csfg-interactive-data-size": "file:./static/interactives/data-size/", "csfg-interactive-data-visualisation": "file:./static/interactives/data-visualisation/", "csfg-interactive-frequency-anaylsis": "file:./static/interactives/frequency-analysis/", "csfg-interactive-jpeg-compression": "file:./static/interactives/jpeg-compression/", diff --git a/csfieldguide/static/interactives/data-size/README.md b/csfieldguide/static/interactives/data-size/README.md new file mode 100644 index 0000000000..940853f677 --- /dev/null +++ b/csfieldguide/static/interactives/data-size/README.md @@ -0,0 +1,7 @@ +# Data Size interactive + +## TODO + +- this interactive +- this README +- add original authors to commcontribs diff --git a/csfieldguide/static/interactives/data-size/js/data-size.js b/csfieldguide/static/interactives/data-size/js/data-size.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/csfieldguide/static/interactives/data-size/package.json b/csfieldguide/static/interactives/data-size/package.json new file mode 100644 index 0000000000..8686fa456f --- /dev/null +++ b/csfieldguide/static/interactives/data-size/package.json @@ -0,0 +1,8 @@ +{ + "name": "csfg-interactive-data-size", + "version": "1.0.0", + "private": true, + "dependencies": { + "dragula": "3.7.2" + } +} diff --git a/csfieldguide/static/interactives/data-size/scss/data-size.scss b/csfieldguide/static/interactives/data-size/scss/data-size.scss new file mode 100644 index 0000000000..1a1b6a6506 --- /dev/null +++ b/csfieldguide/static/interactives/data-size/scss/data-size.scss @@ -0,0 +1,4 @@ +@import "node_modules/dragula/dist/dragula"; +@import "node_modules/bootstrap/scss/functions"; +@import "node_modules/bootstrap/scss/variables"; +@import "node_modules/bootstrap/scss/mixins"; diff --git a/csfieldguide/templates/interactives/data-size.html b/csfieldguide/templates/interactives/data-size.html new file mode 100644 index 0000000000..a37d10f4da --- /dev/null +++ b/csfieldguide/templates/interactives/data-size.html @@ -0,0 +1,18 @@ +{% extends interactive_mode_template %} + +{% load i18n %} +{% load static %} + +{% block html %} +
+

{% trans "Data Size" %}

+
+{% endblock html %} + +{% block css %} + +{% endblock css %} + +{% block js %} + +{% endblock js %} \ No newline at end of file From 5038ea7336a43faf28655da8cbdbfa9b406468bd Mon Sep 17 00:00:00 2001 From: eAlasdair Date: Thu, 28 Nov 2019 12:27:53 +1300 Subject: [PATCH 02/16] add sorting logic, start on bar chart --- .../interactives/data-size/js/data-size.js | 167 ++++++++++++++++++ .../interactives/data-size/package.json | 3 +- .../data-size/scss/data-size.scss | 80 +++++++++ .../templates/interactives/data-size.html | 129 +++++++++++++- 4 files changed, 376 insertions(+), 3 deletions(-) diff --git a/csfieldguide/static/interactives/data-size/js/data-size.js b/csfieldguide/static/interactives/data-size/js/data-size.js index e69de29bb2..5055ea8f3d 100644 --- a/csfieldguide/static/interactives/data-size/js/data-size.js +++ b/csfieldguide/static/interactives/data-size/js/data-size.js @@ -0,0 +1,167 @@ +const DRAGULA = require('dragula'); +const CHART = require('chart.js'); + +const DATA_SIZES = { // HTML size datas in order + 'Bit' : gettext("Bit"), + 'Byte' : gettext("Byte"), + 'Kilobyte': gettext("Kilobyte"), + 'Megabyte': gettext("Megabyte"), + 'Gigabyte': gettext("Gigabyte"), + 'Terabyte': gettext("Terabyte"), + 'Petabyte': gettext("Petabyte"), + 'Exabyte' : gettext("Exabyte") +}; +const DATA_VALUES = [ // Number of bytes in each value in order + 0.125, + 1, + 1000, + 1000000, + 1000000000, + 1000000000000, + 1000000000000000, + 1000000000000000000 +]; + +const TIMEOUT = 2000; + +const TXT_CORRECT_ORDER = gettext("The boxes are in order!"); +const TXT_INCORRECT_ORDER = gettext("The boxes are not in order! Try again"); + +var sizeChart; +var sizeChartData; + +$(document).ready(function() { + shuffleBoxes(); + + var containerList = $('.dashed-box').toArray(); + var drake = DRAGULA(containerList); + drake.on('drop', (div, target, source) => { + // When an image is dropped on top of another image + if (target.children.length == 2) { + source.appendChild(target.children[0]); + } + }); + + $('#submit-button').on('click', submit); + $('#continue-button').on('click', nextPhase); +}); + +/** + * Checks if each box is where it should be if they were in order. Highlights accordingly + */ +function submit() { + $('#status-text').html(''); + $('.dashed-box').each(function() { + var box = $(this); + var child = box.children().eq(0); + if (box.attr('data-size') == child.attr('id')) { + box.removeClass('bg-danger'); + } else { + box.addClass('bg-danger'); + } + }); + if ($('.bg-danger').length > 0) { + $('#status-text').html('' + TXT_INCORRECT_ORDER + ''); + } else { + $('#status-text').html('' + TXT_CORRECT_ORDER + ''); + $('#submit-button').addClass('d-none'); + $('#continue-button').removeClass('d-none'); + } +} + +/** + * TODO More functionality to be added + */ +function nextPhase() { + setUpForBarChart(); +} + +/** + * + */ +function setUpForBarChart() { + $('#continue-button').prop('disabled', true).fadeOut(); + $('#status-text').fadeOut(revealBarChart); +} + +function revealBarChart() { + if (sizeChart) { + sizeChart.destroy(); + } + var canvas = $('#sizeChart'); + canvas.attr('width', Math.min(1000, 0.8 * $( window ).width())); + canvas.attr('height', canvas.attr('width') / 2); + sizeChartData = []; + sizeChart = new CHART.Chart(canvas, { + type: 'bar', + data: sizeChartData, + options: { + responsive: true, + legend: { + display: false + }, + title: { + display: true, + text: 'TEMPRelative sizes' + }, + scales: { + yAxes: [{ + display: true, + ticks: { + beginAtZero: true, + suggestedMax: 1 + } + }] + } + } + }); + setTimeout(function() {revealBar(0)}, 1000); +} + +/** + * Recursively reveals bars (and hides respective size) in the sizes chart until there are no more. + */ +function revealBar(n) { + if (n < DATA_SIZES.length) { + setTimeout(function() {revealBar(n+1)}, TIMEOUT); + var label = DATA_SIZES[n]; + sizeChartData.labels.push(label); + sizeChartData.datasets[0].data.push(DATA_VALUES[Object.keys(DATA_SIZES)[n]]); + sizeChart.update(); + } +} + +/** + * Shuffles the order of the size boxes + */ +function shuffleBoxes() { + var newOrder = Object.keys(DATA_SIZES)//shuffle(Object.keys(DATA_SIZES)); + var boxes = $('.dashed-box'); + for (var i=0; i < newOrder.length; i++) { + $('#' + newOrder[i]).appendTo(boxes.eq(i)); + } +} + +/** + * Returns a shuffled copy of the given array. + * + * Shuffle function adapted from https://bost.ocks.org/mike/shuffle + */ +function shuffle(array) { + var clone = array.slice(0); + var elementIndex = clone.length; + var randomIndex; + var currentElement; + + while (elementIndex) { + // Pick a remaining element + randomIndex = Math.floor(Math.random() * elementIndex--); + + // And swap it with the current element + currentElement = clone[elementIndex]; + clone[elementIndex] = clone[randomIndex]; + clone[randomIndex ] = currentElement; + } + + return clone; +} diff --git a/csfieldguide/static/interactives/data-size/package.json b/csfieldguide/static/interactives/data-size/package.json index 8686fa456f..c13c76d077 100644 --- a/csfieldguide/static/interactives/data-size/package.json +++ b/csfieldguide/static/interactives/data-size/package.json @@ -3,6 +3,7 @@ "version": "1.0.0", "private": true, "dependencies": { - "dragula": "3.7.2" + "dragula": "3.7.2", + "chart.js": "2.9.3" } } diff --git a/csfieldguide/static/interactives/data-size/scss/data-size.scss b/csfieldguide/static/interactives/data-size/scss/data-size.scss index 1a1b6a6506..7f9998394f 100644 --- a/csfieldguide/static/interactives/data-size/scss/data-size.scss +++ b/csfieldguide/static/interactives/data-size/scss/data-size.scss @@ -2,3 +2,83 @@ @import "node_modules/bootstrap/scss/functions"; @import "node_modules/bootstrap/scss/variables"; @import "node_modules/bootstrap/scss/mixins"; + +.dashed-box { + background-color: #ffffff; + border: 2px dashed #777777; +} + +.square { + margin: 0.2em; + $box-size: 30px; + width: $box-size; + height: $box-size; + max-width: $box-size; + @each $size, $width in $container-max-widths { + @include media-breakpoint-only($size) { + $box-size: $width / 10; + width: $box-size; + height: $box-size; + max-width: $box-size; + } + } +} + +.size-box { + touch-action: none; + height: 100%; + width: 100%; + overflow: hidden; + display: none; + position: relative; + &:last-child { + display: block; + } + cursor: grab; + &.gu-mirror { + cursor: grabbing; + } +} + +.box-image { + height: 100%; + width: 100%; + padding: 2px; + overflow: hidden; + user-select: none; + position: absolute; + z-index: 1; +} + +.box-text { + height: 100%; + width: 100%; + overflow: hidden; + user-select: none; + position: absolute; + z-index: 2; +} + +.unit { + padding: 0px; + font-size: 3rem; +} + +.name { + position: absolute; + bottom: 3px; +} + +.txt-red { + color: red; +} + +.txt-grn { + color: green; +} + +#sizeChart { + position: relative; + margin: auto; + max-width: 1000px; +} \ No newline at end of file diff --git a/csfieldguide/templates/interactives/data-size.html b/csfieldguide/templates/interactives/data-size.html index a37d10f4da..db914528dc 100644 --- a/csfieldguide/templates/interactives/data-size.html +++ b/csfieldguide/templates/interactives/data-size.html @@ -4,8 +4,133 @@ {% load static %} {% block html %} -
-

{% trans "Data Size" %}

+
+

{% trans "Data Size" %}

+

{% trans "Arrange the units by size, smallest to largest." %}

+
+
+ +
+
+ +
+
+ + b +
+
+ {% trans 'Bit' %} +
+
+
+
+ +
+
+ +
+
+ B +
+
+ {% trans 'Byte' %} +
+
+
+
+ +
+
+ +
+
+ KB +
+
+ {% trans 'Kilobyte' %} +
+
+
+
+ +
+
+ +
+
+ MB +
+
+ {% trans 'Megabyte' %} +
+
+
+
+ +
+
+ +
+
+ GB +
+
+ {% trans 'Gigabyte' %} +
+
+
+
+ +
+
+ +
+
+ TB +
+
+ {% trans 'Terabyte' %} +
+
+
+
+ +
+
+ +
+
+ PB +
+
+ {% trans 'Petabyte' %} +
+
+
+
+ +
+
+ +
+
+ EB +
+
+ {% trans 'Exabyte' %} +
+
+
+
+ +
+
+
+ + +
+
+
{% endblock html %} From 5ff7a8c4f9e16585c898d81cc2a72bd19494c17f Mon Sep 17 00:00:00 2001 From: eAlasdair Date: Thu, 28 Nov 2019 12:45:16 +1300 Subject: [PATCH 03/16] fix bar chart, kinda --- .../interactives/data-size/js/data-size.js | 21 ++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/csfieldguide/static/interactives/data-size/js/data-size.js b/csfieldguide/static/interactives/data-size/js/data-size.js index 5055ea8f3d..bfbe24e839 100644 --- a/csfieldguide/static/interactives/data-size/js/data-size.js +++ b/csfieldguide/static/interactives/data-size/js/data-size.js @@ -91,7 +91,14 @@ function revealBarChart() { var canvas = $('#sizeChart'); canvas.attr('width', Math.min(1000, 0.8 * $( window ).width())); canvas.attr('height', canvas.attr('width') / 2); - sizeChartData = []; + sizeChartData = { + labels: [], + datasets: [{ + label: 'temporary', + backgroundColor: '#2a3da0', // Primary CSFG colour + data: [] + }] + }; sizeChart = new CHART.Chart(canvas, { type: 'bar', data: sizeChartData, @@ -115,18 +122,22 @@ function revealBarChart() { } } }); - setTimeout(function() {revealBar(0)}, 1000); + console.log('chart up'); + setTimeout(revealBar, 1000); } /** * Recursively reveals bars (and hides respective size) in the sizes chart until there are no more. */ function revealBar(n) { - if (n < DATA_SIZES.length) { + if (!n) { + n = 0; + } + if (n < Object.keys(DATA_SIZES).length) { setTimeout(function() {revealBar(n+1)}, TIMEOUT); - var label = DATA_SIZES[n]; + var label = DATA_SIZES[Object.keys(DATA_SIZES)[n]]; sizeChartData.labels.push(label); - sizeChartData.datasets[0].data.push(DATA_VALUES[Object.keys(DATA_SIZES)[n]]); + sizeChartData.datasets[0].data.push(DATA_VALUES[n]); sizeChart.update(); } } From 072e92a69c3feea5faf10c1963dc58471b9d1e30 Mon Sep 17 00:00:00 2001 From: eAlasdair Date: Thu, 28 Nov 2019 12:55:24 +1300 Subject: [PATCH 04/16] add colours and fading out of boxes --- .../interactives/data-size/js/data-size.js | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/csfieldguide/static/interactives/data-size/js/data-size.js b/csfieldguide/static/interactives/data-size/js/data-size.js index bfbe24e839..70b4b7d1c5 100644 --- a/csfieldguide/static/interactives/data-size/js/data-size.js +++ b/csfieldguide/static/interactives/data-size/js/data-size.js @@ -21,6 +21,16 @@ const DATA_VALUES = [ // Number of bytes in each value in order 1000000000000000, 1000000000000000000 ]; +const DATA_COLOURS = [ + '#8181ff', + '#ff9a54', + '#54ff9a', + '#ac88df', + '#54deff', + '#ff5454', + '#80ff25', + '#df88ce' +] const TIMEOUT = 2000; @@ -95,7 +105,7 @@ function revealBarChart() { labels: [], datasets: [{ label: 'temporary', - backgroundColor: '#2a3da0', // Primary CSFG colour + backgroundColor: [], data: [] }] }; @@ -122,7 +132,6 @@ function revealBarChart() { } } }); - console.log('chart up'); setTimeout(revealBar, 1000); } @@ -135,9 +144,10 @@ function revealBar(n) { } if (n < Object.keys(DATA_SIZES).length) { setTimeout(function() {revealBar(n+1)}, TIMEOUT); - var label = DATA_SIZES[Object.keys(DATA_SIZES)[n]]; - sizeChartData.labels.push(label); + $('#' + Object.keys(DATA_SIZES)[n]).fadeOut('slow'); + sizeChartData.labels.push(DATA_SIZES[Object.keys(DATA_SIZES)[n]]); sizeChartData.datasets[0].data.push(DATA_VALUES[n]); + sizeChartData.datasets[0].backgroundColor.push(DATA_COLOURS[n]); sizeChart.update(); } } @@ -146,7 +156,7 @@ function revealBar(n) { * Shuffles the order of the size boxes */ function shuffleBoxes() { - var newOrder = Object.keys(DATA_SIZES)//shuffle(Object.keys(DATA_SIZES)); + var newOrder = shuffle(Object.keys(DATA_SIZES)); var boxes = $('.dashed-box'); for (var i=0; i < newOrder.length; i++) { $('#' + newOrder[i]).appendTo(boxes.eq(i)); From 21b3d186524a9d2ca8fabc229784fa7189f5ffe0 Mon Sep 17 00:00:00 2001 From: eAlasdair Date: Thu, 28 Nov 2019 13:05:36 +1300 Subject: [PATCH 05/16] add newline to EOFs --- csfieldguide/static/interactives/data-size/scss/data-size.scss | 2 +- csfieldguide/templates/interactives/data-size.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/csfieldguide/static/interactives/data-size/scss/data-size.scss b/csfieldguide/static/interactives/data-size/scss/data-size.scss index 7f9998394f..53a66a27fb 100644 --- a/csfieldguide/static/interactives/data-size/scss/data-size.scss +++ b/csfieldguide/static/interactives/data-size/scss/data-size.scss @@ -81,4 +81,4 @@ position: relative; margin: auto; max-width: 1000px; -} \ No newline at end of file +} diff --git a/csfieldguide/templates/interactives/data-size.html b/csfieldguide/templates/interactives/data-size.html index db914528dc..20321b2195 100644 --- a/csfieldguide/templates/interactives/data-size.html +++ b/csfieldguide/templates/interactives/data-size.html @@ -140,4 +140,4 @@

{% trans "Arrange the units by s {% block js %} -{% endblock js %} \ No newline at end of file +{% endblock js %} From 65bfaba0b059a49e2741f97dce09957ad5a29903 Mon Sep 17 00:00:00 2001 From: eAlasdair Date: Fri, 29 Nov 2019 10:29:04 +1300 Subject: [PATCH 06/16] minor change --- csfieldguide/static/interactives/data-size/js/data-size.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/csfieldguide/static/interactives/data-size/js/data-size.js b/csfieldguide/static/interactives/data-size/js/data-size.js index 70b4b7d1c5..16455242d3 100644 --- a/csfieldguide/static/interactives/data-size/js/data-size.js +++ b/csfieldguide/static/interactives/data-size/js/data-size.js @@ -99,7 +99,7 @@ function revealBarChart() { sizeChart.destroy(); } var canvas = $('#sizeChart'); - canvas.attr('width', Math.min(1000, 0.8 * $( window ).width())); + canvas.attr('width', Math.min(1000, 0.8 * $(window).width())); canvas.attr('height', canvas.attr('width') / 2); sizeChartData = { labels: [], From bf0158001b3709a2f0974162da4a899cbe7cf827 Mon Sep 17 00:00:00 2001 From: eAlasdair Date: Tue, 3 Dec 2019 12:03:01 +1300 Subject: [PATCH 07/16] add more datas to view --- .../interactives/data-size/js/data-size.js | 95 +++++++++++-------- 1 file changed, 56 insertions(+), 39 deletions(-) diff --git a/csfieldguide/static/interactives/data-size/js/data-size.js b/csfieldguide/static/interactives/data-size/js/data-size.js index 16455242d3..f0976f483f 100644 --- a/csfieldguide/static/interactives/data-size/js/data-size.js +++ b/csfieldguide/static/interactives/data-size/js/data-size.js @@ -1,38 +1,38 @@ const DRAGULA = require('dragula'); const CHART = require('chart.js'); -const DATA_SIZES = { // HTML size datas in order - 'Bit' : gettext("Bit"), - 'Byte' : gettext("Byte"), - 'Kilobyte': gettext("Kilobyte"), - 'Megabyte': gettext("Megabyte"), - 'Gigabyte': gettext("Gigabyte"), - 'Terabyte': gettext("Terabyte"), - 'Petabyte': gettext("Petabyte"), - 'Exabyte' : gettext("Exabyte") +const DATAS = { // Data points ordered by size. + // Name (translated) , size (bytes) , colour (for graph, reflects colour of box) + 'Bit' : [gettext("1 Bit") , 0.125 , '#8181ff'], + 'Byte' : [gettext("1 Byte") , 1 , '#ff9a54'], + 'Hex' : [gettext("Hexadecimal digit") , 2 , null ], + 'Kilobyte': [gettext("1 Kilobyte") , 1 * Math.pow(10, 3) , '#54ff9a'], + 'Inter' : [gettext("This interactive") , 4.5 * Math.pow(10, 3) , null ], + 'Megabyte': [gettext("1 Megabyte") , 1 * Math.pow(10, 6) , '#ac88df'], + 'First HD': [gettext("1st HDD for home PCs"), 5 * Math.pow(10, 6) , null ], + 'CSFG' : [gettext("The CSFG") , 6.05 * Math.pow(10, 8) , null ], + 'Gigabyte': [gettext("1 Gigabyte") , 1 * Math.pow(10, 9) , '#54deff'], + 'Terabyte': [gettext("1 Terabyte") , 1 * Math.pow(10, 12), '#ff5454'], + 'SSD' : [gettext("Largest SSD") , 1 * Math.pow(10, 14), null ], + 'Petabyte': [gettext("1 Petabyte") , 1 * Math.pow(10, 15), '#80ff25'], + 'GoogEar' : [gettext("Google Earth (2016)") , 3 * Math.pow(10, 15), null ], + 'Exabyte' : [gettext("1 Exabyte") , 1 * Math.pow(10, 18), '#df88ce'], + 'Zetta' : [gettext("1 Zettabyte") , 1 * Math.pow(10, 21), null ], + 'Internet': [gettext("The internet (2020)") , 4 * Math.pow(10, 22), null ], }; -const DATA_VALUES = [ // Number of bytes in each value in order - 0.125, - 1, - 1000, - 1000000, - 1000000000, - 1000000000000, - 1000000000000000, - 1000000000000000000 +const HTML_BOXES = [ + 'Bit', + 'Byte', + 'Kilobyte', + 'Megabyte', + 'Gigabyte', + 'Terabyte', + 'Petabyte', + 'Exabyte', ]; -const DATA_COLOURS = [ - '#8181ff', - '#ff9a54', - '#54ff9a', - '#ac88df', - '#54deff', - '#ff5454', - '#80ff25', - '#df88ce' -] - -const TIMEOUT = 2000; + +const TIMEOUT = 1500; +const DEFAULT_COLOUR = '#fffd81'; const TXT_CORRECT_ORDER = gettext("The boxes are in order!"); const TXT_INCORRECT_ORDER = gettext("The boxes are not in order! Try again"); @@ -104,7 +104,7 @@ function revealBarChart() { sizeChartData = { labels: [], datasets: [{ - label: 'temporary', + label: gettext("Number of Bytes"), backgroundColor: [], data: [] }] @@ -119,7 +119,7 @@ function revealBarChart() { }, title: { display: true, - text: 'TEMPRelative sizes' + text: gettext("Estimated size of various groups of data (Bytes)") }, scales: { yAxes: [{ @@ -136,18 +136,35 @@ function revealBarChart() { } /** - * Recursively reveals bars (and hides respective size) in the sizes chart until there are no more. + * Recursively reveals bars (and hides respective box) in the sizes chart until there are no more. + * If there are more than 6 values, hides the smallest one */ function revealBar(n) { if (!n) { n = 0; } - if (n < Object.keys(DATA_SIZES).length) { + if (n < Object.keys(DATAS).length) { setTimeout(function() {revealBar(n+1)}, TIMEOUT); - $('#' + Object.keys(DATA_SIZES)[n]).fadeOut('slow'); - sizeChartData.labels.push(DATA_SIZES[Object.keys(DATA_SIZES)[n]]); - sizeChartData.datasets[0].data.push(DATA_VALUES[n]); - sizeChartData.datasets[0].backgroundColor.push(DATA_COLOURS[n]); + var maxLength = 6; + var key = Object.keys(DATAS)[n]; + var object = DATAS[key]; + var name = object[0], + size = object[1], + colour = object[2]; + if (HTML_BOXES.includes(key)) { + $('#' + key).fadeOut('slow'); + } + sizeChartData.labels.push(name); + sizeChartData.datasets[0].data.push(size); + if (colour === null) { + colour = DEFAULT_COLOUR; + } + sizeChartData.datasets[0].backgroundColor.push(colour); + if (sizeChartData.datasets[0].data.length > maxLength) { + sizeChartData.datasets[0].data.shift(); + sizeChartData.datasets[0].backgroundColor.shift(); + sizeChartData.labels.shift(); + } sizeChart.update(); } } @@ -156,7 +173,7 @@ function revealBar(n) { * Shuffles the order of the size boxes */ function shuffleBoxes() { - var newOrder = shuffle(Object.keys(DATA_SIZES)); + var newOrder = shuffle(HTML_BOXES); var boxes = $('.dashed-box'); for (var i=0; i < newOrder.length; i++) { $('#' + newOrder[i]).appendTo(boxes.eq(i)); From e43feedb2490e06308c42ededbc2db4b5083a147 Mon Sep 17 00:00:00 2001 From: eAlasdair Date: Tue, 3 Dec 2019 13:22:05 +1300 Subject: [PATCH 08/16] minor fix --- csfieldguide/static/interactives/data-size/js/data-size.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/csfieldguide/static/interactives/data-size/js/data-size.js b/csfieldguide/static/interactives/data-size/js/data-size.js index f0976f483f..eaaf44dc35 100644 --- a/csfieldguide/static/interactives/data-size/js/data-size.js +++ b/csfieldguide/static/interactives/data-size/js/data-size.js @@ -4,8 +4,8 @@ const CHART = require('chart.js'); const DATAS = { // Data points ordered by size. // Name (translated) , size (bytes) , colour (for graph, reflects colour of box) 'Bit' : [gettext("1 Bit") , 0.125 , '#8181ff'], + 'Hex' : [gettext("Hexadecimal digit") , 0.5 , null ], 'Byte' : [gettext("1 Byte") , 1 , '#ff9a54'], - 'Hex' : [gettext("Hexadecimal digit") , 2 , null ], 'Kilobyte': [gettext("1 Kilobyte") , 1 * Math.pow(10, 3) , '#54ff9a'], 'Inter' : [gettext("This interactive") , 4.5 * Math.pow(10, 3) , null ], 'Megabyte': [gettext("1 Megabyte") , 1 * Math.pow(10, 6) , '#ac88df'], @@ -13,7 +13,7 @@ const DATAS = { // Data points ordered by size. 'CSFG' : [gettext("The CSFG") , 6.05 * Math.pow(10, 8) , null ], 'Gigabyte': [gettext("1 Gigabyte") , 1 * Math.pow(10, 9) , '#54deff'], 'Terabyte': [gettext("1 Terabyte") , 1 * Math.pow(10, 12), '#ff5454'], - 'SSD' : [gettext("Largest SSD") , 1 * Math.pow(10, 14), null ], + 'SSD' : [gettext("Largest single SSD") , 1 * Math.pow(10, 14), null ], 'Petabyte': [gettext("1 Petabyte") , 1 * Math.pow(10, 15), '#80ff25'], 'GoogEar' : [gettext("Google Earth (2016)") , 3 * Math.pow(10, 15), null ], 'Exabyte' : [gettext("1 Exabyte") , 1 * Math.pow(10, 18), '#df88ce'], From 5f3340e2f171c973444e26ee1acfb98def1f4ac4 Mon Sep 17 00:00:00 2001 From: eAlasdair Date: Wed, 4 Dec 2019 10:31:41 +1300 Subject: [PATCH 09/16] simplify defining sizes --- .../interactives/data-size/js/data-size.js | 42 +++++++++++-------- 1 file changed, 25 insertions(+), 17 deletions(-) diff --git a/csfieldguide/static/interactives/data-size/js/data-size.js b/csfieldguide/static/interactives/data-size/js/data-size.js index eaaf44dc35..e9ea7406b6 100644 --- a/csfieldguide/static/interactives/data-size/js/data-size.js +++ b/csfieldguide/static/interactives/data-size/js/data-size.js @@ -1,24 +1,32 @@ const DRAGULA = require('dragula'); const CHART = require('chart.js'); +const KILO = Math.pow(10, 3), + MEGA = Math.pow(10, 6), + GIGA = Math.pow(10, 9), + TERA = Math.pow(10, 12), + PETA = Math.pow(10, 15), + EXA = Math.pow(10, 18), + ZETTA = Math.pow(10, 21); + const DATAS = { // Data points ordered by size. - // Name (translated) , size (bytes) , colour (for graph, reflects colour of box) - 'Bit' : [gettext("1 Bit") , 0.125 , '#8181ff'], - 'Hex' : [gettext("Hexadecimal digit") , 0.5 , null ], - 'Byte' : [gettext("1 Byte") , 1 , '#ff9a54'], - 'Kilobyte': [gettext("1 Kilobyte") , 1 * Math.pow(10, 3) , '#54ff9a'], - 'Inter' : [gettext("This interactive") , 4.5 * Math.pow(10, 3) , null ], - 'Megabyte': [gettext("1 Megabyte") , 1 * Math.pow(10, 6) , '#ac88df'], - 'First HD': [gettext("1st HDD for home PCs"), 5 * Math.pow(10, 6) , null ], - 'CSFG' : [gettext("The CSFG") , 6.05 * Math.pow(10, 8) , null ], - 'Gigabyte': [gettext("1 Gigabyte") , 1 * Math.pow(10, 9) , '#54deff'], - 'Terabyte': [gettext("1 Terabyte") , 1 * Math.pow(10, 12), '#ff5454'], - 'SSD' : [gettext("Largest single SSD") , 1 * Math.pow(10, 14), null ], - 'Petabyte': [gettext("1 Petabyte") , 1 * Math.pow(10, 15), '#80ff25'], - 'GoogEar' : [gettext("Google Earth (2016)") , 3 * Math.pow(10, 15), null ], - 'Exabyte' : [gettext("1 Exabyte") , 1 * Math.pow(10, 18), '#df88ce'], - 'Zetta' : [gettext("1 Zettabyte") , 1 * Math.pow(10, 21), null ], - 'Internet': [gettext("The internet (2020)") , 4 * Math.pow(10, 22), null ], + // Name (translated) , size (bytes), colour (for graph, reflects colour of box) + 'Bit' : [gettext("1 Bit") , 0.125 , '#8181ff'], + 'Hex' : [gettext("Hexadecimal digit") , 0.5 , null ], + 'Byte' : [gettext("1 Byte") , 1 , '#ff9a54'], + 'Kilobyte': [gettext("1 Kilobyte") , 1 * KILO , '#54ff9a'], + 'Inter' : [gettext("This interactive") , 4.5 * KILO , null ], + 'Megabyte': [gettext("1 Megabyte") , 1 * MEGA , '#ac88df'], + 'First HD': [gettext("1st HDD for home PCs"), 5 * MEGA , null ], + 'CSFG' : [gettext("The CSFG") , 605 * MEGA , null ], + 'Gigabyte': [gettext("1 Gigabyte") , 1 * GIGA , '#54deff'], + 'Terabyte': [gettext("1 Terabyte") , 1 * TERA , '#ff5454'], + 'SSD' : [gettext("Largest single SSD") , 100 * TERA , null ], + 'Petabyte': [gettext("1 Petabyte") , 1 * PETA , '#80ff25'], + 'GoogEar' : [gettext("Google Earth (2016)") , 3 * PETA , null ], + 'Exabyte' : [gettext("1 Exabyte") , 1 * EXA , '#df88ce'], + 'Zetta' : [gettext("1 Zettabyte") , 1 * ZETTA , null ], + 'Internet': [gettext("The internet (2020)") , 40 * ZETTA , null ], }; const HTML_BOXES = [ 'Bit', From f1149181de937b4f2c6a6304e39a52c052aac474 Mon Sep 17 00:00:00 2001 From: eAlasdair Date: Wed, 11 Dec 2019 15:34:15 +1300 Subject: [PATCH 10/16] WIP experiments with scale sliders --- .../interactives/data-size/js/data-size.js | 66 +++++++++++++++++-- .../interactives/data-size/package.json | 3 +- .../data-size/scss/data-size.scss | 11 ++++ .../templates/interactives/data-size.html | 1 + 4 files changed, 76 insertions(+), 5 deletions(-) diff --git a/csfieldguide/static/interactives/data-size/js/data-size.js b/csfieldguide/static/interactives/data-size/js/data-size.js index e9ea7406b6..150f9b706b 100644 --- a/csfieldguide/static/interactives/data-size/js/data-size.js +++ b/csfieldguide/static/interactives/data-size/js/data-size.js @@ -1,5 +1,6 @@ const DRAGULA = require('dragula'); const CHART = require('chart.js'); +const NOUISLIDER = require('nouislider'); const KILO = Math.pow(10, 3), MEGA = Math.pow(10, 6), @@ -15,7 +16,7 @@ const DATAS = { // Data points ordered by size. 'Hex' : [gettext("Hexadecimal digit") , 0.5 , null ], 'Byte' : [gettext("1 Byte") , 1 , '#ff9a54'], 'Kilobyte': [gettext("1 Kilobyte") , 1 * KILO , '#54ff9a'], - 'Inter' : [gettext("This interactive") , 4.5 * KILO , null ], + 'Inter' : [gettext("This interactive") , 4.5 * KILO , null ], //TBC 'Megabyte': [gettext("1 Megabyte") , 1 * MEGA , '#ac88df'], 'First HD': [gettext("1st HDD for home PCs"), 5 * MEGA , null ], 'CSFG' : [gettext("The CSFG") , 605 * MEGA , null ], @@ -39,17 +40,26 @@ const HTML_BOXES = [ 'Exabyte', ]; -const TIMEOUT = 1500; +const TIMEOUT = 1000; const DEFAULT_COLOUR = '#fffd81'; const TXT_CORRECT_ORDER = gettext("The boxes are in order!"); const TXT_INCORRECT_ORDER = gettext("The boxes are not in order! Try again"); +const TXT_SLIDER = gettext("Drag the slider to adjust the scale."); var sizeChart; var sizeChartData; +var phase; +const PHASES = { + SORT: 1, + GRAPH: 2, + SLIDER: 3, +} + $(document).ready(function() { - shuffleBoxes(); + phase = PHASES.SORT; + //shuffleBoxes(); var containerList = $('.dashed-box').toArray(); var drake = DRAGULA(containerList); @@ -91,7 +101,12 @@ function submit() { * TODO More functionality to be added */ function nextPhase() { - setUpForBarChart(); + phase++; + if (phase == PHASES.GRAPH) { + setUpForBarChart(); + } else if (PHASES.SLIDER) { + setUpForSlider(); + } } /** @@ -140,6 +155,7 @@ function revealBarChart() { } } }); + createSlider(); setTimeout(revealBar, 1000); } @@ -174,7 +190,49 @@ function revealBar(n) { sizeChartData.labels.shift(); } sizeChart.update(); + } else { + nextPhase(); + } +} + +function createSlider() { + var div = $('#slider')[0]; + + // Dynamic stepping inspired by: https://github.com/leongersen/noUiSlider/issues/140#issuecomment-486832717 + const max = DATAS['Internet'][1]; + var range = { + "min": [0], + "max": [max] } + var increment; + + for (var percentage=1; percentage < 100; percentage++) { + increment = Math.pow(percentage, 10) * max / (Math.pow(100, 10)); + console.log(increment); + range[percentage.toString() + '%'] = [increment]; + } + console.log('calculated'); + + NOUISLIDER.create(div, { + start: 50, + padding: [1, 0], + range: range, + pips: { + mode: 'count', + values: 11, + density: 10, + } + }); + + console.log('created'); +} + +function setUpForSlider() { + $('#sorted-boxes').fadeOut(400, function() { + this.classList.remove('d-flex'); // So it stays faded out + $('#slider').fadeIn(); + $('#description').html(TXT_SLIDER); + }); } /** diff --git a/csfieldguide/static/interactives/data-size/package.json b/csfieldguide/static/interactives/data-size/package.json index c13c76d077..beab3bdbe3 100644 --- a/csfieldguide/static/interactives/data-size/package.json +++ b/csfieldguide/static/interactives/data-size/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "dragula": "3.7.2", - "chart.js": "2.9.3" + "chart.js": "2.9.3", + "nouislider": "14.1.0" } } diff --git a/csfieldguide/static/interactives/data-size/scss/data-size.scss b/csfieldguide/static/interactives/data-size/scss/data-size.scss index 53a66a27fb..583be26197 100644 --- a/csfieldguide/static/interactives/data-size/scss/data-size.scss +++ b/csfieldguide/static/interactives/data-size/scss/data-size.scss @@ -2,6 +2,17 @@ @import "node_modules/bootstrap/scss/functions"; @import "node_modules/bootstrap/scss/variables"; @import "node_modules/bootstrap/scss/mixins"; +@import "node_modules/nouislider/distribute/nouislider"; + +#slider { + margin: auto; + width: 800px; + display: none; +} + +#number-line { + height: 120px; +} .dashed-box { background-color: #ffffff; diff --git a/csfieldguide/templates/interactives/data-size.html b/csfieldguide/templates/interactives/data-size.html index 20321b2195..c0e7152c24 100644 --- a/csfieldguide/templates/interactives/data-size.html +++ b/csfieldguide/templates/interactives/data-size.html @@ -8,6 +8,7 @@

{% trans "Data Size" %}

{% trans "Arrange the units by size, smallest to largest." %}

+
From b670f241a5d0f6dece654f240bbb4b5750836c58 Mon Sep 17 00:00:00 2001 From: eAlasdair Date: Thu, 12 Dec 2019 12:19:58 +1300 Subject: [PATCH 11/16] remove padding --- csfieldguide/static/interactives/data-size/js/data-size.js | 1 - 1 file changed, 1 deletion(-) diff --git a/csfieldguide/static/interactives/data-size/js/data-size.js b/csfieldguide/static/interactives/data-size/js/data-size.js index 150f9b706b..ef11b12e09 100644 --- a/csfieldguide/static/interactives/data-size/js/data-size.js +++ b/csfieldguide/static/interactives/data-size/js/data-size.js @@ -215,7 +215,6 @@ function createSlider() { NOUISLIDER.create(div, { start: 50, - padding: [1, 0], range: range, pips: { mode: 'count', From 48d6410b4beb64496004f8ae22ba2909158af2d0 Mon Sep 17 00:00:00 2001 From: eAlasdair Date: Mon, 16 Dec 2019 10:42:16 +1300 Subject: [PATCH 12/16] Decisively unsuccessful venture ends in decision to return to Plan B --- .../interactives/data-size/js/data-size.js | 52 ++++++++++++++----- 1 file changed, 39 insertions(+), 13 deletions(-) diff --git a/csfieldguide/static/interactives/data-size/js/data-size.js b/csfieldguide/static/interactives/data-size/js/data-size.js index ef11b12e09..8e648acbf6 100644 --- a/csfieldguide/static/interactives/data-size/js/data-size.js +++ b/csfieldguide/static/interactives/data-size/js/data-size.js @@ -169,7 +169,7 @@ function revealBar(n) { } if (n < Object.keys(DATAS).length) { setTimeout(function() {revealBar(n+1)}, TIMEOUT); - var maxLength = 6; + const maxLength = 10; var key = Object.keys(DATAS)[n]; var object = DATAS[key]; var name = object[0], @@ -201,29 +201,55 @@ function createSlider() { // Dynamic stepping inspired by: https://github.com/leongersen/noUiSlider/issues/140#issuecomment-486832717 const max = DATAS['Internet'][1]; var range = { - "min": [0], + "min": [1, 1], "max": [max] } - var increment; + var pip; for (var percentage=1; percentage < 100; percentage++) { - increment = Math.pow(percentage, 10) * max / (Math.pow(100, 10)); - console.log(increment); - range[percentage.toString() + '%'] = [increment]; + pip = Math.pow((percentage / 100), 11) * max; // Forms an exponential curve, 11 chosen so that pip > 1 when % = 1 + range[percentage.toString() + '%'] = [pip]; } - console.log('calculated'); - + NOUISLIDER.create(div, { - start: 50, + start: 1, range: range, + tooltips: { + // 'to' the formatted value. Receives a number. + to: function (value) { + if (value < 1001) { + return Math.round(value); + } + return value.toPrecision(2); + } + }, pips: { - mode: 'count', - values: 11, - density: 10, + mode: 'values', + values: [1, 1000000000000, 1000000000000000, 1000000000000000000, 1000000000000000000000, 1000000000000000000000000, max], + density: 4, + format: { + // 'to' the formatted value. Receives a number. + to: function (value) { + if (value <= 1000) { + return value; + } + return value.toPrecision(2); + }, + from: function (value) { + return parseInt(value); + } + } } }); - console.log('created'); + div.noUiSlider.on('update', function (values, handle) { + console.log(sizeChart.options); + console.log(values[handle]); + if (values[handle > 1000]) { + sizeChart.options.scales.yAxes[0].ticks.max = values[handle]; + sizeChart.update(); + } + }); } function setUpForSlider() { From c168fd5f3c62f2211dd7df6942791989114af2c4 Mon Sep 17 00:00:00 2001 From: eAlasdair Date: Mon, 16 Dec 2019 12:09:08 +1300 Subject: [PATCH 13/16] remove slide --- .../interactives/data-size/js/data-size.js | 69 ------------------- .../interactives/data-size/package.json | 3 +- .../templates/interactives/data-size.html | 2 +- 3 files changed, 2 insertions(+), 72 deletions(-) diff --git a/csfieldguide/static/interactives/data-size/js/data-size.js b/csfieldguide/static/interactives/data-size/js/data-size.js index 8e648acbf6..2f8971b5da 100644 --- a/csfieldguide/static/interactives/data-size/js/data-size.js +++ b/csfieldguide/static/interactives/data-size/js/data-size.js @@ -1,6 +1,5 @@ const DRAGULA = require('dragula'); const CHART = require('chart.js'); -const NOUISLIDER = require('nouislider'); const KILO = Math.pow(10, 3), MEGA = Math.pow(10, 6), @@ -104,8 +103,6 @@ function nextPhase() { phase++; if (phase == PHASES.GRAPH) { setUpForBarChart(); - } else if (PHASES.SLIDER) { - setUpForSlider(); } } @@ -155,7 +152,6 @@ function revealBarChart() { } } }); - createSlider(); setTimeout(revealBar, 1000); } @@ -195,71 +191,6 @@ function revealBar(n) { } } -function createSlider() { - var div = $('#slider')[0]; - - // Dynamic stepping inspired by: https://github.com/leongersen/noUiSlider/issues/140#issuecomment-486832717 - const max = DATAS['Internet'][1]; - var range = { - "min": [1, 1], - "max": [max] - } - var pip; - - for (var percentage=1; percentage < 100; percentage++) { - pip = Math.pow((percentage / 100), 11) * max; // Forms an exponential curve, 11 chosen so that pip > 1 when % = 1 - range[percentage.toString() + '%'] = [pip]; - } - - NOUISLIDER.create(div, { - start: 1, - range: range, - tooltips: { - // 'to' the formatted value. Receives a number. - to: function (value) { - if (value < 1001) { - return Math.round(value); - } - return value.toPrecision(2); - } - }, - pips: { - mode: 'values', - values: [1, 1000000000000, 1000000000000000, 1000000000000000000, 1000000000000000000000, 1000000000000000000000000, max], - density: 4, - format: { - // 'to' the formatted value. Receives a number. - to: function (value) { - if (value <= 1000) { - return value; - } - return value.toPrecision(2); - }, - from: function (value) { - return parseInt(value); - } - } - } - }); - - div.noUiSlider.on('update', function (values, handle) { - console.log(sizeChart.options); - console.log(values[handle]); - if (values[handle > 1000]) { - sizeChart.options.scales.yAxes[0].ticks.max = values[handle]; - sizeChart.update(); - } - }); -} - -function setUpForSlider() { - $('#sorted-boxes').fadeOut(400, function() { - this.classList.remove('d-flex'); // So it stays faded out - $('#slider').fadeIn(); - $('#description').html(TXT_SLIDER); - }); -} - /** * Shuffles the order of the size boxes */ diff --git a/csfieldguide/static/interactives/data-size/package.json b/csfieldguide/static/interactives/data-size/package.json index beab3bdbe3..c13c76d077 100644 --- a/csfieldguide/static/interactives/data-size/package.json +++ b/csfieldguide/static/interactives/data-size/package.json @@ -4,7 +4,6 @@ "private": true, "dependencies": { "dragula": "3.7.2", - "chart.js": "2.9.3", - "nouislider": "14.1.0" + "chart.js": "2.9.3" } } diff --git a/csfieldguide/templates/interactives/data-size.html b/csfieldguide/templates/interactives/data-size.html index c0e7152c24..b7a4a65614 100644 --- a/csfieldguide/templates/interactives/data-size.html +++ b/csfieldguide/templates/interactives/data-size.html @@ -10,7 +10,7 @@

{% trans "Arrange the units by s
- +
From 92b7bb825baa065b0a0d2498298fb837c4b69b7c Mon Sep 17 00:00:00 2001 From: eAlasdair Date: Mon, 16 Dec 2019 12:15:23 +1300 Subject: [PATCH 14/16] remove chart --- .../interactives/data-size/js/data-size.js | 135 +----------------- .../interactives/data-size/package.json | 3 +- .../data-size/scss/data-size.scss | 7 - .../templates/interactives/data-size.html | 3 - 4 files changed, 2 insertions(+), 146 deletions(-) diff --git a/csfieldguide/static/interactives/data-size/js/data-size.js b/csfieldguide/static/interactives/data-size/js/data-size.js index 2f8971b5da..8e6ae9a8fe 100644 --- a/csfieldguide/static/interactives/data-size/js/data-size.js +++ b/csfieldguide/static/interactives/data-size/js/data-size.js @@ -1,33 +1,4 @@ const DRAGULA = require('dragula'); -const CHART = require('chart.js'); - -const KILO = Math.pow(10, 3), - MEGA = Math.pow(10, 6), - GIGA = Math.pow(10, 9), - TERA = Math.pow(10, 12), - PETA = Math.pow(10, 15), - EXA = Math.pow(10, 18), - ZETTA = Math.pow(10, 21); - -const DATAS = { // Data points ordered by size. - // Name (translated) , size (bytes), colour (for graph, reflects colour of box) - 'Bit' : [gettext("1 Bit") , 0.125 , '#8181ff'], - 'Hex' : [gettext("Hexadecimal digit") , 0.5 , null ], - 'Byte' : [gettext("1 Byte") , 1 , '#ff9a54'], - 'Kilobyte': [gettext("1 Kilobyte") , 1 * KILO , '#54ff9a'], - 'Inter' : [gettext("This interactive") , 4.5 * KILO , null ], //TBC - 'Megabyte': [gettext("1 Megabyte") , 1 * MEGA , '#ac88df'], - 'First HD': [gettext("1st HDD for home PCs"), 5 * MEGA , null ], - 'CSFG' : [gettext("The CSFG") , 605 * MEGA , null ], - 'Gigabyte': [gettext("1 Gigabyte") , 1 * GIGA , '#54deff'], - 'Terabyte': [gettext("1 Terabyte") , 1 * TERA , '#ff5454'], - 'SSD' : [gettext("Largest single SSD") , 100 * TERA , null ], - 'Petabyte': [gettext("1 Petabyte") , 1 * PETA , '#80ff25'], - 'GoogEar' : [gettext("Google Earth (2016)") , 3 * PETA , null ], - 'Exabyte' : [gettext("1 Exabyte") , 1 * EXA , '#df88ce'], - 'Zetta' : [gettext("1 Zettabyte") , 1 * ZETTA , null ], - 'Internet': [gettext("The internet (2020)") , 40 * ZETTA , null ], -}; const HTML_BOXES = [ 'Bit', 'Byte', @@ -39,26 +10,11 @@ const HTML_BOXES = [ 'Exabyte', ]; -const TIMEOUT = 1000; -const DEFAULT_COLOUR = '#fffd81'; - const TXT_CORRECT_ORDER = gettext("The boxes are in order!"); const TXT_INCORRECT_ORDER = gettext("The boxes are not in order! Try again"); -const TXT_SLIDER = gettext("Drag the slider to adjust the scale."); - -var sizeChart; -var sizeChartData; - -var phase; -const PHASES = { - SORT: 1, - GRAPH: 2, - SLIDER: 3, -} $(document).ready(function() { - phase = PHASES.SORT; - //shuffleBoxes(); + shuffleBoxes(); var containerList = $('.dashed-box').toArray(); var drake = DRAGULA(containerList); @@ -100,95 +56,6 @@ function submit() { * TODO More functionality to be added */ function nextPhase() { - phase++; - if (phase == PHASES.GRAPH) { - setUpForBarChart(); - } -} - -/** - * - */ -function setUpForBarChart() { - $('#continue-button').prop('disabled', true).fadeOut(); - $('#status-text').fadeOut(revealBarChart); -} - -function revealBarChart() { - if (sizeChart) { - sizeChart.destroy(); - } - var canvas = $('#sizeChart'); - canvas.attr('width', Math.min(1000, 0.8 * $(window).width())); - canvas.attr('height', canvas.attr('width') / 2); - sizeChartData = { - labels: [], - datasets: [{ - label: gettext("Number of Bytes"), - backgroundColor: [], - data: [] - }] - }; - sizeChart = new CHART.Chart(canvas, { - type: 'bar', - data: sizeChartData, - options: { - responsive: true, - legend: { - display: false - }, - title: { - display: true, - text: gettext("Estimated size of various groups of data (Bytes)") - }, - scales: { - yAxes: [{ - display: true, - ticks: { - beginAtZero: true, - suggestedMax: 1 - } - }] - } - } - }); - setTimeout(revealBar, 1000); -} - -/** - * Recursively reveals bars (and hides respective box) in the sizes chart until there are no more. - * If there are more than 6 values, hides the smallest one - */ -function revealBar(n) { - if (!n) { - n = 0; - } - if (n < Object.keys(DATAS).length) { - setTimeout(function() {revealBar(n+1)}, TIMEOUT); - const maxLength = 10; - var key = Object.keys(DATAS)[n]; - var object = DATAS[key]; - var name = object[0], - size = object[1], - colour = object[2]; - if (HTML_BOXES.includes(key)) { - $('#' + key).fadeOut('slow'); - } - sizeChartData.labels.push(name); - sizeChartData.datasets[0].data.push(size); - if (colour === null) { - colour = DEFAULT_COLOUR; - } - sizeChartData.datasets[0].backgroundColor.push(colour); - if (sizeChartData.datasets[0].data.length > maxLength) { - sizeChartData.datasets[0].data.shift(); - sizeChartData.datasets[0].backgroundColor.shift(); - sizeChartData.labels.shift(); - } - sizeChart.update(); - } else { - nextPhase(); - } } /** diff --git a/csfieldguide/static/interactives/data-size/package.json b/csfieldguide/static/interactives/data-size/package.json index c13c76d077..8686fa456f 100644 --- a/csfieldguide/static/interactives/data-size/package.json +++ b/csfieldguide/static/interactives/data-size/package.json @@ -3,7 +3,6 @@ "version": "1.0.0", "private": true, "dependencies": { - "dragula": "3.7.2", - "chart.js": "2.9.3" + "dragula": "3.7.2" } } diff --git a/csfieldguide/static/interactives/data-size/scss/data-size.scss b/csfieldguide/static/interactives/data-size/scss/data-size.scss index 583be26197..a1970246b5 100644 --- a/csfieldguide/static/interactives/data-size/scss/data-size.scss +++ b/csfieldguide/static/interactives/data-size/scss/data-size.scss @@ -2,13 +2,6 @@ @import "node_modules/bootstrap/scss/functions"; @import "node_modules/bootstrap/scss/variables"; @import "node_modules/bootstrap/scss/mixins"; -@import "node_modules/nouislider/distribute/nouislider"; - -#slider { - margin: auto; - width: 800px; - display: none; -} #number-line { height: 120px; diff --git a/csfieldguide/templates/interactives/data-size.html b/csfieldguide/templates/interactives/data-size.html index b7a4a65614..ba6f7a9424 100644 --- a/csfieldguide/templates/interactives/data-size.html +++ b/csfieldguide/templates/interactives/data-size.html @@ -8,7 +8,6 @@

{% trans "Data Size" %}

{% trans "Arrange the units by size, smallest to largest." %}

-
@@ -123,7 +122,6 @@

{% trans "Arrange the units by s

-
@@ -131,7 +129,6 @@

{% trans "Arrange the units by s

-
{% endblock html %} From ea77323995c6dd1170a55a22e646bf6373752e67 Mon Sep 17 00:00:00 2001 From: eAlasdair Date: Mon, 16 Dec 2019 13:56:13 +1300 Subject: [PATCH 15/16] fix arrangements for smaller screens --- .../data-size/scss/data-size.scss | 34 +++++++++++++------ 1 file changed, 23 insertions(+), 11 deletions(-) diff --git a/csfieldguide/static/interactives/data-size/scss/data-size.scss b/csfieldguide/static/interactives/data-size/scss/data-size.scss index a1970246b5..07c472710b 100644 --- a/csfieldguide/static/interactives/data-size/scss/data-size.scss +++ b/csfieldguide/static/interactives/data-size/scss/data-size.scss @@ -3,10 +3,6 @@ @import "node_modules/bootstrap/scss/variables"; @import "node_modules/bootstrap/scss/mixins"; -#number-line { - height: 120px; -} - .dashed-box { background-color: #ffffff; border: 2px dashed #777777; @@ -25,6 +21,12 @@ height: $box-size; max-width: $box-size; } + @include media-breakpoint-down(xs) { + $box-size: 2rem; + width: $box-size !important; + height: $box-size !important; + max-width: $box-size !important; + } } } @@ -66,11 +68,27 @@ .unit { padding: 0px; font-size: 3rem; + @each $size, $width in $container-max-widths { + @include media-breakpoint-only($size) { + font-size: $width / 20; + } + @include media-breakpoint-down(xs) { + text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; // For clarity + font-size: 1rem !important; + } + } } .name { position: absolute; - bottom: 3px; + bottom: 4px; + padding: 0px; + @include media-breakpoint-down(md) { + font-size: 0.7rem; + } + @include media-breakpoint-down(sm) { + display: none; + } } .txt-red { @@ -80,9 +98,3 @@ .txt-grn { color: green; } - -#sizeChart { - position: relative; - margin: auto; - max-width: 1000px; -} From b4646e0d17662606cd3c0552936cfc2239a30f18 Mon Sep 17 00:00:00 2001 From: eAlasdair Date: Wed, 18 Dec 2019 13:01:47 +1300 Subject: [PATCH 16/16] start on example sotring mechanic --- .../interactives/data-size/js/data-size.js | 15 +++++-- .../data-size/scss/data-size.scss | 19 +++++++++ .../templates/interactives/data-size.html | 40 ++++++++++++++++++- 3 files changed, 69 insertions(+), 5 deletions(-) diff --git a/csfieldguide/static/interactives/data-size/js/data-size.js b/csfieldguide/static/interactives/data-size/js/data-size.js index 8e6ae9a8fe..85e09a2124 100644 --- a/csfieldguide/static/interactives/data-size/js/data-size.js +++ b/csfieldguide/static/interactives/data-size/js/data-size.js @@ -12,19 +12,23 @@ const HTML_BOXES = [ const TXT_CORRECT_ORDER = gettext("The boxes are in order!"); const TXT_INCORRECT_ORDER = gettext("The boxes are not in order! Try again"); +const TXT_EXAMPLE_SORT = gettext("Try to match the examples below with their relative size."); $(document).ready(function() { - shuffleBoxes(); + //shuffleBoxes(); var containerList = $('.dashed-box').toArray(); - var drake = DRAGULA(containerList); - drake.on('drop', (div, target, source) => { + var drakeSorting = DRAGULA(containerList); + drakeSorting.on('drop', (div, target, source) => { // When an image is dropped on top of another image if (target.children.length == 2) { source.appendChild(target.children[0]); } }); + var exampleList = $('.example-container').toArray(); + var drakeExamples = DRAGULA(exampleList); + $('#submit-button').on('click', submit); $('#continue-button').on('click', nextPhase); }); @@ -56,6 +60,11 @@ function submit() { * TODO More functionality to be added */ function nextPhase() { + $('#example-boxes').addClass('d-flex').removeClass('d-none'); + $('#example-items').addClass('d-flex').removeClass('d-none'); + $('#continue-button').addClass('d-none'); + $('#submit-button').removeClass('d-none'); + $('#status-text').html(''); } /** diff --git a/csfieldguide/static/interactives/data-size/scss/data-size.scss b/csfieldguide/static/interactives/data-size/scss/data-size.scss index 07c472710b..2100fd1eba 100644 --- a/csfieldguide/static/interactives/data-size/scss/data-size.scss +++ b/csfieldguide/static/interactives/data-size/scss/data-size.scss @@ -98,3 +98,22 @@ .txt-grn { color: green; } + +.example-item { + background-color: rgba(0, 0, 0, 0.25); + padding-left: 5px; + padding-right: 5px; + text-align: center; +} + +.example-container { + background-color: rgba(97, 2, 2, 0.25); + &.source { + min-height: 3rem; + + } + &.dest { + min-height: 1.5rem; + min-width: 10%; + } +} diff --git a/csfieldguide/templates/interactives/data-size.html b/csfieldguide/templates/interactives/data-size.html index ba6f7a9424..934af82a83 100644 --- a/csfieldguide/templates/interactives/data-size.html +++ b/csfieldguide/templates/interactives/data-size.html @@ -7,8 +7,8 @@

{% trans "Data Size" %}

{% trans "Arrange the units by size, smallest to largest." %}

-
-
+
+
@@ -124,6 +124,42 @@

{% trans "Arrange the units by s

+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+ +
+ {% trans 'The CSFG' %} +
+
+