responsive charts

index.html

@@ -39,7 +39,7 @@
             top: 0;
             left: 0;
             height: 100vh;
-            width: 65vw;
+            width: 50vw;
             position: fixed;
             background-color: #fff;
             border: 0;
@@ -60,7 +60,7 @@
             box-sizing: border-box;
             position: absolute;
             right: 0;
-            width: 35vw;
+            width: 50vw;
             padding: 0 3vh;
             margin: 0;            
         }

vis/IEEEvis_citationHisto.json

@@ -13,5 +13,6 @@
         },
         "y": {"aggregate": "count", "title": "Number of Papers"}
     },
-    "config": {}
+    "width": 300,
+    "height": 300
 }

vis/IEEEvis_citeAndCited.json

@@ -7,8 +7,8 @@
     "encoding": {
       "x": {"field": "CitationCount_CrossRef", "type": "quantitative",  "title": "Number of Papers referencing this paper"},
       "y": {"field": "PubsCited_CrossRef", "type": "quantitative",  "title": "Number of References"}
-    }
-
-
+    },
+    "width": 300,
+    "height": 300
   }
 

vis/IEEEvis_countPerConf.json

@@ -9,6 +9,7 @@
       "y": {"aggregate": "count", "field": "Title", "title": "Number of Papers"}
     },
     "config": {},
-    "width": 200
+    "width": 300,
+    "height": 300
 
   }

vis/IEEEvis_countPerConf_pie.json

@@ -3,14 +3,12 @@
     "description": "A simple bar chart with embedded data.",
     "data": { "url": "data/IEEE VIS papers 1990-2023 - Main dataset.csv"},
     "title": "IEEE VIS papers 1990-2023",
-
-    "config": {},
-    "width": 200,
-
     "mark": "arc",
     "encoding": {
       "theta": {"aggregate": "count", "field": "Title", "title": "Number of Papers"},
       "color": {"field": "Conference", "type": "nominal"}
-    }
-
+    },
+    "config": {},
+    "width": 300,
+    "height": 300
   }

vis/IEEEvis_overTime.json

@@ -2,13 +2,14 @@
     "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
     "usermeta": {"embedOptions": {"renderer": "svg"}},
     "title": "IEEE conferences over time",
-    "data": {"url": "data/IEEE VIS papers 1990-2023 - Main dataset.csv"},
-
+    "data": {"url": "data/IEEE VIS papers 1990-2023 - Main dataset.csv"},    
     "mark": "bar",
     "encoding": {
         "x": {"field": "Year", "type":"nominal"},
         "y": {"aggregate":"count", "field": "title", "type": "quantitative", "title": "Number of Papers"},
         "color": {"field": "Conference", "type": "nominal"}
     },
-    "config": {}
+    "config": {},
+    "width": 450,
+    "height": 300
 }

vis/IEEEvis_smallerConf.json

@@ -17,5 +17,7 @@
         "y": {"aggregate":"count", "field": "title", "type": "quantitative",  "title": "Number of Papers"},
         "color": {"field": "Conference", "type": "nominal"}
     },
-    "config": {}
+    "config": {},
+    "width": 300,
+    "height": 300
 }

vis/index.html

@@ -409,7 +409,10 @@
                     that.editable = false;
                     d3.select("svg").attr("width", null)
                     d3.select("svg").attr("height", null)
-                    d3.select("svg").style("max-height", "300px")
+
+                    d3.select("svg").style("max-height", "80vh")
+                    d3.select("svg").style("max-width", "80vw")
+
                     d3.select("svg").style("margin-left", "10px")
                     d3.select(".chart-wrapper").style("width", "95vw")
                     d3.select(".chart-wrapper").style("text-align", "center")