Fix chart width

erica-scarpa · Feb 28, 2024 · 787fadc · 787fadc
1 parent 2a308ca
commit 787fadc
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/Chart.html b/Chart.html
@@ -214,11 +214,12 @@ <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle 2
                         <!-- Add more checkboxes for other source values as needed -->
                     </div>
 
-                    <div id="my_dataviz"></div>
+
                 </div>
 
             </div>
         </div>
+        <div id="my_dataviz"></div>
     </main>
 
     <!-- Footer -->
@@ -296,10 +297,9 @@ <h3>
 
         function renderHeatmap(selectedSources) {
             // Set the dimensions and margins of the graph
-            const margin = { top: 80, right: 25, bottom: 30, left: 70, right: 550 },
+            const margin = { top: 80, right: 25, bottom: 30, left: 70 },
                 width = window.innerWidth - margin.left - margin.right,
                 height = 750 - margin.top - margin.bottom;
-
             // Remove existing SVG
             d3.select("#my_dataviz svg").remove();
 
@@ -315,11 +315,11 @@ <h3>
             d3.csv("https://raw.githubusercontent.com/erica-scarpa/VE/master/assets/dataset.csv").then(function (data) {
                 // Create an array to keep track of selected sources
                 if (!selectedSources) {
-                    selectedSources = ["EBK-A", "A1", "A2","A-3","A4-6", "A7", "G", "H", "I", "B8", "B9-11", "M", "N", "R", "S", "T","AI","BA","BB","BC","BD","BE","BF"]; // Default selection
+                    selectedSources = ["EBK-A", "A1", "A2", "A3", "A4-6", "A7", "af", "B8", "B9-11", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "AA", "AB", "AC", "AD", "AE", "AF", "AG", "AH", "AI", "AJ", "AK", "AL", "AM", "AN", "AO", "AP", "AQ", "AR", "AS", "AT", "AU", "AV", "AW", "AX", "AY", "AZ", "A III 683", "BA", "BB", "BC", "BD", "BE", "BF", "BG", "BH",]; // Default selection
                 }
 
                 // Labels of row and columns -> unique identifier of the column called 'lemma' and 'source'
-                const myGroups = ["EBK-A", "A1", "A2", "A4-6", "A7", "B8", "B9-11", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "X", "Y", "Z", "AA", "AB", "AC", "AD", "AE", "AF", "AG", "AH", "AI", "AJ", "AK", "AL", "AM", "AN", "AO", "AP", "AQ", "AR", "AS", "AT", "AU", "AV", "AW", "AX", "AY", "AZ", "BA", "BB", "BC", "BD", "BE", "BF", "BG", "BH", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j","k","l", "m", "n", "o", "p", "q", "r", "s","t","u","v","w","x","y","z","aa","ab","ac","ad","ae","af","ag","ah","ai","aj","ak","al", "am", "A III 683"];
+                const myGroups = ["EBK-A", "A1", "A2", "A3", "A4-6", "A7", "B8", "B9-11", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "AA", "AB", "AC", "AD", "AE", "AF", "AG", "AH", "AI", "AJ", "AK", "AL", "AM", "AN", "AO", "AP", "AQ", "AR", "AS", "AT", "AU", "AV", "AW", "AX", "AY", "AZ", "BA", "BB", "BC", "BD", "BE", "BF", "BG", "BH", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j","k","l", "m", "n", "o", "p", "q", "r", "s","t","u","v","w","x","y","z","aa","ab","ac","ad","ae","af","ag","ah","ai","aj","ak","al", "am", "A III 683"];
                 const myVars = Array.from(new Set(data.map(d => d.lemma)));
                 const orderedVars = Array.from(new Set(data.map(d => d.lemma)))
                     .sort((a, b) => {
@@ -407,7 +407,7 @@ <h3>
                 // Add checkboxes for filtering data to Manuscript A-1
                 const manuscripta1 = d3.select("#manuscripta1")
                     .selectAll("input")
-                    .data(["EBK-A", "A1", "A2", "A-3", "A4-6", "A7", "G", "H", "I"]) // Include only desired values
+                    .data(["EBK-A", "A1", "A2", "A3", "A4-6", "A7", "G", "H", "I"]) // Include only desired values
                     .enter()
                     .append("label")
                     .text(d => d)

diff --git a/assets/css/style.css b/assets/css/style.css
@@ -197,4 +197,12 @@ input.filter-checkbox {
 
 p {
     margin-top: 20px;
-}
+}
+
+        #my_dataviz {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }