30:T53c,{ const brush = vl.selectInterval().encodings('x'); const click = vl.selectMulti().encodings('color'); const scale = { domain: ['sun', 'fog', 'drizzle', 'rain', 'snow'], range: ['#e7ba52', '#a7a7a7', '#aec7e8', '#1f77b4', '#9467bd'] }; const plot1 = vl.markPoint({filled: true}) .encode( vl.color().value('lightgray') .if(brush, vl.color().fieldN('weather').scale(scale).title('Weather')), vl.size().fieldQ('precipitation').scale({domain: [-1, 50], range: [10, 500]}).title('Precipitation'), vl.order().fieldQ('precipitation').sort('descending'), vl.x().timeMD('date').axis({title: 'Date', format: '%b'}), vl.y().fieldQ('temp_max').scale({domain: [-5, 40]}).axis({title: 'Maximum Daily Temperature (°C)'}) ) .width(width) .height(300) .select(brush) .transform(vl.filter(click)); const plot2 = vl.markBar() .encode( vl.color().value('lightgray') .if(click, vl.color().fieldN('weather').scale(scale).title('Weather')), vl.x().count(), vl.y().fieldN('weather').scale({domain: scale.domain}).title('Weather') ) .width(width) .select(click) .transform(vl.filter(brush)); return vl.vconcat(plot1, plot2) .data('data/seattle-weather.csv') .autosize({type: 'fit-x', contains: 'padding'}) .render(); }31:T677,{ const domain = [ 'Beak Length (mm)', 'Beak Depth (mm)', 'Flipper Length (mm)', 'Body Mass (g)' ]; const scale = { type: 'point', padding: 0 }; const axis = { domain: false, ticks: false, title: false, grid: true, gridColor: '#888', labelAngle: 0, labelPadding: 8, labelFontWeight: 'bold' }; const lines = vl.markLine({ strokeWidth: 1.5, opacity: 0.5 }) .encode( vl.color().fieldN('Species').sort('descending'), vl.detail().fieldN('index'), vl.x().fieldO('key').scale(scale).axis(axis), vl.y().fieldQ('fraction').axis(null) ); const labels = vl.markText({ dx: -2, align: 'right', baseline: 'middle' }) .transform( vl.groupby('key').aggregate(vl.min('value').as('min'), vl.max('value').as('max')), vl.fold('min', 'max').as('op', 'value'), vl.groupby('key').window(vl.percent_rank('value').as('fraction')) ) .encode( vl.x().fieldN('key'), vl.y().fieldQ('fraction').axis(null), vl.text().field('value').format(',') ); const plot = vl.layer(lines, labels) .data('data/penguins.json') .transform( vl.filter('datum["Beak Length (mm)"] != null'), vl.window(vl.row_number().as('index')), vl.fold(domain).as('key', 'value'), vl.groupby('key').join(vl.min('value').as('min'), vl.max('value').as('max')), vl.calculate('(datum.value - datum.min) / (datum.max - datum.min)').as('fraction') ) .width(width) .height(300) .autosize({type: 'fit-x', contains: 'padding'}) return plot.render({renderer: 'svg'}); }32:T834,standalone_use = md`

## Stand-Alone Usage in a Web Browser To use the Vega-Lite API in the browser outside of Observable, you need to include all the dependencies, set the default configuration, and then register the Vega libraries. Here is some starting code to build from: ~~~html

~~~`33:[] 2e:{"title":"Vega-Lite API v4","cells":[{"id":0,"value":"md`# Vega-Lite API v4`","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"md`The [Vega-Lite JavaScript API](https://github.com/vega/vega-lite-api/) provides a convenient way to write [Vega-Lite](https://vega.github.io/vega-lite) specifications in a programmatic fashion. Scroll down for some usage examples, or browse the [Vega-Lite API example collection](https://observablehq.com/collection/@vega/vega-lite-api)!\n\nThis notebook uses **version 4** of Vega-Lite and the corresponding Vega-Lite API 4.0. _To use the more recent Vega-Lite version 5, see the [Vega-Lite API v5 notebook](https://observablehq.com/@vega/vega-lite-api-v5) instead._\n\nWant to learn more about data visualization and how to use the Vega-Lite API? Read the [introduction to Vega-Lite](https://observablehq.com/@uwdata/introduction-to-vega-lite) and the [data visualization curriculum](https://observablehq.com/@uwdata/data-visualization-curriculum?collection=@uwdata/visualization-curriculum).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"md`\nThe cell below imports the Vega-Lite API and registers the desired versions of Vega and Vega-Lite, along with default [Vega View options](https://vega.github.io/vega/docs/api/view/#view) and [Vega-Lite configuration](https://vega.github.io/vega-lite/docs/config.html):\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"vl = {\n const [vega, vegalite, api, tooltip] = await Promise.all([\n 'vega@5.23.0',\n 'vega-lite@4.17.0',\n 'vega-lite-api@4.0.0',\n 'vega-tooltip@0.25.1'\n ].map(module => require(module)));\n\n const options = {\n config: {\n // vega-lite default configuration\n config: {\n view: {continuousWidth: 400, continuousHeight: 300},\n mark: {tooltip: null}\n }\n },\n init: view => {\n // initialize tooltip handler\n view.tooltip(new tooltip.Handler().call);\n // enable horizontal scrolling for large plots\n if (view.container()) view.container().style['overflow-x'] = 'auto';\n },\n view: {\n // view constructor options\n loader: vega.loader({baseURL: 'https://cdn.jsdelivr.net/npm/vega-datasets@2/'}),\n renderer: 'canvas'\n }\n };\n \n return api.register(vega, vegalite, options);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"md`To use the same setup in your own notebooks, add a cell with the following code:\n~~~ js\nimport {vl} from '@vega/vega-lite-api'\n~~~\nTo use the API outside of Observable, see the [stand-alone usage instructions](#standalone_use) below.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"zip_codes = md`## Zip Codes\n\nA dot for each zip code in the United States, colored by the first digit.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"vl.markSquare({size: 2, opacity: 1})\n .data('data/zipcodes.csv')\n .transform(vl.calculate('substring(datum.zip_code, 0, 1)').as('digit'))\n .project(\n vl.projection('albersUsa')\n )\n .encode(\n vl.longitude().fieldQ('longitude'),\n vl.latitude().fieldQ('latitude'),\n vl.color().fieldN('digit')\n )\n .width(width)\n .height(Math.floor(width / 1.75))\n .autosize({type: 'fit-x', contains: 'padding'})\n .config({view: {stroke: null}})\n .render()","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"interactive_weather = md`## Interactive Seattle Weather 2012-2015\n\nA scatter plot and summary histogram with linked \\`selections\\` between plots to perform cross-filtering and configure conditional color encodings.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"parallel_coordinats = md`## Parallel Coordinates\n\nA [parallel coordinates plot](https://en.wikipedia.org/wiki/Parallel_coordinates) that uses \\`window\\` and \\`fold\\` transforms to convert the four dimensions of penguin measurements into normalized coordinates that can be visualized as \\`line\\` marks. The graphic includes an additional layer with custom \\`text\\` mark labels for the parallel axis grid lines. We render the plot as SVG by passing \\`{renderer:'svg'}\\` to the \\`render\\` method.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}