Initial commit

2026-02-20 20:10:03 -05:00
commit 5cf4bafc88
6 changed files with 276 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+
+<head>
+    <title>Radio Freq Visualizer</title>
+    <script src="js/data.js"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap"
+        rel="stylesheet">
+    <link
+        href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Jost:ital,wght@0,100..900;1,100..900&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="default.css" />
+</head>
+
+<body>
+    <h1>Interactive Canadian Radio Frequency Allocation</h1>
+
+    <label for="min_freq">Frequency</label>
+    <input type="range" id="min_freq" min="0" max="25670" />
+    <input type="range" id="max_freq" min="1" max="25670" />
+    <div id="content"></div>
+
+    <script>
+
+        let content = document.getElementById("content");
+        console.log(data);
+
+        let service_cats = {};
+
+        let min_freq = 9999999;
+        let max_freq = 0;
+
+        let i = 0;
+        let str = "";
+        for (let entry of data) {
+
+            let services = [];
+
+            for (service_name in entry.primary) {
+                let service_slug = service_name.replaceAll(' ', '_');
+                if (service_cats[service_slug] == null) {
+                    service_cats[service_slug] = 0;
+                }
+
+                service_cats[service_slug]++;
+
+                let service_span = document.createElement("span");
+                service_span.className = service_slug;
+                service_span.innerHTML = service_name;
+                services.push(service_span);
+            }
+
+            let hi_freq = entry.maxf;
+            let low_freq = entry.minf;
+
+            min_freq = Math.min(min_freq, low_freq);
+            max_freq = Math.max(max_freq, hi_freq);
+
+
+            let range = hi_freq - low_freq;
+            let color = `rgb(${i}, 0, 0)`;
+            let container = document.createElement('div');
+            container.style.height = range + 'px';
+            container.style.backgroundColor = color;
+            container.className = "freq-entry";
+
+            let freq_range_span = document.createElement('span');
+            freq_range_span.innerHTML = `${low_freq} → ${hi_freq}`;
+            container.appendChild(freq_range_span);
+            for (let s of services) {
+                container.appendChild(s);
+            }
+            content.appendChild(container);
+            i++;
+        }
+
+        let max_min = document.createElement('div');
+        max_min.innerHTML = min_freq + "kHz to " + max_freq + "kHz";
+        content.prepend(max_min);
+
+        let categories = document.createElement('div');
+        for (let service in service_cats) {
+            let span = document.createElement('span');
+            span.className = service;
+            span.innerHTML = service.replaceAll('_', ' ');
+            categories.appendChild(span);
+        }
+        content.prepend(categories);
+
+        // find all elements tagged with service cats and replace them with cat{x}
+        // for styling
+        console.log(service_cats);
+        let current_cat = 1;
+        for (let service in service_cats) {
+            console.log(`Searching for elements with ${service}`);
+            let elems = [...document.getElementsByClassName(service)];
+            console.log(elems);
+            for (let elem of elems) {
+                console.log(`Removing ${service} from ${elem}`)
+                console.log(elem);
+                elem.classList.remove(service);
+                elem.classList.add("cat" + current_cat);
+            }
+
+            current_cat = (current_cat + 1) % 3 + 1;
+        }
+
+    </script>
+</body>
+
+</html>