docs(examples): simplify bar_layered_weather (#7140)

Co-authored-by: GitHub Actions Bot <[email protected]>
vega · Jan 3, 2021 · c7b541d · c7b541d
1 parent c4b2458
commit c7b541d
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 61 deletions.
diff --git a/examples/compiled/bar_layered_weather.vg.json b/examples/compiled/bar_layered_weather.vg.json
@@ -133,7 +133,7 @@
     {
       "name": "layer_0_marks",
       "type": "rect",
-      "style": ["bar", "box"],
+      "style": ["bar"],
       "from": {"data": "data_0"},
       "encode": {
         "update": {
@@ -164,7 +164,7 @@
     {
       "name": "layer_1_marks",
       "type": "rect",
-      "style": ["bar", "box"],
+      "style": ["bar"],
       "from": {"data": "data_1"},
       "encode": {
         "update": {
@@ -195,7 +195,7 @@
     {
       "name": "layer_2_marks",
       "type": "rect",
-      "style": ["bar", "box"],
+      "style": ["bar"],
       "from": {"data": "data_2"},
       "encode": {
         "update": {
@@ -226,7 +226,7 @@
     {
       "name": "layer_3_marks",
       "type": "rect",
-      "style": ["bar", "box"],
+      "style": ["bar"],
       "from": {"data": "data_3"},
       "encode": {
         "update": {
@@ -257,7 +257,7 @@
     {
       "name": "layer_4_marks",
       "type": "rect",
-      "style": ["bar", "box"],
+      "style": ["bar"],
       "from": {"data": "data_4"},
       "encode": {
         "update": {
@@ -288,7 +288,7 @@
     {
       "name": "layer_5_marks",
       "type": "rect",
-      "style": ["bar", "box"],
+      "style": ["bar"],
       "from": {"data": "data_5"},
       "encode": {
         "update": {
@@ -404,5 +404,6 @@
       "tickCount": {"signal": "ceil(height/40)"},
       "zindex": 0
     }
-  ]
+  ],
+  "config": {"style": {"hilo": {"size": 20}}}
 }
diff --git a/examples/specs/bar_layered_weather.vl.json b/examples/specs/bar_layered_weather.vl.json
@@ -1,6 +1,13 @@
 {
   "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
   "description": "A layered bar chart with floating bars representing weekly weather data",
+  "config": {
+    "style": {
+      "hilo": {
+        "size": 20
+      }
+    }
+  },
   "title": {
     "text": ["Weekly Weather", "Observations and Predictions"],
     "frame": "group"
@@ -31,63 +38,45 @@
   },
   "layer": [
     {
-      "mark": {
-        "type": "bar",
-        "style": "box"
-      },
+      "mark": {"type": "bar", "size": 20, "color": "#ccc"},
       "encoding": {
         "y": {"field": "record.low"},
-        "y2": {"field": "record.high"},
-        "size": {"value": 20},
-        "color": {"value": "#ccc"}
+        "y2": {"field": "record.high"}
       }
     },
     {
-      "mark": {
-        "type": "bar",
-        "style": "box"
-      },
+      "mark": {"type": "bar", "size": 20, "color": "#999"},
       "encoding": {
         "y": {"field": "normal.low"},
-        "y2": {"field": "normal.high"},
-        "size": {"value": 20},
-        "color": {"value": "#999"}
+        "y2": {"field": "normal.high"}
       }
     },
     {
-      "mark": {"type": "bar", "style": "box"},
+      "mark": {"type": "bar", "size": 12, "color": "#000"},
       "encoding": {
         "y": {"field": "actual.low"},
-        "y2": {"field": "actual.high"},
-        "size": {"value": 12},
-        "color": {"value": "#000"}
+        "y2": {"field": "actual.high"}
       }
     },
     {
-      "mark": {"type": "bar", "style": "box"},
+      "mark": {"type": "bar", "size": 12, "color": "#000"},
       "encoding": {
         "y": {"field": "forecast.low.low"},
-        "y2": {"field": "forecast.low.high"},
-        "size": {"value": 12},
-        "color": {"value": "#000"}
+        "y2": {"field": "forecast.low.high"}
       }
     },
     {
-      "mark": {"type": "bar", "style": "box"},
+      "mark": {"type": "bar", "size": 3, "color": "#000"},
       "encoding": {
         "y": {"field": "forecast.low.high"},
-        "y2": {"field": "forecast.high.low"},
-        "size": {"value": 3},
-        "color": {"value": "#000"}
+        "y2": {"field": "forecast.high.low"}
       }
     },
     {
-      "mark": {"type": "bar", "style": "box"},
+      "mark": {"type": "bar", "size": 12, "color": "#000"},
       "encoding": {
         "y": {"field": "forecast.high.low"},
-        "y2": {"field": "forecast.high.high"},
-        "size": {"value": 12},
-        "color": {"value": "#000"}
+        "y2": {"field": "forecast.high.high"}
       }
     },
     {

diff --git a/examples/specs/normalized/bar_layered_weather_normalized.vl.json b/examples/specs/normalized/bar_layered_weather_normalized.vl.json
@@ -1,6 +1,7 @@
 {
   "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
   "description": "A layered bar chart with floating bars representing weekly weather data",
+  "config": {"style": {"hilo": {"size": 20}}},
   "title": {
     "text": ["Weekly Weather", "Observations and Predictions"],
     "frame": "group"
@@ -10,7 +11,7 @@
   "height": 200,
   "layer": [
     {
-      "mark": {"type": "bar", "style": "box"},
+      "mark": {"type": "bar", "size": 20, "color": "#ccc"},
       "encoding": {
         "x": {
           "field": "id",
@@ -30,13 +31,11 @@
           "axis": {"title": "Temperature (F)"},
           "field": "record.low"
         },
-        "y2": {"field": "record.high"},
-        "size": {"value": 20},
-        "color": {"value": "#ccc"}
+        "y2": {"field": "record.high"}
       }
     },
     {
-      "mark": {"type": "bar", "style": "box"},
+      "mark": {"type": "bar", "size": 20, "color": "#999"},
       "encoding": {
         "x": {
           "field": "id",
@@ -56,13 +55,11 @@
           "axis": {"title": "Temperature (F)"},
           "field": "normal.low"
         },
-        "y2": {"field": "normal.high"},
-        "size": {"value": 20},
-        "color": {"value": "#999"}
+        "y2": {"field": "normal.high"}
       }
     },
     {
-      "mark": {"type": "bar", "style": "box"},
+      "mark": {"type": "bar", "size": 12, "color": "#000"},
       "encoding": {
         "x": {
           "field": "id",
@@ -82,13 +79,11 @@
           "axis": {"title": "Temperature (F)"},
           "field": "actual.low"
         },
-        "y2": {"field": "actual.high"},
-        "size": {"value": 12},
-        "color": {"value": "#000"}
+        "y2": {"field": "actual.high"}
       }
     },
     {
-      "mark": {"type": "bar", "style": "box"},
+      "mark": {"type": "bar", "size": 12, "color": "#000"},
       "encoding": {
         "x": {
           "field": "id",
@@ -108,13 +103,11 @@
           "axis": {"title": "Temperature (F)"},
           "field": "forecast.low.low"
         },
-        "y2": {"field": "forecast.low.high"},
-        "size": {"value": 12},
-        "color": {"value": "#000"}
+        "y2": {"field": "forecast.low.high"}
       }
     },
     {
-      "mark": {"type": "bar", "style": "box"},
+      "mark": {"type": "bar", "size": 3, "color": "#000"},
       "encoding": {
         "x": {
           "field": "id",
@@ -134,13 +127,11 @@
           "axis": {"title": "Temperature (F)"},
           "field": "forecast.low.high"
         },
-        "y2": {"field": "forecast.high.low"},
-        "size": {"value": 3},
-        "color": {"value": "#000"}
+        "y2": {"field": "forecast.high.low"}
       }
     },
     {
-      "mark": {"type": "bar", "style": "box"},
+      "mark": {"type": "bar", "size": 12, "color": "#000"},
       "encoding": {
         "x": {
           "field": "id",
@@ -160,9 +151,7 @@
           "axis": {"title": "Temperature (F)"},
           "field": "forecast.high.low"
         },
-        "y2": {"field": "forecast.high.high"},
-        "size": {"value": 12},
-        "color": {"value": "#000"}
+        "y2": {"field": "forecast.high.high"}
       }
     },
     {