diff --git a/examples/compiled/bar_heatlane.png b/examples/compiled/bar_heatlane.png new file mode 100644 index 0000000000..779a28f8d2 Binary files /dev/null and b/examples/compiled/bar_heatlane.png differ diff --git a/examples/compiled/bar_heatlane.svg b/examples/compiled/bar_heatlane.svg new file mode 100644 index 0000000000..b72c127fcb --- /dev/null +++ b/examples/compiled/bar_heatlane.svg @@ -0,0 +1 @@ +020406080100120140160180200220240Horsepower20406080100120countHeat Lane of Horsepower \ No newline at end of file diff --git a/examples/compiled/bar_heatlane.vg.json b/examples/compiled/bar_heatlane.vg.json new file mode 100644 index 0000000000..910871071b --- /dev/null +++ b/examples/compiled/bar_heatlane.vg.json @@ -0,0 +1,150 @@ +{ + "$schema": "https://vega.github.io/schema/vega/v5.json", + "description": "Heat lane chart based on https://www.smashingmagazine.com/2022/07/accessibility-first-approach-chart-visual-design/", + "background": "white", + "padding": 5, + "width": 400, + "height": 150, + "title": {"text": "Heat Lane of Horsepower", "frame": "group"}, + "style": "cell", + "data": [ + { + "name": "source_0", + "url": "data/cars.json", + "format": {"type": "json"}, + "transform": [ + { + "type": "extent", + "field": "Horsepower", + "signal": "bin_maxbins_10_Horsepower_extent" + }, + { + "type": "bin", + "field": "Horsepower", + "as": ["bin_Horsepower_start", "bin_Horsepower_end"], + "signal": "bin_maxbins_10_Horsepower_bins", + "extent": {"signal": "bin_maxbins_10_Horsepower_extent"}, + "maxbins": 10 + }, + { + "type": "aggregate", + "groupby": ["bin_Horsepower_start", "bin_Horsepower_end"], + "ops": ["count"], + "fields": [null], + "as": ["count"] + }, + { + "type": "extent", + "field": "count", + "signal": "bin_maxbins_10_count_extent" + }, + { + "type": "bin", + "field": "count", + "as": ["bin_count_start", "bin_count_end"], + "signal": "bin_maxbins_10_count_bins", + "extent": {"signal": "bin_maxbins_10_count_extent"}, + "maxbins": 10 + }, + {"type": "formula", "expr": "-datum.bin_count_end/2", "as": "y2"}, + {"type": "formula", "expr": "datum.bin_count_end/2", "as": "y"}, + { + "type": "joinaggregate", + "as": ["max_bin_count_end"], + "ops": ["max"], + "fields": ["bin_count_end"] + }, + { + "type": "filter", + "expr": "isValid(datum[\"bin_Horsepower_start\"]) && isFinite(+datum[\"bin_Horsepower_start\"])" + } + ] + } + ], + "marks": [ + { + "name": "layer_0_marks", + "type": "rect", + "style": ["bar"], + "from": {"data": "source_0"}, + "encode": { + "update": { + "cornerRadius": {"value": 3}, + "fill": {"scale": "color", "field": "max_bin_count_end"}, + "ariaRoleDescription": {"value": "bar"}, + "description": { + "signal": "\"Horsepower: \" + (format(datum[\"bin_Horsepower_start\"], \"\")) + \"; y: \" + (isValid(datum[\"y\"]) ? datum[\"y\"] : \"\"+datum[\"y\"]) + \"; bin_Horsepower_end: \" + (format(datum[\"bin_Horsepower_end\"], \"\")) + \"; y2: \" + (isValid(datum[\"y2\"]) ? datum[\"y2\"] : \"\"+datum[\"y2\"]) + \"; count: \" + (isValid(datum[\"max_bin_count_end\"]) ? datum[\"max_bin_count_end\"] : \"\"+datum[\"max_bin_count_end\"])" + }, + "x": {"scale": "x", "field": "bin_Horsepower_start", "offset": 2}, + "x2": {"scale": "x", "field": "bin_Horsepower_end", "offset": -2}, + "y": {"scale": "y", "field": "y", "band": 0.5}, + "y2": {"scale": "y", "field": "y2", "band": 0.5} + } + } + }, + { + "name": "layer_1_marks", + "type": "rect", + "style": ["bar"], + "from": {"data": "source_0"}, + "encode": { + "update": { + "fill": {"scale": "color", "field": "bin_count_end"}, + "ariaRoleDescription": {"value": "bar"}, + "description": { + "signal": "\"Horsepower: \" + (format(datum[\"bin_Horsepower_start\"], \"\")) + \"; y: \" + (isValid(datum[\"y\"]) ? datum[\"y\"] : \"\"+datum[\"y\"]) + \"; bin_Horsepower_end: \" + (format(datum[\"bin_Horsepower_end\"], \"\")) + \"; y2: \" + (isValid(datum[\"y2\"]) ? datum[\"y2\"] : \"\"+datum[\"y2\"]) + \"; count: \" + (isValid(datum[\"bin_count_end\"]) ? datum[\"bin_count_end\"] : \"\"+datum[\"bin_count_end\"])" + }, + "x": {"scale": "x", "field": "bin_Horsepower_start", "offset": 2}, + "x2": {"scale": "x", "field": "bin_Horsepower_end", "offset": -2}, + "y": {"scale": "y", "field": "y", "offset": -3, "band": 0.5}, + "y2": {"scale": "y", "field": "y2", "offset": 3, "band": 0.5} + } + } + } + ], + "scales": [ + { + "name": "x", + "type": "linear", + "domain": { + "data": "source_0", + "fields": ["bin_Horsepower_start", "bin_Horsepower_end"] + }, + "range": [0, {"signal": "width"}], + "nice": true, + "zero": true + }, + { + "name": "y", + "type": "band", + "domain": {"data": "source_0", "fields": ["y", "y2"], "sort": true}, + "range": [0, {"signal": "height"}], + "paddingInner": 0.1, + "paddingOuter": 0.05 + }, + { + "name": "color", + "type": "ordinal", + "domain": { + "data": "source_0", + "fields": ["max_bin_count_end", "bin_count_end"], + "sort": true + }, + "range": {"scheme": "lighttealblue"}, + "interpolate": "hcl" + } + ], + "axes": [ + { + "scale": "x", + "orient": "bottom", + "grid": false, + "title": "Horsepower", + "labelFlush": true, + "labelOverlap": true, + "tickCount": {"signal": "ceil(width/40)"}, + "zindex": 0 + } + ], + "legends": [{"title": "count", "fill": "color", "symbolType": "square"}] +} diff --git a/examples/specs/bar_heatlane.vl.json b/examples/specs/bar_heatlane.vl.json new file mode 100644 index 0000000000..6ed9fb5a0f --- /dev/null +++ b/examples/specs/bar_heatlane.vl.json @@ -0,0 +1,68 @@ +{ + "$schema": "https://vega.github.io/schema/vega-lite/v5.json", + "description": "Heat lane chart based on https://www.smashingmagazine.com/2022/07/accessibility-first-approach-chart-visual-design/", + "data": {"url": "data/cars.json"}, + "height": 150, + "width": 400, + "title": "Heat Lane of Horsepower", + "transform": [ + { + "bin": true, + "field": "Horsepower", + "as": ["bin_Horsepower_start", "bin_Horsepower_end"] + }, + { + "aggregate": [{"op": "count", "as": "count"}], + "groupby": ["bin_Horsepower_start", "bin_Horsepower_end"] + }, + {"bin": true, "field": "count", "as": ["bin_count_start", "bin_count_end"]}, + {"calculate": "-datum.bin_count_end/2", "as": "y2"}, + {"calculate": "datum.bin_count_end/2", "as": "y"}, + { + "joinaggregate": [ + {"field": "bin_count_end", "op": "max", "as": "max_bin_count_end"} + ] + } + ], + "encoding": { + "x": { + "field": "bin_Horsepower_start", + "type": "quantitative", + "title": "Horsepower", + "axis": {"grid": false} + }, + "x2": {"field": "bin_Horsepower_end"}, + "y": {"field": "y", "axis": null}, + "y2": {"field": "y2"} + }, + "layer": [ + { + "mark": { + "type": "bar", + "xOffset": 2, + "x2Offset": -2, + "cornerRadius": 3 + }, + "encoding": { + "color": { + "field": "max_bin_count_end", + "type": "ordinal", + "title": "count", + "scale": {"scheme": "lighttealblue"} + } + } + }, + { + "mark": { + "type": "bar", + "xOffset": 2, + "x2Offset": -2, + "yOffset": -3, + "y2Offset": 3 + }, + "encoding": { + "color": {"field": "bin_count_end", "type": "ordinal", "title": "count"} + } + } + ] +} diff --git a/examples/specs/normalized/bar_heatlane_normalized.vl.json b/examples/specs/normalized/bar_heatlane_normalized.vl.json new file mode 100644 index 0000000000..0aa01abbdf --- /dev/null +++ b/examples/specs/normalized/bar_heatlane_normalized.vl.json @@ -0,0 +1,70 @@ +{ + "$schema": "https://vega.github.io/schema/vega-lite/v5.json", + "description": "Heat lane chart based on https://www.smashingmagazine.com/2022/07/accessibility-first-approach-chart-visual-design/", + "data": {"url": "data/cars.json"}, + "height": 150, + "width": 400, + "title": "Heat Lane of Horsepower", + "layer": [ + { + "mark": {"type": "bar", "xOffset": 2, "x2Offset": -2, "cornerRadius": 3}, + "encoding": { + "x": { + "field": "bin_Horsepower_start", + "type": "quantitative", + "title": "Horsepower", + "axis": {"grid": false} + }, + "x2": {"field": "bin_Horsepower_end"}, + "y": {"field": "y", "axis": null}, + "y2": {"field": "y2"}, + "color": { + "field": "max_bin_count_end", + "type": "ordinal", + "title": "count", + "scale": {"scheme": "lighttealblue"} + } + } + }, + { + "mark": { + "type": "bar", + "xOffset": 2, + "x2Offset": -2, + "yOffset": -3, + "y2Offset": 3 + }, + "encoding": { + "x": { + "field": "bin_Horsepower_start", + "type": "quantitative", + "title": "Horsepower", + "axis": {"grid": false} + }, + "x2": {"field": "bin_Horsepower_end"}, + "y": {"field": "y", "axis": null}, + "y2": {"field": "y2"}, + "color": {"field": "bin_count_end", "type": "ordinal", "title": "count"} + } + } + ], + "transform": [ + { + "bin": true, + "field": "Horsepower", + "as": ["bin_Horsepower_start", "bin_Horsepower_end"] + }, + { + "aggregate": [{"op": "count", "as": "count"}], + "groupby": ["bin_Horsepower_start", "bin_Horsepower_end"] + }, + {"bin": true, "field": "count", "as": ["bin_count_start", "bin_count_end"]}, + {"calculate": "-datum.bin_count_end/2", "as": "y2"}, + {"calculate": "datum.bin_count_end/2", "as": "y"}, + { + "joinaggregate": [ + {"field": "bin_count_end", "op": "max", "as": "max_bin_count_end"} + ] + } + ] +} \ No newline at end of file diff --git a/site/_data/examples.json b/site/_data/examples.json index 4c79d6466e..30a30aa79d 100644 --- a/site/_data/examples.json +++ b/site/_data/examples.json @@ -95,6 +95,10 @@ { "name": "bar_axis_space_saving", "title": "Bar Chart with a Spacing-Saving Y-Axis" + }, + { + "name": "bar_heatlane", + "title": "Heat Lane Chart" } ], "Histograms, Density Plots, and Dot Plots": [ diff --git a/site/_includes/docs_toc.md b/site/_includes/docs_toc.md index e658f7baf1..35cfa70926 100644 --- a/site/_includes/docs_toc.md +++ b/site/_includes/docs_toc.md @@ -287,6 +287,7 @@ - [Nominal]({{site.baseurl}}/docs/type.html#nominal) - [GeoJSON]({{site.baseurl}}/docs/type.html#geojson) - [Value]({{site.baseurl}}/docs/value.html) + - [Examples]({{site.baseurl}}/docs/value.html#examples) - [Projection]({{site.baseurl}}/docs/projection.html) - [Documentation Overview]({{site.baseurl}}/docs/projection.html#documentation-overview) - [Projection Properties]({{site.baseurl}}/docs/projection.html#projection-properties) @@ -329,6 +330,7 @@ - [Using Parameters]({{site.baseurl}}/docs/parameter.html#using-parameters) - [Selection Configuration]({{site.baseurl}}/docs/parameter.html#config) - [Value]({{site.baseurl}}/docs/value.html) + - [Examples]({{site.baseurl}}/docs/value.html#examples) - [Expr]({{site.baseurl}}/docs/parameter.html) - [Documentation Overview]({{site.baseurl}}/docs/parameter.html#documentation-overview) - [Defining a Parameter]({{site.baseurl}}/docs/parameter.html#defining-a-parameter)