2c:null 2d:["$","title",null,{"children":"Vega Performance Tests | Vega | Observable"}] 32:T43b,tests = [ {desc: 'Read pre-parsed data', test: testReadObjects}, {desc: 'Read data from JSON string', test: testReadJSON}, {desc: 'Read data from CSV string', test: testReadCSV}, {desc: 'Aggregate data, grouped by category', test: testAggregate}, {desc: 'Aggregate filtered data, grouped by category', test: testAggregateFilter}, {desc: 'Render aggregated data in a bar chart _(canvas)_', test: testBars('canvas')}, {desc: 'Render aggregated data in a bar chart _(svg-string)_', test: testBars('svg')}, {desc: 'Update bar chart filter and re-render _(canvas)_', test: testBarsFilter('canvas')}, {desc: 'Update bar chart filter and re-render _(svg-dom)_', test: testBarsFilter('svg')}, {desc: 'Render all data in a scatter plot _(canvas)_', test: testScatter('canvas')}, {desc: 'Render all data in a scatter plot _(svg-string)_', test: testScatter('svg')}, {desc: 'Update scatter plot highlights and re-render _(canvas)_', test: testScatterBrush('canvas')}, {desc: 'Update scatter plot highlights and re-render _(svg-dom)_', test: testScatterBrush('svg')} ];33:T4ae,function specBars(values) { return { width: 500, height: 200, autosize: 'pad', padding: 5, data: [ { name: 'table', values: values, transform: [ { type: 'aggregate', groupby: ['category'], fields: ['u', 'v', 'f', 'x', null], ops: ['mean', 'stdev', 'max', 'sum', 'count'] } ] } ], scales: [ { name: 'x', type: 'band', domain: {data: 'table', field: 'category', sort: true}, range: 'width' }, { name: 'y', domain: {data: 'table', field: 'mean_u'}, range: 'height' } ], axes: [ {orient: 'left', scale: 'y'}, {orient: 'bottom', scale: 'x'}, ], marks: [ { type: 'rect', from: {data: 'table'}, encode: { enter: { x: {scale: 'x', field: 'category'}, width: {scale: 'x', band: 1, offset: -1}, fill: {value: 'steelblue'} }, update: { y: {scale: 'y', field: 'mean_u'}, y2: {scale: 'y', value: 0} } } } ] }; }34:[] 30:{"id":"780dfc07a8dfd804","slug":"vega-performance-tests","title":"Vega Performance Tests","thumbnail":"4ad65bf130d121496c8f885f034dcb682fd2cdf843f8d7001d872990fd086898","access_level":"public","create_time":"$D2019-03-20T05:39:08.307Z","update_time":"$D2019-04-06T22:03:50.193Z","view_time":null,"first_public_time":"$D2019-03-20T06:39:17.515Z","has_unpublished_edits":null,"fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"faa3d64559fbe807","login":"vega","name":"Vega","avatar_url":"https://avatars-next.observableusercontent.com/55bc29c5c4844f24509efdf9a45191e8427474a9c67ba97be0284b4f265f6ab4","tier":"starter_2024"},"version":137,"publish_version":137,"role":null,"authored":false,"authors":[{"type":"individual","id":"ecf15dc33ed8cd37","login":"jheer","name":"Jeffrey Heer","avatar_url":"https://avatars-next.observableusercontent.com/230cea705fbda819b9f6b8bc87e05ebecf06d314098901fbd9946af2cdc51be4","tier":null}],"members":[{"type":"team","id":"faa3d64559fbe807","login":"vega","name":"Vega","avatar_url":"https://avatars-next.observableusercontent.com/55bc29c5c4844f24509efdf9a45191e8427474a9c67ba97be0284b4f265f6ab4","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Vega Performance Tests","cells":[{"id":0,"value":"md`# Vega Performance Tests\n\nThis notebook runs a series of performance tests for data loading, transformation, visualization, and incremental updates. All tests include the overhead of parsing a Vega specification and instantiating the runtime dataflow graph. Except for the JSON and CSV loading tests, all tests take a pre-parsed set of data objects as input.\n\nAdjust the _Dataset Size_ option to change the number of generated input data objects. Adjust the _Iterations_ option to change the number of times each test is run. Note that using larger datasets and more iterations may cause this page to hang for a while — the tests should complete within a minute or two!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"viewof size = menu('Dataset Size', [\n 100,\n 500,\n [1000, '1,000'],\n [5000, '5,000', true],\n [10000, '10,000'],\n [50000, '50,000'],\n [100000, '100,000']\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"viewof iter = menu('Iterations', [1, 2, [5, 5, true], 10])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"results = {\n let table = `\n| Test | Average (ms) | Max (ms) |\n|------|-------------:|---------:|\n`;\n \n const max = a => a.reduce((v, x) => Math.max(v, x), -Infinity);\n const sum = a => a.reduce((v, x) => v + x, 0);\n const avg = a => Math.round(sum(a) / a.length);\n \n const t = Date.now();\n await run(tests, size, iter, (test, results) => {\n table += `|${test.desc}|${avg(results)}|${max(results)}|\\n`;\n });\n \n table += `|_Total test running time_||_${Date.now() - t}_|`;\n return md`${table}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"async function run(tests, size, iter, callback) {\n const data = generateData(size, [\n sampleCounter('key'),\n sampleNominal('category', 'abcdefghij'),\n sampleNormal('u', 0, 2),\n sampleNormal('v', 10, 5),\n sampleUniform('f', -1, 1),\n sampleInteger('x', 1, 100)\n ]);\n\n for (let i=0; i 0'\n });\n\n return spec;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"function specBarsFilter(values) {\n const spec = specBars(values);\n\n spec.signals = [\n {name: 'lo', value: -10},\n {name: 'hi', value: 10}\n ];\n\n spec.data[0].transform.unshift({\n type: 'filter',\n expr: 'lo < datum.u && datum.u < hi'\n });\n\n return spec;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"function specScatter(values) {\n return {\n width: 500,\n height: 500,\n autosize: 'pad',\n padding: 5,\n data: [\n {\n name: 'table',\n values: values\n }\n ],\n scales: [\n {\n name: 'x',\n domain: {data: 'table', field: 'u'},\n padding: 5,\n range: 'width'\n },\n {\n name: 'y',\n domain: {data: 'table', field: 'v'},\n padding: 5,\n range: 'height'\n }\n ],\n axes: [\n {orient: 'left', scale: 'y'},\n {orient: 'bottom', scale: 'x'},\n ],\n marks: [\n {\n type: 'symbol',\n from: {data: 'table'},\n encode: {\n enter: {\n x: {scale: 'x', field: 'u'},\n y: {scale: 'y', field: 'v'},\n size: {value: 64},\n fill: {value: 'steelblue'},\n fillOpacity: {value: 0.25}\n }\n }\n }\n ]\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"function specScatterBrush(values) {\n const spec = specScatter(values);\n\n spec.signals = [\n {name: 'lo', value: -10},\n {name: 'hi', value: 10}\n ];\n\n spec.marks[0].encode.update = {\n fill: {signal: 'lo < datum.u && datum.u < hi ? \"steelblue\" : \"gray\"'}\n };\n\n return spec;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`## Data Generation Utilities`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"function generateData(n, samplers) {\n const data = Array(n);\n for (let i=0; i ++count\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"function sampleNormal(name, mean, stdev) {\n return {\n name: name,\n sample: vega.randomNormal(mean, stdev).sample\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"function sampleUniform(name, min, max) {\n return {\n name: name,\n sample: vega.randomUniform(min, max).sample\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"function sampleInteger(name, min, max) {\n return {\n name: name,\n sample: vega.randomInteger(min, max).sample\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"function sampleNominal(name, values) {\n const sample = vega.randomInteger(0, values.length).sample;\n return {\n name: name,\n sample: () => values[sample()]\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"function toCSV(data) {\n const headers = Object.keys(data[0]);\n let csv = headers.join(',') + '\\n';\n for (let i=0, n=data.length; i data[i][h]).join(',') + '\\n';\n }\n return csv;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"md`By default, we use the latest version of Vega. Include a specific version number to test the performance of a different version, like so: \\`require('vega@5.3.0')\\`. Note that timing will be inaccurate for versions of Vega prior to v5.0.0 due to dataflow implementation changes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"vega = require('vega@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"import {slider, menu} from '@jheer/dom-utilities'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"