Update chart configurations for responsive design and data accuracy

src/charts/areachart-original.vl.json

@@ -130,6 +130,11 @@
       "axis": {
         "titleFontWeight": "bold",
         "grid": true
+      },
+      "stack": null,
+      "scale": {
+        "zero": false,
+        "domainMin": 0.5
       }
     },
     "tooltip": [

src/charts/barchart-original.vl.json

@@ -9,7 +9,7 @@
     "url": "data/barchart.csv", "format": {"type": "csv"}
   },
   "width": "container",
-  "height": "container",
+  "height": 400,
   "mark": {
     "type": "bar"
   },

src/charts/choropleth-original.vl.json

@@ -5,7 +5,7 @@
       "fontSize": 16,
       "fontWeight": "bold"
     },
-    "width": 500,
+    "width": "container",
     "height": 500,
     "projection": {
       "type": "albersUsa"

src/charts/histogram-original.vl.json

@@ -5,7 +5,7 @@
     "fontSize": 16,
     "fontWeight": "bold"
   },
-  "width": 500,
+  "width": "container",
   "height": 300,
   "data": {
     "url": "data/histogram.csv"

src/charts/linechart-original.vl.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
-  "width": 600,
+  "width": "container",
   "height": 400,
   "title": "Oil Prices",
   "data": {

src/charts/piechart-original.vl.json

@@ -12,7 +12,7 @@
         "titleFontWeight": "bold"
       }
     },
-    "width": 500, "height": 300,
+    "width": "container", "height": 300,
     "data": {
       "values": [        
         {"brand": "Samsung", "share": 17.6},

src/charts/scatterplot-original.vl.json

@@ -5,7 +5,7 @@
     "fontSize": 16,
     "fontWeight": "bold"
   },
-  "width": 400,
+  "width": "container",
   "height": 400,
   "data": {
     "url": "data/scatterplot.csv"

src/charts/stacked100-original.vl.json

@@ -8,8 +8,8 @@
   "data": {
     "url": "data/stacked100.csv"
   },
-  "width": 500,
+  "width": "container",
-  "height": 300,
+  "height": 400,
   "encoding": {
     "y": {
       "field": "value",
@@ -49,6 +49,11 @@
         "title": "Medals",
         "orient": "right"
       }
+    },
+    "order": {
+      "field": "order",
+      "type": "quantitative",
+      "sort": "ascending"
     }
   },
   "mark": "bar",
@@ -65,9 +70,8 @@
       ]
     },
     {
-      "sort": [
+      "calculate": "datum.category === 'Gold' ? 1 : datum.category === 'Silver' ? 2 : 3",
-        {"field": "category", "order": "descending"}
+      "as": "order"
-      ]
     }
   ],
   "config": {

src/charts/stackedareachart-original.vl.json

@@ -5,42 +5,42 @@
         "fontSize": 16,
         "fontWeight": "bold"
     },
-    "width": 400,
+    "width": "container",
-    "height": 400,
+    "height": 500,
     "data": {
         "values": [
             {
-                "Year": 2009,
+                "Year": "2009-01-01",
                 "Amelia": 3625,
                 "Isla": 1908,
                 "Olivia": 5201
             },
             {
-                "Year": 2010,
+                "Year": "2010-01-01",
                 "Amelia": 4227,
                 "Isla": 2384,
                 "Olivia": 5279
             },
             {
-                "Year": 2011,
+                "Year": "2011-01-01",
                 "Amelia": 5054,
                 "Isla": 2849,
                 "Olivia": 4938
             },
             {
-                "Year": 2012,
+                "Year": "2012-01-01",
                 "Amelia": 7061,
                 "Isla": 3501,
                 "Olivia": 4585
             },
             {
-                "Year": 2013,
+                "Year": "2013-01-01",
                 "Amelia": 5570,
                 "Isla": 3526,
                 "Olivia": 4598
             },
             {
-                "Year": 2014,
+                "Year": "2014-01-01",
                 "Amelia": 5327,
                 "Isla": 4012,
                 "Olivia": 4724
@@ -50,7 +50,8 @@
     "encoding": {
         "x": {
             "field": "Year",
-            "type": "quantitative",
+            "type": "temporal",
+            "timeUnit": "year",
             "axis": {
                 "title": "Year",
                 "titleFontWeight": "bold",
@@ -104,8 +105,18 @@
                         "name",
                         "value"
                     ]
+                },
+                {
+                    "calculate": "datum.name === 'Amelia' ? 1 : datum.name === 'Isla' ? 2 : 3",
+                    "as": "order"
                 }
-            ]
+            ],
+            "encoding": {
+                "order": {
+                    "field": "order",
+                    "type": "quantitative"
+                }
+            }
         }
     ],
     "config": {

src/charts/stackedbarchart-original.vl.json

@@ -6,8 +6,8 @@
   "data": {
     "url": "data/stackedbarchart.csv"
   },
-  "width": 500,
+  "width": "container",
-  "height": 300,
+  "height": 400,
   "encoding": {
     "x": {
       "field": "City",
@@ -24,7 +24,9 @@
       "axis": {
         "title": "Cost ($)",
         "titleFontWeight": "bold",
-        "grid": true
+        "grid": true,
+        "gridDash": [1, 0],
+        "tickCount": 15
       },
       "scale": {
         "domain": [
@@ -38,24 +40,29 @@
       "type": "nominal",
       "scale": {
         "domain": [
-          "Sandwich",
+          "Vodka",
-          "Water",
-          "Peanut",
           "Soda",
-          "Vodka"
+          "Peanut",
+          "Water",
+          "Sandwich"
         ],
         "range": [
+          "#386cb0",
           "#7fc97f",
           "#beaed4",
           "#fdc086",
-          "#fb9a99",
+          "#fb9a99"
-          "#386cb0"
         ]
       },
       "legend": {
         "title": null,
         "orient": "right"
       }
+    },
+    "order": {
+      "field": "order",
+      "type": "quantitative",
+      "sort": "descending"
     }
   },
   "mark": "bar",
@@ -72,6 +79,10 @@
         "category",
         "value"
       ]
+    },
+    {
+      "calculate": "datum.category === 'Vodka' ? 1 : datum.category === 'Soda' ? 2 : datum.category === 'Peanut' ? 3 : datum.category === 'Water' ? 4 : 5",
+      "as": "order"
     }
   ],
   "config": {

src/charts/treemap-original.vl.json

@@ -8,7 +8,7 @@
       "encode": {
         "enter": {
           "url": {
-            "value": "data/treemap-uk.png"
+            "value": "data/treemap-en.png"
           },
           "x": {
             "value": 0