diff --git a/examples/compiled/bar_1d_rangestep_config.svg b/examples/compiled/bar_1d_rangestep_config.svg
deleted file mode 100644
index fd8ea2dd13..0000000000
--- a/examples/compiled/bar_1d_rangestep_config.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/examples/compiled/bar_1d_rangestep_config.vg.json b/examples/compiled/bar_1d_rangestep_config.vg.json
deleted file mode 100644
index 98d19355b0..0000000000
--- a/examples/compiled/bar_1d_rangestep_config.vg.json
+++ /dev/null
@@ -1,77 +0,0 @@
-{
- "$schema": "https://vega.github.io/schema/vega/v5.json",
- "autosize": "pad",
- "padding": 5,
- "width": 200,
- "height": 21,
- "style": "cell",
- "data": [
- {
- "name": "source_0",
- "url": "data/population.json",
- "format": {"type": "json"},
- "transform": [
- {"type": "filter", "expr": "datum.year == 2000"},
- {
- "type": "aggregate",
- "groupby": [],
- "ops": ["sum"],
- "fields": ["people"],
- "as": ["sum_people"]
- }
- ]
- }
- ],
- "signals": [{"name": "height", "update": "height"}],
- "marks": [
- {
- "name": "marks",
- "type": "rect",
- "style": ["bar"],
- "from": {"data": "source_0"},
- "encode": {
- "update": {
- "fill": {"value": "#4c78a8"},
- "x": {"scale": "x", "field": "sum_people"},
- "x2": {"scale": "x", "value": 0},
- "yc": {"signal": "height", "mult": 0.5},
- "height": {"value": 19}
- }
- }
- }
- ],
- "scales": [
- {
- "name": "x",
- "type": "linear",
- "domain": {"data": "source_0", "field": "sum_people"},
- "range": [0, {"signal": "width"}],
- "nice": true,
- "zero": true
- }
- ],
- "axes": [
- {
- "scale": "x",
- "orient": "bottom",
- "grid": false,
- "title": "population",
- "labelFlush": true,
- "labelOverlap": true,
- "tickCount": {"signal": "ceil(width/40)"},
- "zindex": 1
- },
- {
- "scale": "x",
- "orient": "bottom",
- "grid": true,
- "tickCount": {"signal": "ceil(width/40)"},
- "domain": false,
- "labels": false,
- "maxExtent": 0,
- "minExtent": 0,
- "ticks": false,
- "zindex": 0
- }
- ]
-}
diff --git a/examples/compiled/bar_size_explicit.svg b/examples/compiled/bar_size_explicit.svg
deleted file mode 100644
index 296f98825a..0000000000
--- a/examples/compiled/bar_size_explicit.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/examples/compiled/bar_size_explicit.vg.json b/examples/compiled/bar_size_explicit.vg.json
deleted file mode 100644
index 6b9e9cb67e..0000000000
--- a/examples/compiled/bar_size_explicit.vg.json
+++ /dev/null
@@ -1,93 +0,0 @@
-{
- "$schema": "https://vega.github.io/schema/vega/v5.json",
- "autosize": "pad",
- "padding": 5,
- "width": 120,
- "height": 120,
- "style": "cell",
- "data": [
- {
- "name": "source_0",
- "url": "data/cars.json",
- "format": {"type": "json"},
- "transform": [
- {
- "type": "aggregate",
- "groupby": ["Origin"],
- "ops": ["count"],
- "fields": [null],
- "as": ["__count"]
- }
- ]
- }
- ],
- "marks": [
- {
- "name": "marks",
- "type": "rect",
- "style": ["bar"],
- "from": {"data": "source_0"},
- "encode": {
- "update": {
- "fill": {"value": "#4c78a8"},
- "x": {"scale": "x", "field": "Origin"},
- "width": {"scale": "x", "band": true},
- "y": {"scale": "y", "field": "__count"},
- "y2": {"scale": "y", "value": 0}
- }
- }
- }
- ],
- "scales": [
- {
- "name": "x",
- "type": "band",
- "domain": {"data": "source_0", "field": "Origin", "sort": true},
- "range": [0, {"signal": "width"}],
- "paddingInner": 0.1,
- "paddingOuter": 0.05
- },
- {
- "name": "y",
- "type": "linear",
- "domain": {"data": "source_0", "field": "__count"},
- "range": [{"signal": "height"}, 0],
- "nice": true,
- "zero": true
- }
- ],
- "axes": [
- {
- "scale": "x",
- "orient": "bottom",
- "grid": false,
- "title": "Origin",
- "labelAlign": "right",
- "labelAngle": 270,
- "labelBaseline": "middle",
- "zindex": 1
- },
- {
- "scale": "y",
- "orient": "left",
- "grid": false,
- "title": "Count of Records",
- "labelOverlap": true,
- "tickCount": {"signal": "ceil(height/40)"},
- "zindex": 1
- },
- {
- "scale": "y",
- "orient": "left",
- "gridScale": "x",
- "grid": true,
- "tickCount": {"signal": "ceil(height/40)"},
- "domain": false,
- "labels": false,
- "maxExtent": 0,
- "minExtent": 0,
- "ticks": false,
- "zindex": 0
- }
- ]
-}
diff --git a/examples/specs/bar_1d_rangestep_config.vl.json b/examples/specs/bar_1d_step_config.vl.json
similarity index 86%
rename from examples/specs/bar_1d_rangestep_config.vl.json
rename to examples/specs/bar_1d_step_config.vl.json
index 454b773900..3746ff2ef1 100644
--- a/examples/specs/bar_1d_rangestep_config.vl.json
+++ b/examples/specs/bar_1d_step_config.vl.json
@@ -11,5 +11,5 @@
"axis": {"title": "population"}
}
},
- "config": {"view": {"discreteWidth": {"step": 21}}}
+ "config": {"view": {"step": 15}}
}
diff --git a/examples/specs/bar_size_explicit.vl.json b/examples/specs/bar_size_default.vl.json
similarity index 89%
rename from examples/specs/bar_size_explicit.vl.json
rename to examples/specs/bar_size_default.vl.json
index af033dceeb..a90d21efc1 100644
--- a/examples/specs/bar_size_explicit.vl.json
+++ b/examples/specs/bar_size_default.vl.json
@@ -1,7 +1,5 @@
{
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
- "width": 120,
- "height": 120,
"data": {"url": "data/cars.json"},
"mark": "bar",
"encoding": {
diff --git a/examples/specs/bar_size_step_small.vl.json b/examples/specs/bar_size_step_small.vl.json
index b0917ea577..3c992f9782 100644
--- a/examples/specs/bar_size_step_small.vl.json
+++ b/examples/specs/bar_size_step_small.vl.json
@@ -1,16 +1,16 @@
{
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
- "data": {
- "values": [
- {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},
- {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},
- {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52}
- ]
- },
- "width": {"step": 11},
+ "width": {"step": 40},
+ "data": {"url": "data/cars.json"},
"mark": "bar",
"encoding": {
- "x": {"field": "a", "type": "ordinal"},
- "y": {"field": "b", "type": "quantitative"}
+ "x": {
+ "field": "Origin",
+ "type": "nominal"
+ },
+ "y": {
+ "aggregate": "count",
+ "type": "quantitative"
+ }
}
}
diff --git a/site/docs/encoding/scale.md b/site/docs/encoding/scale.md
index e37b238963..3aba38bded 100644
--- a/site/docs/encoding/scale.md
+++ b/site/docs/encoding/scale.md
@@ -287,9 +287,15 @@ For example, the following bar chart has uses a band scale for its x-position.
{:#range-step}
-To customize the step size of band scales for x/y-fields, we can set the step property of the view's `width`/`height`:
+To customize the step size of band scales for x/y-fields, we can set the step property of the view's `width`/`height`.
-
+For example, we can either make a bar chart have a fixed width:
+
+
+
+or set the width per discrete step:
+
+
To customize the range of band and point scales, users can provide the following properties:
diff --git a/site/docs/spec.md b/site/docs/spec.md
index 8629f043f0..b9e24653eb 100644
--- a/site/docs/spec.md
+++ b/site/docs/spec.md
@@ -139,4 +139,8 @@ In addition, the following properties of the `view` configuration determine the
{% include table.html props="continuousWidth,continuousHeight,discreteWidth,discreteHeight,step" source="ViewConfig" %}
+For example, setting the `step` property in the view config can adjust default discrete step in the plot.
+
+
+
**For more information about view size, please see the [size](size.html) documentation.**
diff --git a/site/docs/view/size.md b/site/docs/view/size.md
index 5c98405aa1..359f4ace99 100644
--- a/site/docs/view/size.md
+++ b/site/docs/view/size.md
@@ -17,41 +17,39 @@ This page describe how to adjust width and height of visualizations in Vega-lite
## Width and Height of Single and Layered Plots
-[Single view](spec.html#single) and [layer](layer.html) specifications can contain `width` and `height` properties for customizing the view size. By default, `width` and `height` set the size of the data rectangle (plotting) dimensions. To set the overall size of the visualization, the [`autosize`](#autosize) property can be specified.
+[Single view](spec.html#single) and [layer](layer.html) specifications can contain the `width` and `height` properties for customizing the view size. By default, `width` and `height` set the size of the data rectangle (plotting) dimensions. To set the overall size of the visualization, the [`autosize`](#autosize) property can be specified.
-### Explicitly Specified Width and Height
-
-When the top-level `width` property is specified, the width of the single plot is the specified value for all scale types of the x-axis. Similarly, when the top-level `height` property is specified, the height of the single plot is the specified value for all scale types of the y-axis.
+### Default Width and Height
-
+If the top-level `width` / `height` property is not specified, the width / height of a single view is determined based on the view config.
-**Note**: If numeric `rangeStep` for a discrete x/y-scale is specified when `width` / `height` is specified, the `rangeStep` will be ignored (overridden with `null`).
+The width will be based on `config.view.continuousWidth` for a plot with a continuous x-field (`200` by default). For a plot with either a discrete x-field or no x-field, the width is based on `config.view.discreteWidth`, which is set to have step width based on the default step size (`config.view.step` -- `20` by default).
-**Warning**: If the cardinality of the x/y-field's domain is too high, the `rangeStep` might become less than one pixel and the mark might not appear correctly.
+Similarly, the height will be based on `config.view.continuousHeight` for a plot with a continuous y-field and `config.view.discreteHeight` for a plot with either a discrete y-field or no y-field.
-
+For example, the following bar chart has a fixed 200px height and a 20px width per x-field's discrete step.
-### Default Width and Height
+
-If the top-level `width` / `height` property is not specified, the width / height of a single view is determined by the properties of the `x` / `y` channel:
+### Specifying Fixed Width and Height
-- If (1) the view's [`autosize`](#autosize) type is `"fit"` or (2) the `x` / `y` axis has a continuous scale (either quantitative or time) or a discrete scale with `rangeStep` = `null`, the width/height is drawn directly from the [`config.view.width`](spec.html#config) / [`config.view.height`](spec.html#config) property.
+The view `width` and `height` property can be set to numbers indicating fixed width and height of the plot.
-- If the [`autosize`](#autosize) type is not `"fit"` and the `x` / `y` channel has a [band or point scale](scale.html#band) in which `rangeStep` is a number or unspecified, the width / height is [determined based on the scale's range step, paddings, and the cardinality of the encoded field (the number of possible distinct values of the field)](scale.html#band).
+For a discrete axis, specifying a fixed size (e.g., width in the following plot) would automatically scale the discrete step to fit the size.
-This example shows a plot with a continuous y-scale and a discrete x-scale:
+
-
+**Warning**: If the cardinality of a discrete x- or y-field is too high, the plot might become too packed.
-- If the `x` / `y` channel has a discrete scale with `rangeStep` = `null`, the width / height is drawn directly from the [`config.view.width`](spec.html#config) / [`config.view.height`](spec.html#config) property and the band of the scale will be adjusted to fit to the width.
+
-
+### Specifying Width and Height per Discrete Step
-- If `x` / `y` is not mapped to a field, the width / height is derived from [config.scale.rangeStep](#scale-config).
+For a discrete x-field or discrete y-field, we can also set `width` (or `height`) to be an object indicating the width (or height) per discrete `step`.
-For example, the following plot use `21` as a default height.
+
-
+**Note:** By default, Vega-Lite sets padding for [band and point scales](https://vega.github.io/vega-lite/docs/scale.html#band) such that _width/height = number of unique values \* step_. See [the scale documentation](https://vega.github.io/vega-lite/docs/scale.html#band) to read more about the relationship among width/height, step, and other scale properties.
### Autosize
@@ -76,13 +74,13 @@ In order to `fit` a chart into specified dimensions, it has to satisfy two requi
#### Example
-Below is an example of a bar chart that fits exactly into 300px width.
+Below is an example of a bar chart that fits exactly into 300px width and the default 200px height.
## Width and Height of Multi-View Displays
-Currently, width and height of multi-view displays including [concatenated](concat.html), [faceted](facet.html), and [repeated](repeat.html) are determined based on the size of the composed unit and layered views. To adjust the size of multi-view displays, you can `width` and `height` of the inner unit and layered views.
+The width and height of multi-view displays including [concatenated](concat.html), [faceted](facet.html), and [repeated](repeat.html) are determined based on the size of the composed unit and layered views. To adjust the size of multi-view displays, you can set the `width` and `height` properties of the inner unit and layered views.
For example, you can adjust `width` and `height` of the inner single view specification to adjust the size of a faceted plot.