Small bitbyte tree additions (#594)

Sorting by age, data additions.
---------

Co-authored-by: ryantrinh05 <[email protected]>

Author: 508312

hknweb/static/bit_byte_tree_data.csv

@@ -57,6 +57,8 @@ kaitlynlee,drakelin
 kaitlynlee,rohintangirala
 nfigueira,drakelin
 nfigueira,rohintangirala
+srig,tarunamarnath
+vidishgupta,tarunamarnath
 alberttang,andrewzhang2001
 katherineshu,andrewzhang2001
 austinapatel,aganesh10
@@ -469,14 +471,15 @@ anvitha,nandiniagarwal
 anvitha,lydiaignatova
 anvitha,daniel_chang
 anvitha,bill.cy.zheng
-saamahme,tarunamarnath
 saamahme,kdurani
 saamahme,rishi.madala
 saamahme,harivall
-anixsarkar,tarunamarnath
 anixsarkar,kdurani
 anixsarkar,rishi.madala
 anixsarkar,harivall
+tarunamarnath,kdurani
+tarunamarnath,rishi.madala
+tarunamarnath,harivall
 alexfung,pranavsukumar
 alexfung,hsw1018
 alexfung,bhatsavit
@@ -558,9 +561,11 @@ richeldhaliwal,heather.ding
 richeldhaliwal,rishi.nath
 richeldhaliwal,quangnguyenln
 amoghgupta,kamal.nahas
+amoghgupta,hgn
 amoghgupta,varunbharadwaj
 amoghgupta,arda.akman
 jakebringetto,kamal.nahas
+jakebringetto,hgn
 jakebringetto,varunbharadwaj
 jakebringetto,arda.akman
 sanchez,owent

hknweb/templates/about/bitbyte_tree.html

@@ -86,7 +86,7 @@
 
 {% block content %}
     <div class="svg-container">
-        <button id="settings-toggle-btn" class="settings-toggle-btn">Info</button>
+        <button id="settings-toggle-btn" class="settings-toggle-btn">Search</button>
 
         <div id="settings-panel" class="settings-panel">
             <h4>Graph Settings</h4>
@@ -138,7 +138,7 @@ <h4>Search</h4>
     const baseNodeRadius = 5;
     const clickedNodeRadius = 7;
 
-        async function renderd3() {
+    async function renderd3() {
         // Current clicked node.
         let activeNode = null;
         // Current hovered node.
@@ -150,7 +150,17 @@ <h4>Search</h4>
 
         // Copy nodes and links. Simulation changes original data.
         const links = data.links.map(d => ({...d}));
-        const nodes = data.nodes.map(d => ({...d}));
+
+
+        const years = new Set(data.nodes.map(d => (d.candidate_semester)));
+        const smallestYear = d3.min(years);
+        const biggestYear = d3.max(years);
+        const yearDifference = biggestYear - smallestYear;
+        // Set initial positions to be higher the older the person's registration date is.
+        // Idk if it actually works, but I think it did something.
+        const nodes = data.nodes.map(d => ({...d,
+                                                x: 0,
+                                                y: (d.candidate_semester - smallestYear) / yearDifference * height}));
 
         const simulation = d3.forceSimulation(nodes)
             .force("link", d3.forceLink(links).id(d => d.id))
@@ -179,7 +189,6 @@ <h4>Search</h4>
             .attr('d', 'M0,-5L10,0L0,5')   // Path for the arrowhead (a triangle)
             .attr('fill', "#999");
 
-
         // Add a line for each link, and a circle for each node.
         const link = graph.append("g")
             .attr("stroke-opacity", 0.6)
@@ -596,7 +605,7 @@ <h4>Search</h4>
                 if (settingsPanel.classList.contains('open')) {
                     settingsToggleBtn.textContent = 'Close';
                 } else {
-                    settingsToggleBtn.textContent = 'Settings';
+                    settingsToggleBtn.textContent = 'Search';
                 }
             });
         } else {

hknweb/views/bitbyte_tree.py

@@ -27,7 +27,11 @@ def bitbyte_tree_data(request):
     for byte in all_bytes:
         user = User.objects.get(username__iexact=byte)
         data["nodes"].append(
-            {"id": byte, "name": user.first_name + " " + user.last_name}
+            {
+                "id": byte,
+                "name": user.first_name + " " + user.last_name,
+                "candidate_semester": user.date_joined.year,
+            }
         )
 
     for byte in byte_bits: