2f:null 30:["$","title",null,{"children":"Vega top-level width, height, padding, autosize options | Daniel LaLiberte | Observable"}] 35:Tab5,chartSpec = ({ "description": "A basic bar chart example, with value labels shown upon mouse hover.", "$schema": "https://vega.github.io/schema/vega/v5.json", background: '#f0f0f0', config: { group: { "fill": "#dedede" } }, "width": 700, "height": 200, "padding": 15, // Are any of these possible? // {top: {signal: 'top'}, left: {signal: 'left'}, ...}, // {'signal': 'padding'}, // {signal: '{top: 25}'}, "signals": [ { "name": "tooltip", "value": {}, "on": [ {"events": "rect:mouseover", "update": "datum"}, {"events": "rect:mouseout", "update": "{}"} ] }, ], "data": [ { "name": "table", "values": [ {"category": "A", "amount": 28}, {"category": "B", "amount": 55}, {"category": "C", "amount": 43}, {"category": "D", "amount": 91}, {"category": "E", "amount": 81}, {"category": "F", "amount": 53}, {"category": "G", "amount": 19}, {"category": "H", "amount": 87} ] } ], "scales": [ { "name": "xscale", "type": "band", "domain": {"data": "table", "field": "category"}, "range": "width", "padding": 0.05, "round": true }, { "name": "yscale", "domain": {"data": "table", "field": "amount"}, "nice": true, "range": "height" } ], "axes": [ { "orient": "bottom", "scale": "xscale" }, { "orient": "left", "scale": "yscale" } ], "marks": [ { "type": "rect", "from": {"data":"table"}, "encode": { "enter": {}, "update": { "x": {"scale": "xscale", "field": "category"}, "width": {"scale": "xscale", "band": 1}, "y": {"scale": "yscale", "field": "amount"}, "y2": {"scale": "yscale", "value": 0}, "fill": {"value": "steelblue"} }, "hover": { "fill": {"value": "red"} } } }, { "type": "text", "encode": { "enter": { "align": {"value": "center"}, "baseline": {"value": "bottom"}, "fill": {"value": "#333"} }, "update": { "x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5}, "y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2}, "text": {"signal": "tooltip.amount"}, "fillOpacity": [ {"test": "datum === tooltip", "value": 0}, {"value": 1} ] } } } ] })36:T91e,{ const spec = {...chartSpec}; // Should be an easier way to do this: const autosize = { type: options1['autosize.type'], contains: options1['autosize.contains'], resize: options1['autosize.resize'] }; const padding = { top: options1['padding.top'], bottom: options1['padding.bottom'], left: options1['padding.left'], right: options1['padding.right'] }; spec.autosize = { ...autosize }; spec.padding = { ...padding }; spec.width = {'signal': 'inputWidth'}; spec.height = {'signal': 'inputHeight'}; // spec.padding = {'signal': 'inputPadding'}; // Are any of these possible? // {top: {signal: 'top'}, left: {signal: 'left'}, ...}, // {'signal': 'padding'}, // {signal: '{top: 25}'}, spec.signals = [ /* { "name": "autosize", "value": 'pad', "bind": {"input": "select", options: ['pad', "fit", "fit-x", "fit-y", "none"], }, }, { "name": "contains", "value": 'content', "bind": {"input": "select", options: ['content', "padding"], }, }, */ { "name": "tooltip", "value": {}, "on": [ {"events": "rect:mouseover", "update": "datum"}, {"events": "rect:mouseout", "update": "{}"} ] }, { "name": "inputWidth", "value": 500, "bind": {"input": "range", "min": 50, "max": 700, "step": 5}, }, { "name": "inputHeight", "value": 300, "bind": {"input": "range", "min": 50, "max": 700, "step": 5}, }, /* { "name": "inputPadding", "value": 5, "bind": {"input": "range", "min": 0, "max": 100, "step": 1}, }, /* How do signal objects work? { "name": "top", "value": 5, "bind": {"input": "range", "min": 0, "max": 100, "step": 1}, }, { "name": "padding", "value": 7, // {top: {signal: 'top'}, bottom: 2, left: 2, right: 2}, "bind": {"input": "range", "min": 0, "max": 100, "step": 1}, }, */ ]; let div = document.createElement('div'); div.style = 'width: 600px; outline: 1px solid black'; createChart(div, spec); yield div; }37:T4ce,{ const spec = {...chartSpec}; // Should be an easier way to do this: const autosize = { type: options2['autosize.type'], contains: options2['autosize.contains'], resize: options2['autosize.resize'] }; const padding = { top: options2['padding.top'], bottom: options2['padding.bottom'], left: options2['padding.left'], right: options2['padding.right'] }; spec.autosize = { ...autosize }; spec.padding = { ...padding }; spec.width = {'signal': 'inputWidth'}; spec.height = {'signal': 'inputHeight'}; spec.signals = [ { "name": "tooltip", "value": {}, "on": [ {"events": "rect:mouseover", "update": "datum"}, {"events": "rect:mouseout", "update": "{}"} ] }, { "name": "inputWidth", "value": 500, "bind": {"input": "range", "min": 50, "max": 700, "step": 5}, }, { "name": "inputHeight", "value": 300, "bind": {"input": "range", "min": 50, "max": 700, "step": 5}, }, ]; let div = document.createElement('div'); div.style = 'width: 600px; outline: 1px solid black'; createChart(div, spec); yield div; }38:T886,{ const spec = {...chartSpec}; spec.autosize = {type: {signal: 'autosizeType'}, resize: false, contains: {signal: 'contains'}}; // {type: 'pad', resize: false, contains: 'content'}; // How can we do something like this: // {type: {signal: 'autosize'}, resize: false, contains: {signal: 'contains'}}, spec.width = {'signal': 'inputWidth'}; spec.height = {'signal': 'inputHeight'}; spec.padding = {'signal': 'inputPadding'}; // Are any of these possible? // {top: {signal: 'top'}, left: {signal: 'left'}, ...}, // {'signal': 'padding'}, // {signal: '{top: 25}'}, spec.signals = [ /**/ { "name": "autosize.type", "value": 'pad', "bind": {"input": "select", options: ['pad', "fit", "fit-x", "fit-y", "none"], }, }, { "name": "autosize.contains", "value": 'content', "bind": {"input": "select", options: ['content', "padding"], }, }, /* */ { "name": "tooltip", "value": {}, "on": [ {"events": "rect:mouseover", "update": "datum"}, {"events": "rect:mouseout", "update": "{}"} ] }, { "name": "inputWidth", "value": 500, "bind": {"input": "range", "min": 50, "max": 700, "step": 5}, }, { "name": "inputHeight", "value": 300, "bind": {"input": "range", "min": 50, "max": 700, "step": 5}, }, { "name": "inputPadding", "value": 5, "bind": {"input": "range", "min": 0, "max": 100, "step": 1}, }, /* How do signal objects work? { "name": "top", "value": 5, "bind": {"input": "range", "min": 0, "max": 100, "step": 1}, }, { "name": "padding", "value": 7, // {top: {signal: 'top'}, bottom: 2, left: 2, right: 2}, "bind": {"input": "range", "min": 0, "max": 100, "step": 1}, }, */ ]; let div = document.createElement('div'); div.style = 'width: 600px; outline: 1px solid black'; createChart(div, spec); yield div; }39:[] 33:{"id":"3c5d77ed828c76fc","slug":"vega-top-level-width-height-padding-autosize-options","title":"Vega top-level width, height, padding, autosize options","thumbnail":"c1591a7b0560a8687767f24da526fa7f1990232d79f50298d9df85cd4b630456","access_level":"public","create_time":"$D2020-08-15T18:25:41.744Z","update_time":"$D2020-10-23T16:35:11.116Z","view_time":null,"first_public_time":"$D2020-08-20T01:24:05.533Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"88bca6b25e968fae","login":"dlaliberte","name":"Daniel LaLiberte","avatar_url":"https://avatars-next.observableusercontent.com/e5ca1f0f640d7d3579ea69f7316220ebcec267322399e2773f31b91bc2790b15","tier":"starter_2024"},"version":467,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b887ef310da1b17a","login":"dlaliberte","name":"Daniel LaLiberte","avatar_url":"https://avatars-next.observableusercontent.com/e5ca1f0f640d7d3579ea69f7316220ebcec267322399e2773f31b91bc2790b15","tier":null}],"members":[{"type":"individual","id":"b887ef310da1b17a","login":"dlaliberte","name":"Daniel LaLiberte","avatar_url":"https://avatars-next.observableusercontent.com/e5ca1f0f640d7d3579ea69f7316220ebcec267322399e2773f31b91bc2790b15","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Vega top-level width, height, padding, autosize options","cells":[{"id":0,"value":"md`# Vega top-level width, height, padding, autosize options`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"md`An exploration of Vega's top-level options for specifying width, height, and padding, and the autosize option to control them all.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"html`\n\nA few things I'd like to do differently on this page. Help greatly appreciated.\n\n

Use signal objects for autosize and padding. Now using external form, which works, but is not self-contained.\n
Show ruler-like measurements for the container div, the padding, and the plotting region.
e.g. |<----500---->|

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"md`Require vega and vegaTooltip:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"vega = require('vega@5.13')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"vegaTooltip = require('vega-tooltip@0.6.1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"md`Here we define a chartSpec that is used in all the following charts:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"md`And here is a function that will be used to create each of the charts given a div and spec. ` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"createChart = (div, spec) => {\n\n let runtime = vega.parse(spec);\n\n let view = new vega.View(runtime)\n .renderer('svg')\n .initialize(div)\n .hover()\n .run();\n\n let tooltipOpts = {\n showAllFields: true,\n fields: [\n {\n field: '_ts',\n formatType: 'time',\n format: '%x %X'\n }\n ]\n };\n\n vegaTooltip.vega(view, tooltipOpts);\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"html`\n

Responsive Width

\n We can make the chart have a responsive width by using window resize event to update the containerSize via a signal. Shrink the window to redraw the chart with the new width.\n

\n  'signals': [\n      { \n      \"name\": \"width\", \n      \"value\": 0,\n      \"on\": [ { \n        \"events\": { \"source\": \"window\", \"type\": \"resize\" }, \n        \"update\": \"containerSize()[0]\" \n      } ] \n    }\n  ]\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"{\n const spec = {...chartSpec};\n \n spec.padding = 20;\n spec.autosize = { type: 'none', contains: 'padding'},\n\n spec.signals = [\n {\n \"name\": \"tooltip\",\n \"value\": {},\n \"on\": [\n {\"events\": \"rect:mouseover\", \"update\": \"datum\"},\n {\"events\": \"rect:mouseout\", \"update\": \"{}\"}\n ]\n },\n { \n \"name\": \"width\", \n \"value\": 0,\n \"on\": [ { \n \"events\": { \"source\": \"window\", \"type\": \"resize\" }, \n \"update\": \"containerSize()[0]\" \n } ] \n },\n ];\n \n let div = document.createElement('div');\n createChart(div, spec);\n \n yield div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"html`\n

autosize configuration

\nIn the following, I copied the documentation for each option from the Vega specification page. \nFurther clarification is probably needed, so please add comments.\n

\nThe div container, with black border, has a fixed width, 600px, and the height is unspecified. The light gray area is due to padding, and the dark gray area is the \"plotting region\".\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"import {form} from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"html`

\nWould be cool to show the following text associated with each combination of options.

\n

autosize: {type: 'pad', contains: 'content'}

\nAutomatically increase the size of the view such that all visualization content is visible. This is the default autosize setting, and ensures that axes, legends and other items outside the normal width and height are included. The total size will often exceed the specified width, height, and padding.\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"html`\n

autosize: {type: 'pad', contains: 'padding'}

\n(Any difference with contains: 'content'?)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"html`\n

autosize: {type: 'fit', contains: 'content'}

\nAutomatically adjust the layout in an attempt to force the total visualization size to fit within the given width, height and padding values. This setting causes the plotting region to be made smaller in order to accommodate axes, legends and titles. As a result, the value of the width and height signals may be changed to modify the layout. Though effective for many plots, the fit method can not always ensure that all content remains visible. For example, if the axes and legends alone require more space than the specified width and height, some of the content will be clipped. Similar to none, by default the total width will be width + padding.left + padding.right, relative to the original, unmodified width value. \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"html`\n

autosize: {type: 'fit', contains: 'padding'}

\nAutomatically adjust the layout in an attempt to force the total visualization size to fit within the given width, height and padding values. This setting causes the plotting region to be made smaller in order to accommodate axes, legends and titles. As a result, the value of the width and height signals may be changed to modify the layout. Though effective for many plots, the fit method can not always ensure that all content remains visible. For example, if the axes and legends alone require more space than the specified width and height, some of the content will be clipped. Similar to none, by default the total width will be width + padding.left + padding.right, relative to the original, unmodified width value. If autosize.contains is set to \"padding\", the total width will instead be the original width.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"html`\n

autosize: {type: 'none', contains: 'content'}

\nNo automatic sizing is performed. The total visualization size is determined solely by the provided width, height and padding values. For example, by default the total width is calculated as width + padding.left + padding.right. Any content lying outside this region will be clipped. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"html`\n

autosize: {type: 'none', contains: 'padding'}

\nNo automatic sizing is performed. The total visualization size is determined solely by the provided width, height and padding values. For example, by default the total width is calculated as width + padding.left + padding.right. Any content lying outside this region will be clipped. If autosize.contains is set to \"padding\", the total width is instead simply width.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"viewof options1 = form(html``)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"html`\n

Copy of above chart, so you can compare

\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"viewof options2 = form(html``)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"html`\n

Signals for more components

\nI'd like to be able to do something like this, to set the autosize.type and autosize.contains (and similar for padding):\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 34:"$33:body"