├── .eslintrc ├── .gitignore ├── .npmignore ├── LICENSE ├── PORTING_GUIDE.md ├── README.md ├── bin ├── rollup ├── schema ├── vg2png └── vg2svg ├── index.js ├── package.json ├── test ├── schema-test.js └── spec │ ├── airports.vg.json │ ├── arc.vg.json │ ├── area.vg.json │ ├── bandsize.vg.json │ ├── bar-hover-label.vg.json │ ├── bar.vg.json │ ├── barley.vg.json │ ├── bootstrap.vg.json │ ├── budget-forecasts.vg.json │ ├── chart.vg.json │ ├── choropleth.vg.json │ ├── crossfilter-multi.vg.json │ ├── crossfilter.vg.json │ ├── density.vg.json │ ├── dimpvis.vg.json │ ├── driving.vg.json │ ├── error.vg.json │ ├── falkensee.vg.json │ ├── force-beeswarm.vg.json │ ├── force-network.vg.json │ ├── gradient.vg.json │ ├── grouped-bar.vg.json │ ├── heatmap-lines.vg.json │ ├── heatmap.vg.json │ ├── histogram.vg.json │ ├── horizon.vg.json │ ├── images.vg.json │ ├── jobs.vg.json │ ├── legends.vg.json │ ├── lifelines.vg.json │ ├── map-bind.vg.json │ ├── map.vg.json │ ├── matrix-reorder.vg.json │ ├── movies-sort.vg.json │ ├── nested.vg.json │ ├── overview-detail.vg.json │ ├── panzoom.vg.json │ ├── parallel-coords.vg.json │ ├── playfair.vg.json │ ├── population.vg.json │ ├── shift-select.vg.json │ ├── splom-inner.vg.json │ ├── splom-outer.vg.json │ ├── stacked-area.vg.json │ ├── stacked-bar.vg.json │ ├── stocks-index.vg.json │ ├── tree-radial.vg.json │ ├── treemap.vg.json │ ├── violin-plot.vg.json │ ├── weather.vg.json │ └── wordcloud.vg.json └── web ├── data ├── 7zip.png ├── airports.csv ├── barley.json ├── budgets.json ├── cars.json ├── chart.json ├── driving.json ├── ffox.png ├── flare.json ├── flights-200k.json ├── flights-airport.csv ├── gapminder.json ├── gimp.png ├── iris.json ├── jobs.json ├── miserables.json ├── monarchs.json ├── movies.json ├── normal-2d.json ├── population.json ├── seattle-temps.csv ├── sp500.csv ├── stocks.csv ├── unemployment.tsv ├── us-10m.json ├── weather.json ├── wheat.json └── world-110m.json ├── group.html ├── image-output.html ├── prefacet.html ├── spec.html ├── spec ├── airports.vg.json ├── arc.vg.json ├── area.vg.json ├── bandsize.vg.json ├── bar-hover-label.vg.json ├── bar.vg.json ├── barley.vg.json ├── budget-forecasts.vg.json ├── chart.vg.json ├── choropleth.vg.json ├── crossfilter-multi.vg.json ├── crossfilter.vg.json ├── density.vg.json ├── dimpvis.vg.json ├── driving.vg.json ├── error.vg.json ├── falkensee.vg.json ├── force-beeswarm.vg.json ├── force-network.vg.json ├── gradient.vg.json ├── grouped-bar.vg.json ├── heatmap-lines.vg.json ├── heatmap.vg.json ├── histogram.vg.json ├── horizon.vg.json ├── images.vg.json ├── jobs.vg.json ├── legends.vg.json ├── lifelines.vg.json ├── map-bind.vg.json ├── map.vg.json ├── matrix-reorder.vg.json ├── movies-sort.vg.json ├── nested.vg.json ├── overview-detail.vg.json ├── panzoom.vg.json ├── parallel-coords.vg.json ├── playfair.vg.json ├── population.vg.json ├── shift-select.vg.json ├── splom-inner.vg.json ├── splom-outer.vg.json ├── stacked-area.vg.json ├── stacked-bar.vg.json ├── stocks-index.vg.json ├── tree-radial.vg.json ├── treemap.vg.json ├── violin-plot.vg.json ├── weather.vg.json └── wordcloud.vg.json └── specs.json /.eslintrc: -------------------------------------------------------------------------------- 1 | parserOptions: 2 | sourceType: "module" 3 | 4 | env: 5 | es6: true 6 | browser: true 7 | node: true 8 | 9 | extends: 10 | "eslint:recommended" 11 | 12 | rules: 13 | no-cond-assign: 0 14 | no-fallthrough: ["error", { "commentPattern": "break omitted" }] 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.sublime-workspace 2 | .DS_Store 3 | build/ 4 | node_modules 5 | npm-debug.log -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | *.sublime-* 2 | build/*.zip 3 | test/ -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2015-2016, University of Washington Interactive Data Lab 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without 5 | modification, are permitted provided that the following conditions are met: 6 | 7 | 1. Redistributions of source code must retain the above copyright notice, this 8 | list of conditions and the following disclaimer. 9 | 10 | 2. Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | 3. Neither the name of the copyright holder nor the names of its contributors 15 | may be used to endorse or promote products derived from this software 16 | without specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" 19 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 20 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE 22 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL 23 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR 24 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER 25 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, 26 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 27 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vega: A Visualization Grammar 2 | 3 | This repo **uwdata/vega** is sometimes used for early-stage development 4 | activity, but is currently not in use. 5 | 6 | Please see the [vega/vega master repo](https://github.com/vega/vega/) for 7 | the latest version of Vega! 8 | -------------------------------------------------------------------------------- /bin/rollup: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | var rollup = require('rollup'), 4 | nodeResolve = require('rollup-plugin-node-resolve'), 5 | externals = process.argv[2] === '-e', 6 | output = externals ? 'vega.ext.js' : 'vega.js'; 7 | 8 | var modules = !externals ? [] : [ 9 | 'd3-array', 10 | 'd3-cloud', 11 | 'd3-collection', 12 | 'd3-color', 13 | 'd3-dsv', 14 | 'd3-force', 15 | 'd3-format', 16 | 'd3-geo', 17 | 'd3-hierarchy', 18 | 'd3-path', 19 | 'd3-request', 20 | 'd3-scale', 21 | 'd3-scale-chromatic', 22 | 'd3-shape', 23 | 'd3-time-format', 24 | 'd3-voronoi' 25 | ]; 26 | 27 | var module_globals = modules.reduce( 28 | function(map, _) { return map[_] = 'd3', map; }, 29 | {} 30 | ); 31 | 32 | rollup.rollup({ 33 | entry: 'index.js', 34 | external: modules, 35 | plugins: [ 36 | resolveCache(nodeResolve({jsnext: true, skip: ['yargs']})), 37 | ] 38 | }).then(function(bundle) { 39 | return bundle.write({ 40 | format: 'umd', 41 | moduleName: 'vega', 42 | globals: module_globals, 43 | dest: 'build/' + output 44 | }); 45 | }).then(function() { 46 | console.warn('↳ build/' + output); 47 | }).catch(abort); 48 | 49 | function abort(error) { 50 | console.error(error.stack); 51 | } 52 | 53 | /** 54 | * Rollup plugin that caches node_modules resolutions. This ensures 55 | * only one version of each module is included in the output bundle, 56 | * BUT assumes that all shared dependencies are of the same version. 57 | */ 58 | function resolveCache(_) { 59 | var cache = {}; 60 | return { 61 | resolveId: function(importee, importer) { 62 | return (importee && importee[0] !== '.') 63 | ? cache[importee] || (cache[importee] = _.resolveId(importee, importer)) 64 | : _.resolveId(importee, importer); 65 | } 66 | }; 67 | } 68 | -------------------------------------------------------------------------------- /bin/schema: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | var vega = require('../'), 4 | schema = require('../node_modules/vega-parser/build/vega-schema'); 5 | 6 | process.stdout.write(JSON.stringify(schema(vega.definitions), 0, 2)); 7 | -------------------------------------------------------------------------------- /bin/vg2png: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | // Render a Vega specification to PNG, using node canvas 3 | 4 | var helpText = 5 | 'Render a Vega specification to PNG.\n\n' + 6 | 'Usage: vg2png [vega_json_file] [output_png_file]\n' + 7 | ' If no arguments are provided, reads from stdin.\n' + 8 | ' If output_png_file is not provided, writes to stdout.\n\n' + 9 | 'To load data, you may need to set a base directory:\n' + 10 | ' For web retrieval, use `-b http://host/data/`. \n' + 11 | ' For files, use `-b file:///dir/data/` (absolute) or `-b data/` (relative).'; 12 | 13 | // import required libraries 14 | var path = require('path'), 15 | fs = require('fs'), 16 | canvas = require('canvas'), 17 | vega = require('../'); 18 | 19 | // arguments 20 | var args = require('yargs') 21 | .usage(helpText) 22 | .demand(0) 23 | .string('b').alias('b', 'base') 24 | .describe('b', 'Base directory for data loading.') 25 | .argv; 26 | 27 | // set baseURL if provided on command line 28 | var base = 'file://' + process.cwd() + path.sep; 29 | if (args.b) { 30 | // if no protocol, assume files, relative to current dir 31 | base = /^[A-Za-z]+\:\/\//.test(args.b) ? args.b + path.sep 32 | : 'file://' + process.cwd() + path.sep + args.b + path.sep; 33 | } 34 | 35 | // input / output files 36 | var specFile = args._[0] || '/dev/stdin', 37 | outputFile = args._[1] || null; 38 | 39 | // load spec, render to png 40 | fs.readFile(specFile, 'utf8', function(err, text) { 41 | if (err) throw err; 42 | render(JSON.parse(text)); 43 | }); 44 | 45 | // --- 46 | 47 | function writePNG(canvas, file) { 48 | var out = file ? fs.createWriteStream(file) : process.stdout; 49 | var stream = canvas.createPNGStream(); 50 | stream.on('data', function(chunk) { out.write(chunk); }); 51 | } 52 | 53 | function render(spec) { 54 | var view = new vega.View(vega.parse(spec), { 55 | loadOptions: {baseURL: base}, 56 | logLevel: vega.Warn, 57 | renderer: 'none' 58 | }) 59 | .initialize() 60 | .toCanvas() 61 | .then(function(canvas) { writePNG(canvas, outputFile); }) 62 | .catch(function(err) { console.error(err); }); 63 | } -------------------------------------------------------------------------------- /bin/vg2svg: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | // Render a Vega specification to SVG 3 | 4 | var helpText = 5 | 'Render a Vega specification to SVG.\n\n' + 6 | 'Usage: vg2svg [vega_json_file] [output_svg_file]\n' + 7 | ' If no arguments are provided, reads from stdin.\n' + 8 | ' If output_svg_file is not provided, writes to stdout.\n\n' + 9 | 'To load data, you may need to set a base directory:\n' + 10 | ' For web retrieval, use `-b http://host/data/`. \n' + 11 | ' For files, use `-b file:///dir/data/` (absolute) or `-b data/` (relative).'; 12 | 13 | var svgHeader = 14 | '\n' + 15 | '\n'; 17 | 18 | // import required libraries 19 | var path = require('path'), 20 | fs = require('fs'), 21 | vega = require('../'); 22 | 23 | // arguments 24 | var args = require('yargs') 25 | .usage(helpText) 26 | .demand(0) 27 | .string('b').alias('b', 'base') 28 | .describe('b', 'Base directory for data loading.') 29 | .boolean('h').alias('h', 'header') 30 | .describe('h', 'Include XML header and SVG doctype.') 31 | .argv; 32 | 33 | // set baseURL if provided on command line 34 | var base = 'file://' + process.cwd() + path.sep; 35 | if (args.b) { 36 | // if no protocol, assume files, relative to current dir 37 | base = /^[A-Za-z]+\:\/\//.test(args.b) ? args.b + path.sep 38 | : 'file://' + process.cwd() + path.sep + args.b + path.sep; 39 | } 40 | 41 | // input / output files 42 | var header = args.h ? svgHeader : '', 43 | specFile = args._[0] || '/dev/stdin', 44 | outputFile = args._[1] || null; 45 | 46 | // load spec, render to png 47 | fs.readFile(specFile, 'utf8', function(err, text) { 48 | if (err) throw err; 49 | render(JSON.parse(text)); 50 | }); 51 | 52 | // --- 53 | 54 | function writeSVG(svg, file) { 55 | svg = header + svg; 56 | if (file) { 57 | // write to file 58 | fs.writeFile(file, svg, function(err) { if (err) throw err; }); 59 | } else { 60 | // write to stdout 61 | process.stdout.write(svg); 62 | } 63 | } 64 | 65 | function render(spec) { 66 | var view = new vega.View(vega.parse(spec), { 67 | loadOptions: {baseURL: base}, 68 | logLevel: vega.Warn, 69 | renderer: 'none' 70 | }) 71 | .initialize() 72 | .toSVG() 73 | .then(function(svg) { writeSVG(svg, outputFile); }) 74 | .catch(function(err) { console.error(err); }); 75 | } -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | export * from 'vega-statistics'; 2 | 3 | export * from 'vega-util'; 4 | 5 | export * from 'vega-loader'; 6 | 7 | export { 8 | Dataflow, 9 | EventStream, 10 | Parameters, 11 | Pulse, 12 | MultiPulse, 13 | Operator, 14 | Transform, 15 | changeset, 16 | ingest, 17 | register, 18 | definition, 19 | definitions, 20 | transform, 21 | transforms, 22 | tupleid 23 | } from 'vega-dataflow'; 24 | 25 | export { 26 | scale, 27 | scheme 28 | } from 'vega-scale'; 29 | 30 | export { 31 | projection 32 | } from 'vega-geo'; 33 | 34 | /* eslint-disable no-unused-vars */ 35 | import * as encode from 'vega-encode'; 36 | import * as force from 'vega-force'; 37 | import * as hierarchy from 'vega-hierarchy'; 38 | import * as voronoi from 'vega-voronoi'; 39 | import * as wordcloud from 'vega-wordcloud'; 40 | import * as xfilter from 'vega-crossfilter'; 41 | /* eslint-enable */ 42 | 43 | export { 44 | View 45 | } from 'vega-view'; 46 | 47 | export { 48 | parse 49 | } from 'vega-parser'; 50 | 51 | export { 52 | parse as runtime, 53 | context as runtimeContext 54 | } from 'vega-runtime'; 55 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vega", 3 | "version": "3.0.0-beta", 4 | "description": "The Vega visualization grammar.", 5 | "keywords": [ 6 | "vega", 7 | "visualization", 8 | "interaction", 9 | "dataflow", 10 | "grammar", 11 | "data", 12 | "d3" 13 | ], 14 | "license": "BSD-3-Clause", 15 | "author": { 16 | "name": "UW Interactive Data Lab", 17 | "url": "http://idl.cs.washington.edu" 18 | }, 19 | "contributors": [ 20 | { 21 | "name": "Jeffrey Heer", 22 | "url": "http://idl.cs.washington.edu" 23 | }, 24 | { 25 | "name": "Arvind Satyanarayan", 26 | "url": "http://arvindsatya.com" 27 | }, 28 | { 29 | "name": "Ryan Russell", 30 | "url": "https://github.com/RussellSprouts" 31 | }, 32 | { 33 | "name": "Emily Gu", 34 | "url": "https://github.com/emilygu" 35 | } 36 | ], 37 | "main": "build/vega.js", 38 | "module": "index", 39 | "jsnext:main": "index", 40 | "bin": { 41 | "vg2png": "./bin/vg2png", 42 | "vg2svg": "./bin/vg2svg" 43 | }, 44 | "repository": { 45 | "type": "git", 46 | "url": "https://github.com/uwdata/vega.git" 47 | }, 48 | "scripts": { 49 | "build": "npm run test && uglifyjs build/vega.js -c -m -o build/vega.min.js", 50 | "pretest": "rm -rf build && mkdir build && bin/rollup && bin/schema > build/vega-schema.json", 51 | "test": "tape 'test/**/*-test.js' && eslint index.js src test", 52 | "prepublish": "npm run build", 53 | "postpublish": "git push && git push --tags && zip -j build/vega.zip -- LICENSE README.md build/vega-schema.json build/vega.js build/vega.min.js" 54 | }, 55 | "dependencies": { 56 | "d3-color": "1", 57 | "vega-crossfilter": ">=1.0.0-beta", 58 | "vega-dataflow": ">=2.0.0-beta", 59 | "vega-encode": ">=1.0.0-beta", 60 | "vega-expression": "2", 61 | "vega-force": ">=1.0.0-beta", 62 | "vega-geo": ">=1.0.0-beta", 63 | "vega-hierarchy": ">=1.0.0-beta", 64 | "vega-loader": ">=2.0.0-beta", 65 | "vega-parser": ">=1.0.0-beta", 66 | "vega-runtime": ">=1.0.0-beta", 67 | "vega-scale": "1", 68 | "vega-statistics": "1", 69 | "vega-util": "1", 70 | "vega-view": ">=1.0.0-beta", 71 | "vega-voronoi": ">=1.0.0-beta", 72 | "vega-wordcloud": ">=1.0.0-beta", 73 | "yargs": "4" 74 | }, 75 | "optionalDependencies": { 76 | "canvas": "1" 77 | }, 78 | "devDependencies": { 79 | "eslint": "2", 80 | "rollup": "0.34", 81 | "rollup-plugin-node-resolve": "1", 82 | "tape": "4", 83 | "tv4": "1", 84 | "uglify-js": "2" 85 | } 86 | } -------------------------------------------------------------------------------- /test/schema-test.js: -------------------------------------------------------------------------------- 1 | var tape = require('tape'), 2 | vega = require('../'), // eslint-disable-line no-unused-vars 3 | tv4 = require('tv4'), 4 | fs = require('fs'), 5 | schema = require('../build/vega-schema.json'); 6 | 7 | var dir = process.cwd() + '/test/spec/'; 8 | 9 | function validate(spec) { 10 | return tv4.validate(spec, schema); 11 | } 12 | 13 | tape('JSON schema validates correct specifications', function(test) { 14 | var specs = [ 15 | "airports", 16 | "arc", 17 | "area", 18 | "bandsize", 19 | "bar", 20 | "bar-hover-label", 21 | "barley", 22 | "budget-forecasts", 23 | "chart", 24 | "choropleth", 25 | "crossfilter", 26 | "crossfilter-multi", 27 | "density", 28 | "dimpvis", 29 | "driving", 30 | "error", 31 | "falkensee", 32 | "force-network", 33 | "force-beeswarm", 34 | "gradient", 35 | "grouped-bar", 36 | "heatmap", 37 | "heatmap-lines", 38 | "histogram", 39 | "horizon", 40 | "images", 41 | "jobs", 42 | "legends", 43 | "lifelines", 44 | "map", 45 | "map-bind", 46 | "matrix-reorder", 47 | "movies-sort", 48 | "nested", 49 | "overview-detail", 50 | "panzoom", 51 | "parallel-coords", 52 | "playfair", 53 | "population", 54 | "shift-select", 55 | "splom-inner", 56 | "splom-outer", 57 | "stacked-area", 58 | "stacked-bar", 59 | "stocks-index", 60 | "tree-radial", 61 | "treemap", 62 | "violin-plot", 63 | "weather", 64 | "wordcloud" 65 | ]; 66 | 67 | specs.forEach(function(file) { 68 | var spec = JSON.parse(fs.readFileSync(dir + file + '.vg.json')), 69 | pass = validate(spec); 70 | test.ok(pass, tv4.error); 71 | }); 72 | 73 | test.end(); 74 | }); -------------------------------------------------------------------------------- /test/spec/arc.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 400, 4 | "height": 400, 5 | 6 | "data": [ 7 | { 8 | "name": "table", 9 | "values": [12, 23, 47, 6, 52, 19], 10 | "transform": [{"type": "pie", "field": "data"}] 11 | } 12 | ], 13 | 14 | "scales": [ 15 | { 16 | "name": "r", 17 | "type": "sqrt", 18 | "domain": {"data": "table", "field": "data"}, 19 | "zero": true, 20 | "range": [20, 100] 21 | } 22 | ], 23 | 24 | "marks": [ 25 | { 26 | "type": "arc", 27 | "from": {"data": "table"}, 28 | "encode": { 29 | "enter": { 30 | "x": {"field": {"group": "width"}, "mult": 0.5}, 31 | "y": {"field": {"group": "height"}, "mult": 0.5}, 32 | "startAngle": {"field": "startAngle"}, 33 | "endAngle": {"field": "endAngle"}, 34 | "innerRadius": {"value": 20}, 35 | "outerRadius": {"scale": "r", "field": "data"}, 36 | "stroke": {"value": "#fff"} 37 | }, 38 | "update": { 39 | "fill": {"value": "#ccc"} 40 | }, 41 | "hover": { 42 | "fill": {"value": "pink"} 43 | } 44 | } 45 | }, 46 | 47 | { 48 | "type": "text", 49 | "from": {"data": "table"}, 50 | "encode": { 51 | "enter": { 52 | "x": {"field": {"group": "width"}, "mult": 0.5}, 53 | "y": {"field": {"group": "height"}, "mult": 0.5}, 54 | "radius": {"scale": "r", "field": "data", "offset": 8}, 55 | "theta": {"signal": "(datum.startAngle + datum.endAngle)/2"}, 56 | "fill": {"value": "#000"}, 57 | "align": {"value": "center"}, 58 | "baseline": {"value": "middle"}, 59 | "text": {"field": "data"} 60 | } 61 | } 62 | } 63 | ] 64 | } -------------------------------------------------------------------------------- /test/spec/area.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 500, 4 | "height": 200, 5 | "padding": 5, 6 | 7 | "data": [ 8 | { 9 | "name": "table", 10 | "values": [ 11 | {"u": 1, "v": 28}, {"u": 2, "v": 55}, 12 | {"u": 3, "v": 43}, {"u": 4, "v": 91}, 13 | {"u": 5, "v": 81}, {"u": 6, "v": 53}, 14 | {"u": 7, "v": 19}, {"u": 8, "v": 87}, 15 | {"u": 9, "v": 52}, {"u": 10, "v": 48}, 16 | {"u": 11, "v": 24}, {"u": 12, "v": 49}, 17 | {"u": 13, "v": 87}, {"u": 14, "v": 66}, 18 | {"u": 15, "v": 17}, {"u": 16, "v": 27}, 19 | {"u": 17, "v": 68}, {"u": 18, "v": 16}, 20 | {"u": 19, "v": 49}, {"u": 20, "v": 15} 21 | ] 22 | } 23 | ], 24 | 25 | "scales": [ 26 | { 27 | "name": "xscale", 28 | "type": "linear", 29 | "range": "width", 30 | "zero": false, 31 | "domain": {"data": "table", "field": "u"} 32 | }, 33 | { 34 | "name": "yscale", 35 | "type": "linear", 36 | "range": "height", 37 | "nice": true, 38 | "zero": true, 39 | "domain": {"data": "table", "field": "v"} 40 | } 41 | ], 42 | 43 | "axes": [ 44 | {"orient": "bottom", "scale": "xscale", "tickCount": 20}, 45 | {"orient": "left", "scale": "yscale"} 46 | ], 47 | 48 | "marks": [ 49 | { 50 | "type": "area", 51 | "from": {"data": "table"}, 52 | "encode": { 53 | "enter": { 54 | "interpolate": {"value": "monotone"}, 55 | "x": {"scale": "xscale", "field": "u"}, 56 | "y": {"scale": "yscale", "field": "v"}, 57 | "y2": {"scale": "yscale", "value": 0}, 58 | "fill": {"value": "steelblue"} 59 | }, 60 | "update": { 61 | "fillOpacity": {"value": 1} 62 | }, 63 | "hover": { 64 | "fillOpacity": {"value": 0.5} 65 | } 66 | } 67 | } 68 | ] 69 | } -------------------------------------------------------------------------------- /test/spec/bar-hover-label.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 400, 4 | "height": 200, 5 | "padding": 5, 6 | 7 | "signals": [ 8 | { 9 | "name": "label", 10 | "value": {"x": 0, "y": 0}, 11 | "on": [ 12 | {"events": "rect:mouseover", "update": "datum"}, 13 | {"events": "rect:mouseout", "update": "{x:0, y:0}"} 14 | ] 15 | } 16 | ], 17 | 18 | "data": [ 19 | { 20 | "name": "table", 21 | "values": [ 22 | {"x": 1, "y": 28}, {"x": 2, "y": 55}, 23 | {"x": 3, "y": 43}, {"x": 4, "y": 91}, 24 | {"x": 5, "y": 81}, {"x": 6, "y": 53}, 25 | {"x": 7, "y": 19}, {"x": 8, "y": 87}, 26 | {"x": 9, "y": 52}, {"x": 10, "y": 48}, 27 | {"x": 11, "y": 24}, {"x": 12, "y": 49}, 28 | {"x": 13, "y": 87}, {"x": 14, "y": 66}, 29 | {"x": 15, "y": 17}, {"x": 16, "y": 27}, 30 | {"x": 17, "y": 68}, {"x": 18, "y": 16}, 31 | {"x": 19, "y": 49}, {"x": 20, "y": 15} 32 | ] 33 | } 34 | ], 35 | 36 | "scales": [ 37 | { 38 | "name": "xscale", 39 | "type": "band", 40 | "range": "width", 41 | "domain": {"data": "table", "field": "x"} 42 | }, 43 | { 44 | "name": "yscale", 45 | "type": "linear", 46 | "range": "height", 47 | "domain": {"data": "table", "field": "y"}, 48 | "nice": true 49 | } 50 | ], 51 | 52 | "axes": [ 53 | {"orient": "bottom", "scale": "xscale"}, 54 | {"orient": "left", "scale": "yscale"} 55 | ], 56 | 57 | "marks": [ 58 | { 59 | "type": "rect", 60 | "from": {"data": "table"}, 61 | "encode": { 62 | "enter": { 63 | "x": {"scale": "xscale", "field": "x", "offset":1}, 64 | "width": {"scale": "xscale", "band": 1, "offset":-1}, 65 | "y": {"scale": "yscale", "field": "y"}, 66 | "y2": {"scale": "yscale", "value": 0} 67 | }, 68 | "update": { 69 | "fill": [ 70 | {"test": "datum === label", "value": "red"}, 71 | {"value": "steelblue"} 72 | ] 73 | } 74 | } 75 | }, 76 | { 77 | "type": "text", 78 | "encode": { 79 | "enter": { 80 | "align": {"value": "center"}, 81 | "fill": {"value": "#333"} 82 | }, 83 | "update": { 84 | "x": {"scale": "xscale", "signal": "label.x", "band": 0.5}, 85 | "y": {"scale": "yscale", "signal": "label.y", "offset": -5}, 86 | "text": {"signal": "label.y"}, 87 | "fillOpacity": [ 88 | {"test": "!label._id", "value": 0}, 89 | {"value": 1} 90 | ] 91 | } 92 | } 93 | } 94 | ] 95 | } 96 | -------------------------------------------------------------------------------- /test/spec/bar.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 400, 4 | "height": 200, 5 | "padding": 5, 6 | 7 | "data": [ 8 | { 9 | "name": "table", 10 | "values": [ 11 | {"u": 1, "v": 28}, {"u": 2, "v": 55}, 12 | {"u": 3, "v": 43}, {"u": 4, "v": 91}, 13 | {"u": 5, "v": 81}, {"u": 6, "v": 53}, 14 | {"u": 7, "v": 19}, {"u": 8, "v": 87}, 15 | {"u": 9, "v": 52}, {"u": 10, "v": 48}, 16 | {"u": 11, "v": 24}, {"u": 12, "v": 49}, 17 | {"u": 13, "v": 87}, {"u": 14, "v": 66}, 18 | {"u": 15, "v": 17}, {"u": 16, "v": 27}, 19 | {"u": 17, "v": 68}, {"u": 18, "v": 16}, 20 | {"u": 19, "v": 49}, {"u": 20, "v": 15} 21 | ] 22 | } 23 | ], 24 | 25 | "scales": [ 26 | { 27 | "name": "xscale", 28 | "type": "band", 29 | "range": "width", 30 | "domain": {"data": "table", "field": "u"} 31 | }, 32 | { 33 | "name": "yscale", 34 | "type": "linear", 35 | "range": "height", 36 | "domain": {"data": "table", "field": "v"}, 37 | "zero": true, 38 | "nice": true 39 | } 40 | ], 41 | 42 | "axes": [ 43 | {"orient": "bottom", "scale": "xscale"}, 44 | {"orient": "left", "scale": "yscale"} 45 | ], 46 | 47 | "marks": [ 48 | { 49 | "type": "rect", 50 | "from": {"data": "table"}, 51 | "encode": { 52 | "enter": { 53 | "x": {"scale": "xscale", "field": "u", "offset": 1}, 54 | "width": {"scale": "xscale", "band": 1, "offset": -1}, 55 | "y": {"scale": "yscale", "field": "v"}, 56 | "y2": {"scale": "yscale", "value": 0} 57 | }, 58 | "update": { 59 | "fill": {"value": "steelblue"} 60 | }, 61 | "hover": { 62 | "fill": {"value": "red"} 63 | } 64 | } 65 | } 66 | ] 67 | } -------------------------------------------------------------------------------- /test/spec/barley.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 200, 4 | "padding": 5, 5 | 6 | "signals": [ 7 | {"name": "offset", "value": 15}, 8 | {"name": "cellHeight", "value": 100}, 9 | {"name": "height", "update": "6 * (offset + cellHeight)"} 10 | ], 11 | 12 | "data": [ 13 | { 14 | "name": "barley", 15 | "url": "data/barley.json" 16 | } 17 | ], 18 | 19 | "scales": [ 20 | { 21 | "name": "gscale", 22 | "type": "band", 23 | "range": [0, {"signal": "height"}], 24 | "round": true, 25 | "domain": { 26 | "data": "barley", 27 | "field": "site", 28 | "sort": { 29 | "field": "yield", 30 | "op": "median", 31 | "order": "descending" 32 | } 33 | } 34 | }, 35 | { 36 | "name": "xscale", 37 | "type": "linear", 38 | "nice": true, 39 | "range": "width", 40 | "round": true, 41 | "domain": {"data": "barley", "field": "yield"} 42 | }, 43 | { 44 | "name": "cscale", 45 | "type": "ordinal", 46 | "scheme": "category10", 47 | "domain": {"data": "barley", "field": "year"} 48 | } 49 | ], 50 | 51 | "axes": [ 52 | {"orient": "bottom", "scale": "xscale"} 53 | ], 54 | 55 | "legends": [ 56 | { 57 | "stroke": "cscale", 58 | "title": "Year", 59 | "padding": 4, 60 | "encode": { 61 | "symbols": { 62 | "enter": { 63 | "strokeWidth": {"value": 2}, 64 | "size": {"value": 50} 65 | } 66 | } 67 | } 68 | } 69 | ], 70 | 71 | "marks": [ 72 | { 73 | "name": "site", 74 | "type": "group", 75 | 76 | "from": { 77 | "facet": { 78 | "data": "barley", 79 | "name": "sites", 80 | "groupby": "site" 81 | } 82 | }, 83 | 84 | "encode": { 85 | "enter": { 86 | "y": {"scale": "gscale", "field": "site", "offset": {"signal": "offset"}}, 87 | "height": {"signal": "cellHeight"}, 88 | "width": {"signal": "width"}, 89 | "stroke": {"value": "#ccc"} 90 | } 91 | }, 92 | 93 | "scales": [ 94 | { 95 | "name": "yscale", 96 | "type": "point", 97 | "range": [0, {"signal": "cellHeight"}], 98 | "padding": 1, 99 | "round": true, 100 | "domain": { 101 | "data": "barley", 102 | "field": "variety", 103 | "sort": { 104 | "field": "yield", 105 | "op": "median", 106 | "order": "descending" 107 | } 108 | } 109 | } 110 | ], 111 | 112 | "axes": [ 113 | { 114 | "orient": "left", 115 | "scale": "yscale", 116 | "tickSize": 0, 117 | "domain": false, 118 | "grid": true, 119 | "encode": { 120 | "grid": { 121 | "enter": {"strokeDash": {"value": [3,3]}} 122 | } 123 | } 124 | }, 125 | { 126 | "orient": "right", 127 | "scale": "yscale", 128 | "tickSize": 0, 129 | "domain": false 130 | } 131 | ], 132 | 133 | "marks": [ 134 | { 135 | "type": "symbol", 136 | "from": {"data": "sites"}, 137 | "encode": { 138 | "enter": { 139 | "x": {"scale": "xscale", "field": "yield"}, 140 | "y": {"scale": "yscale", "field": "variety"}, 141 | "stroke": {"scale": "cscale", "field": "year"}, 142 | "strokeWidth": {"value": 2}, 143 | "size": {"value": 50} 144 | } 145 | } 146 | } 147 | ] 148 | }, 149 | 150 | { 151 | "type": "text", 152 | "from": {"data": "site"}, 153 | "encode": { 154 | "enter": { 155 | "x": {"field": "width", "mult": 0.5}, 156 | "y": {"field": "y"}, 157 | "fontSize": {"value": 11}, 158 | "fontWeight": {"value": "bold"}, 159 | "text": {"field": "datum.site"}, 160 | "align": {"value": "center"}, 161 | "baseline": {"value": "bottom"}, 162 | "fill": {"value": "#000"} 163 | } 164 | } 165 | } 166 | ] 167 | } -------------------------------------------------------------------------------- /test/spec/choropleth.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 960, 4 | "height": 500, 5 | "autosize": "none", 6 | 7 | "data": [ 8 | { 9 | "name": "unemp", 10 | "url": "data/unemployment.tsv", 11 | "format": {"type": "tsv", "parse": "auto"} 12 | }, 13 | { 14 | "name": "counties", 15 | "url": "data/us-10m.json", 16 | "format": {"type": "topojson", "feature": "counties"}, 17 | "transform": [ 18 | { "type": "lookup", "from": "unemp", "key": "id", "fields": ["id"], "as": ["unemp"] }, 19 | { "type": "filter", "expr": "datum.unemp != null" } 20 | ] 21 | } 22 | ], 23 | 24 | "projections": [ 25 | { 26 | "name": "projection", 27 | "type": "albersUsa" 28 | } 29 | ], 30 | 31 | "scales": [ 32 | { 33 | "name": "color", 34 | "type": "quantize", 35 | "domain": [0, 0.15], 36 | "range": ["#f7fbff", "#deebf7", "#c6dbef", "#9ecae1", "#6baed6", 37 | "#4292c6", "#2171b5", "#08519c", "#08306b"] 38 | } 39 | ], 40 | 41 | "marks": [ 42 | { 43 | "type": "shape", 44 | "from": {"data": "counties"}, 45 | "encode": { 46 | "update": { "fill": {"scale": "color", "field": "unemp.rate"} }, 47 | "hover": { "fill": {"value": "red"} } 48 | }, 49 | "transform": [ 50 | { "type": "geoshape", "projection": "projection" } 51 | ] 52 | } 53 | ] 54 | } -------------------------------------------------------------------------------- /test/spec/density.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 500, 4 | "height": 100, 5 | "padding": 5, 6 | 7 | "signals": [ 8 | { "name": "bandwidth", "value": 0, 9 | "bind": {"type": "range", "min": 0, "max": 0.1, "step": 0.001} }, 10 | { "name": "steps", "value": 100, 11 | "bind": {"type": "range", "min": 10, "max": 500, "step": 1} }, 12 | { "name": "method", "value": "pdf", 13 | "bind": {"type": "radio", "options": ["pdf", "cdf"]} } 14 | ], 15 | 16 | "data": [ 17 | { 18 | "name": "points", 19 | "url": "data/normal-2d.json" 20 | }, 21 | { 22 | "name": "summary", 23 | "source": "points", 24 | "transform": [ 25 | { 26 | "type": "aggregate", 27 | "fields": ["u", "u"], 28 | "ops": ["mean", "stdev"], 29 | "as": ["mean", "stdev"] 30 | } 31 | ] 32 | }, 33 | { 34 | "name": "density", 35 | "source": "points", 36 | "transform": [ 37 | { 38 | "type": "density", 39 | "extent": {"signal": "domain('xscale')"}, 40 | "steps": {"signal": "steps"}, 41 | "method": {"signal": "method"}, 42 | "distribution": { 43 | "function": "kde", 44 | "field": "u", 45 | "bandwidth": {"signal": "bandwidth"} 46 | } 47 | } 48 | ] 49 | }, 50 | { 51 | "name": "normal", 52 | "transform": [ 53 | { 54 | "type": "density", 55 | "extent": {"signal": "domain('xscale')"}, 56 | "steps": {"signal": "steps"}, 57 | "method": {"signal": "method"}, 58 | "distribution": { 59 | "function": "normal", 60 | "mean": {"signal": "tuples('summary')[0].mean"}, 61 | "stdev": {"signal": "tuples('summary')[0].stdev"} 62 | } 63 | } 64 | ] 65 | } 66 | ], 67 | 68 | "scales": [ 69 | { 70 | "name": "xscale", 71 | "type": "linear", 72 | "range": "width", 73 | "domain": {"data": "points", "field": "u"}, 74 | "nice": true 75 | }, 76 | { 77 | "name": "yscale", 78 | "type": "linear", 79 | "range": "height", "round": true, 80 | "domain": { 81 | "fields": [ 82 | {"data": "density", "field": "density"}, 83 | {"data": "normal", "field": "density"} 84 | ] 85 | } 86 | }, 87 | { 88 | "name": "color", 89 | "type": "ordinal", 90 | "domain": ["Normal Estimate", "Kernel Density Estimate"], 91 | "range": ["#444", "steelblue"] 92 | } 93 | ], 94 | 95 | "axes": [ 96 | {"orient": "bottom", "scale": "xscale", "zindex": 1} 97 | ], 98 | 99 | "legends": [ 100 | {"orient": "top-left", "fill": "color", "offset": 0, "zindex": 1} 101 | ], 102 | 103 | "marks": [ 104 | { 105 | "type": "area", 106 | "from": {"data": "density"}, 107 | "encode": { 108 | "update": { 109 | "x": {"scale": "xscale", "field": "value"}, 110 | "y": {"scale": "yscale", "field": "density"}, 111 | "y2": {"scale": "yscale", "value": 0}, 112 | "fill": {"signal": "scale('color', 'Kernel Density Estimate')"} 113 | } 114 | } 115 | }, 116 | { 117 | "type": "line", 118 | "from": {"data": "normal"}, 119 | "encode": { 120 | "update": { 121 | "x": {"scale": "xscale", "field": "value"}, 122 | "y": {"scale": "yscale", "field": "density"}, 123 | "stroke": {"signal": "scale('color', 'Normal Estimate')"}, 124 | "strokeWidth": {"value": 2} 125 | } 126 | } 127 | }, 128 | { 129 | "type": "rect", 130 | "from": {"data": "points"}, 131 | "encode": { 132 | "enter": { 133 | "x": {"scale": "xscale", "field": "u"}, 134 | "width": {"value": 1}, 135 | "y": {"value": 25, "offset": {"signal": "height"}}, 136 | "height": {"value": 5}, 137 | "fill": {"value": "steelblue"}, 138 | "fillOpacity": {"value": 0.4} 139 | } 140 | } 141 | } 142 | ] 143 | } -------------------------------------------------------------------------------- /test/spec/driving.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 800, 4 | "height": 500, 5 | "padding": 5, 6 | 7 | "data": [ 8 | { 9 | "name": "drive", 10 | "url": "data/driving.json" 11 | } 12 | ], 13 | 14 | "scales": [ 15 | { 16 | "name": "x", 17 | "type": "linear", 18 | "domain": {"data": "drive", "field": "miles"}, 19 | "range": "width", 20 | "nice": true, 21 | "zero": false, 22 | "round": true 23 | }, 24 | { 25 | "name": "y", 26 | "type": "linear", 27 | "domain": {"data": "drive", "field": "gas"}, 28 | "range": "height", 29 | "nice": true, 30 | "zero": false, 31 | "round": true 32 | }, 33 | { 34 | "name": "align", 35 | "type": "ordinal", 36 | "domain": ["left", "right", "top", "bottom"], 37 | "range": ["right", "left", "center", "center"] 38 | }, 39 | { 40 | "name": "base", 41 | "type": "ordinal", 42 | "domain": ["left", "right", "top", "bottom"], 43 | "range": ["middle", "middle", "bottom", "top"] 44 | }, 45 | { 46 | "name": "dx", 47 | "type": "ordinal", 48 | "domain": ["left", "right", "top", "bottom"], 49 | "range": [-7, 6, 0, 0] 50 | }, 51 | { 52 | "name": "dy", 53 | "type": "ordinal", 54 | "domain": ["left", "right", "top", "bottom"], 55 | "range": [1, 1, -5, 6] 56 | } 57 | ], 58 | 59 | "axes": [ 60 | { 61 | "orient": "top", 62 | "scale": "x", 63 | "tickCount": 5, 64 | "tickSize": 0, 65 | "grid": true, 66 | "domain": false, 67 | "encode": { 68 | "axis": { 69 | "enter": { "stroke": {"value": "transparent"} } 70 | }, 71 | "labels": { 72 | "enter": { 73 | "align": {"value": "left"}, 74 | "baseline": {"value": "top"}, 75 | "fontSize": {"value": 12}, 76 | "fontWeight": {"value": "bold"} 77 | } 78 | } 79 | } 80 | }, 81 | { 82 | "orient": "left", 83 | "scale": "y", 84 | "tickCount": 5, 85 | "tickSize": 0, 86 | "grid": true, 87 | "domain": false, 88 | "format": "$0.2f", 89 | "encode": { 90 | "axis": { 91 | "enter": {"stroke": {"value": "transparent"}} 92 | }, 93 | "labels": { 94 | "enter": { 95 | "align": {"value": "left"}, 96 | "baseline": {"value": "bottom"}, 97 | "fontSize": {"value": 12}, 98 | "fontWeight": {"value": "bold"} 99 | } 100 | } 101 | } 102 | } 103 | ], 104 | 105 | "marks": [ 106 | { 107 | "type": "line", 108 | "from": {"data": "drive"}, 109 | "encode": { 110 | "enter": { 111 | "interpolate": {"value": "cardinal"}, 112 | "x": {"scale": "x", "field": "miles"}, 113 | "y": {"scale": "y", "field": "gas"}, 114 | "stroke": {"value": "#000"}, 115 | "strokeWidth": {"value": 3} 116 | } 117 | } 118 | }, 119 | { 120 | "type": "symbol", 121 | "from": {"data": "drive"}, 122 | "encode": { 123 | "enter": { 124 | "x": {"scale": "x", "field": "miles"}, 125 | "y": {"scale": "y", "field": "gas"}, 126 | "fill": {"value": "#fff"}, 127 | "stroke": {"value": "#000"}, 128 | "strokeWidth": {"value": 1}, 129 | "size": {"value": 49} 130 | } 131 | } 132 | }, 133 | { 134 | "type": "text", 135 | "from": {"data": "drive"}, 136 | "encode": { 137 | "enter": { 138 | "x": {"scale": "x", "field": "miles"}, 139 | "y": {"scale": "y", "field": "gas"}, 140 | "dx": {"scale": "dx", "field": "side"}, 141 | "dy": {"scale": "dy", "field": "side"}, 142 | "fill": {"value": "#000"}, 143 | "text": {"field": "year"}, 144 | "align": {"scale": "align", "field": "side"}, 145 | "baseline": {"scale": "base", "field": "side"} 146 | } 147 | } 148 | } 149 | ] 150 | } -------------------------------------------------------------------------------- /test/spec/error.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 400, 4 | "height": 100, 5 | "padding": 5, 6 | 7 | "data": [ 8 | { 9 | "name": "aggregate", 10 | "values": [ 11 | {"label": "Category A", "mean": 1, "lo": 0, "hi": 2}, 12 | {"label": "Category B", "mean": 2, "lo": 1.5, "hi": 2.5}, 13 | {"label": "Category C", "mean": 3, "lo": 1.7, "hi": 4.3}, 14 | {"label": "Category D", "mean": 4, "lo": 3, "hi": 5}, 15 | {"label": "Category E", "mean": 5, "lo": 4.1, "hi": 5.9} 16 | ] 17 | } 18 | ], 19 | 20 | "scales": [ 21 | { 22 | "name": "y", 23 | "type": "band", 24 | "range": "height", 25 | "domain": {"data": "aggregate", "field": "label"}, 26 | "zero": true 27 | }, 28 | { 29 | "name": "x", 30 | "type": "linear", 31 | "domain": {"data": "aggregate", "field": "hi"}, 32 | "range": [100, 400], 33 | "nice": true, "zero": true 34 | } 35 | ], 36 | 37 | "axes": [ 38 | {"orient": "bottom", "scale": "x", "tickCount": 6} 39 | ], 40 | 41 | "marks": [ 42 | { 43 | "type": "text", 44 | "from": {"data": "aggregate"}, 45 | "encode": { 46 | "enter": { 47 | "x": {"value": 0}, 48 | "y": {"scale": "y", "field": "label"}, 49 | "baseline": {"value": "middle"}, 50 | "fill": {"value": "#000"}, 51 | "text": {"field": "label"}, 52 | "font": {"value": "Helvetica Neue"}, 53 | "fontSize": {"value": 13} 54 | } 55 | } 56 | }, 57 | { 58 | "type": "rect", 59 | "from": {"data": "aggregate"}, 60 | "encode": { 61 | "enter": { 62 | "x": {"scale": "x", "field": "lo"}, 63 | "x2": {"scale": "x", "field": "hi"}, 64 | "y": {"scale": "y", "field": "label", "offset": -1}, 65 | "height": {"value": 1}, 66 | "fill": {"value": "#888"} 67 | } 68 | } 69 | }, 70 | { 71 | "type": "symbol", 72 | "from": {"data": "aggregate"}, 73 | "encode": { 74 | "enter": { 75 | "x": {"scale": "x", "field": "mean"}, 76 | "y": {"scale": "y", "field": "label"}, 77 | "size": {"value": 40}, 78 | "fill": {"value": "#000"} 79 | } 80 | } 81 | } 82 | ] 83 | } -------------------------------------------------------------------------------- /test/spec/force-beeswarm.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 800, 4 | "height": 100, 5 | "padding": {"left": 5, "right": 5, "top": 0, "bottom": 20}, 6 | "autosize": "none", 7 | 8 | "signals": [ 9 | { "name": "cx", "update": "width / 2" }, 10 | { "name": "cy", "update": "height / 2" }, 11 | { "name": "radius", "value": 8, "bind": {"type": "range", "min": 2, "max": 15, "step": 1} }, 12 | { "name": "collide", "value": 1, "bind": {"type": "range", "min": 1, "max": 10, "step": 1} }, 13 | { "name": "gravityX", "value": 0.2, "bind": {"type": "range", "min": 0, "max": 1} }, 14 | { "name": "gravityY", "value": 0.1, "bind": {"type": "range", "min": 0, "max": 1} }, 15 | { "name": "static", "value": false, "bind": {"type": "checkbox"} } 16 | ], 17 | 18 | "data": [ 19 | { 20 | "name": "people", 21 | "url": "data/miserables.json", 22 | "format": {"type": "json", "property": "nodes"} 23 | } 24 | ], 25 | 26 | "scales": [ 27 | { 28 | "name": "xscale", 29 | "type": "band", 30 | "domain": { 31 | "data": "people", 32 | "field": "group", 33 | "sort": true 34 | }, 35 | "range": "width" 36 | }, 37 | { 38 | "name": "color", 39 | "type": "ordinal", 40 | "scheme": "category20c" 41 | } 42 | ], 43 | 44 | "axes": [ 45 | { "orient": "bottom", "scale": "xscale" } 46 | ], 47 | 48 | "marks": [ 49 | { 50 | "name": "nodes", 51 | "type": "symbol", 52 | "from": {"data": "people"}, 53 | "encode": { 54 | "enter": { 55 | "fill": {"scale": "color", "field": "group"}, 56 | "xfocus": {"scale": "xscale", "field": "group", "band": 0.5}, 57 | "yfocus": {"signal": "cy"} 58 | }, 59 | "update": { 60 | "size": {"signal": "pow(2 * radius, 2)"}, 61 | "stroke": {"value": "white"}, 62 | "strokeWidth": {"value": 1}, 63 | "zindex": {"value": 0} 64 | }, 65 | "hover": { 66 | "stroke": {"value": "purple"}, 67 | "strokeWidth": {"value": 3}, 68 | "zindex": {"value": 1} 69 | } 70 | }, 71 | "transform": [ 72 | { 73 | "type": "force", 74 | "iterations": 300, 75 | "static": {"signal": "static"}, 76 | "forces": [ 77 | {"force": "collide", "iterations": {"signal": "collide"}, "radius": {"signal": "radius"}}, 78 | {"force": "x", "x": "xfocus", "strength": {"signal": "gravityX"}}, 79 | {"force": "y", "y": "yfocus", "strength": {"signal": "gravityY"}} 80 | ] 81 | } 82 | ] 83 | } 84 | ] 85 | } 86 | -------------------------------------------------------------------------------- /test/spec/force-network.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 800, 4 | "height": 500, 5 | "padding": 0, 6 | "autosize": "none", 7 | 8 | "signals": [ 9 | { "name": "cx", "update": "width / 2" }, 10 | { "name": "cy", "update": "height / 2" }, 11 | { "name": "nodeRadius", "value": 8, 12 | "bind": {"type": "range", "min": 1, "max": 50, "step": 1} }, 13 | { "name": "nodeCharge", "value": -30, 14 | "bind": {"type": "range", "min":-100, "max": 10, "step": 1} }, 15 | { "name": "linkDistance", "value": 30, 16 | "bind": {"type": "range", "min": 5, "max": 100, "step": 1} }, 17 | { "name": "static", "value": false, 18 | "bind": {"type": "checkbox"} }, 19 | { 20 | "description": "State variable for active node fix status.", 21 | "name": "fix", "value": 0, 22 | "on": [ 23 | { 24 | "events": "symbol:mouseout[!event.buttons], window:mouseup", 25 | "update": "0" 26 | }, 27 | { 28 | "events": "symbol:mouseover", 29 | "update": "fix || 1" 30 | }, 31 | { 32 | "events": "[symbol:mousedown, window:mouseup] > window:mousemove!", 33 | "update": "2", "force": true 34 | } 35 | ] 36 | }, 37 | { 38 | "description": "Graph node most recently interacted with.", 39 | "name": "node", "value": null, 40 | "on": [ 41 | { 42 | "events": "symbol:mouseover", 43 | "update": "fix === 1 ? item() : node" 44 | } 45 | ] 46 | }, 47 | { 48 | "description": "Flag to restart Force simulation upon data changes.", 49 | "name": "restart", "value": false, 50 | "on": [ 51 | {"events": {"signal": "fix"}, "update": "fix > 1"} 52 | ] 53 | } 54 | ], 55 | 56 | "data": [ 57 | { 58 | "name": "node-data", 59 | "url": "data/miserables.json", 60 | "format": {"type": "json", "property": "nodes"} 61 | }, 62 | { 63 | "name": "link-data", 64 | "url": "data/miserables.json", 65 | "format": {"type": "json", "property": "links"} 66 | } 67 | ], 68 | 69 | "scales": [ 70 | { 71 | "name": "color", 72 | "type": "ordinal", 73 | "scheme": "category20c" 74 | } 75 | ], 76 | 77 | "marks": [ 78 | { 79 | "name": "nodes", 80 | "type": "symbol", 81 | "zindex": 1, 82 | 83 | "from": {"data": "node-data"}, 84 | "on": [ 85 | { 86 | "trigger": "fix", 87 | "modify": "node", 88 | "values": "fix === 1 ? {fx:node.x, fy:node.y} : {fx:x(), fy:y()}" 89 | }, 90 | { 91 | "trigger": "!fix", 92 | "modify": "node", "values": "{fx: null, fy: null}" 93 | } 94 | ], 95 | 96 | "encode": { 97 | "enter": { 98 | "fill": {"scale": "color", "field": "group"}, 99 | "stroke": {"value": "white"} 100 | }, 101 | "update": { 102 | "size": {"signal": "2 * nodeRadius * nodeRadius"}, 103 | "cursor": {"value": "pointer"} 104 | } 105 | }, 106 | 107 | "transform": [ 108 | { 109 | "type": "force", 110 | "iterations": 300, 111 | "restart": {"signal": "restart"}, 112 | "static": {"signal": "static"}, 113 | "forces": [ 114 | {"force": "center", "x": {"signal": "cx"}, "y": {"signal": "cy"}}, 115 | {"force": "collide", "radius": {"signal": "nodeRadius"}}, 116 | {"force": "nbody", "strength": {"signal": "nodeCharge"}}, 117 | {"force": "link", "links": "link-data", "distance": {"signal": "linkDistance"}} 118 | ] 119 | } 120 | ] 121 | }, 122 | { 123 | "type": "path", 124 | "from": {"data": "link-data"}, 125 | "interactive": false, 126 | "encode": { 127 | "update": { 128 | "stroke": {"value": "#ccc"}, 129 | "strokeWidth": {"value": 0.5} 130 | } 131 | }, 132 | "transform": [ 133 | { 134 | "type": "linkpath", "shape": "line", 135 | "sourceX": "datum.source.x", "sourceY": "datum.source.y", 136 | "targetX": "datum.target.x", "targetY": "datum.target.y" 137 | } 138 | ] 139 | } 140 | ] 141 | } 142 | -------------------------------------------------------------------------------- /test/spec/gradient.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 300, 4 | "height": 15, 5 | "padding": 5, 6 | 7 | "scales": [ 8 | { 9 | "name": "color", 10 | "type": "sequential", 11 | "scheme": "viridis", 12 | "domain": [0, 100] 13 | } 14 | ], 15 | 16 | "marks": [ 17 | { 18 | "type": "rect", 19 | "encode": { 20 | "update": { 21 | "width": {"signal": "width"}, 22 | "height": {"signal": "height"}, 23 | "fill": {"gradient": "color"} 24 | } 25 | } 26 | } 27 | ] 28 | } -------------------------------------------------------------------------------- /test/spec/grouped-bar.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 300, 4 | "height": 240, 5 | 6 | "data": [ 7 | { 8 | "name": "table", 9 | "values": [ 10 | {"category":"A", "position":0, "value":0.1}, 11 | {"category":"A", "position":1, "value":0.6}, 12 | {"category":"A", "position":2, "value":0.9}, 13 | {"category":"A", "position":3, "value":0.4}, 14 | {"category":"B", "position":0, "value":0.7}, 15 | {"category":"B", "position":1, "value":0.2}, 16 | {"category":"B", "position":2, "value":1.1}, 17 | {"category":"B", "position":3, "value":0.8}, 18 | {"category":"C", "position":0, "value":0.6}, 19 | {"category":"C", "position":1, "value":0.1}, 20 | {"category":"C", "position":2, "value":0.2}, 21 | {"category":"C", "position":3, "value":0.7} 22 | ] 23 | } 24 | ], 25 | 26 | "scales": [ 27 | { 28 | "name": "yscale", 29 | "type": "band", 30 | "domain": {"data": "table", "field": "category"}, 31 | "range": "height", 32 | "padding": 0.2 33 | }, 34 | { 35 | "name": "xscale", 36 | "type": "linear", 37 | "domain": {"data": "table", "field": "value"}, 38 | "range": "width", 39 | "round": true, 40 | "zero": true, 41 | "nice": true 42 | }, 43 | { 44 | "name": "color", 45 | "type": "ordinal", 46 | "domain": {"data": "table", "field": "position"}, 47 | "scheme": "category20" 48 | } 49 | ], 50 | 51 | "axes": [ 52 | {"orient": "left", "scale": "yscale", "tickSize": 0, "tickPadding": 4, "zindex": 1}, 53 | {"orient": "bottom", "scale": "xscale"} 54 | ], 55 | 56 | "marks": [ 57 | { 58 | "type": "group", 59 | 60 | "from": { 61 | "facet": { 62 | "data": "table", 63 | "name": "facet", 64 | "groupby": "category" 65 | } 66 | }, 67 | 68 | "encode": { 69 | "enter": { 70 | "y": {"scale": "yscale", "field": "category"} 71 | } 72 | }, 73 | 74 | "signals": [ 75 | {"name": "height", "update": "bandwidth('yscale')"} 76 | ], 77 | 78 | "scales": [ 79 | { 80 | "name": "pos", 81 | "type": "band", 82 | "range": "height", 83 | "domain": {"data": "facet", "field": "position"} 84 | } 85 | ], 86 | 87 | "marks": [ 88 | { 89 | "name": "bars", 90 | "from": {"data": "facet"}, 91 | "type": "rect", 92 | "encode": { 93 | "enter": { 94 | "y": {"scale": "pos", "field": "position"}, 95 | "height": {"scale": "pos", "band": 1}, 96 | "x": {"scale": "xscale", "field": "value"}, 97 | "x2": {"scale": "xscale", "value": 0}, 98 | "fill": {"scale": "color", "field": "position"} 99 | } 100 | } 101 | }, 102 | { 103 | "type": "text", 104 | "from": {"data": "bars"}, 105 | "encode": { 106 | "enter": { 107 | "x": {"field": "x2", "offset": -5}, 108 | "y": {"field": "y", "offset": {"field": "height", "mult": 0.5}}, 109 | "fill": {"value": "white"}, 110 | "align": {"value": "right"}, 111 | "baseline": {"value": "middle"}, 112 | "text": {"field": "datum.value"} 113 | } 114 | } 115 | } 116 | ] 117 | } 118 | ] 119 | } -------------------------------------------------------------------------------- /test/spec/heatmap-lines.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 800, 4 | "padding": 5, 5 | 6 | "signals": [ 7 | {"name": "bandSize", "value": 25}, 8 | {"name": "height", "update": "bandSize * 24"} 9 | ], 10 | 11 | "data": [ 12 | { 13 | "name": "temperature", 14 | "url": "data/seattle-temps.csv", 15 | "format": {"type": "csv", "parse": {"temp": "number", "date": "date"}}, 16 | "transform": [ 17 | {"type": "formula", "as": "hour", "expr": "hours(datum.date)"}, 18 | { "type": "formula", "as": "date", 19 | "expr": "datetime(year(datum.date), month(datum.date), date(datum.date))"} 20 | ] 21 | } 22 | ], 23 | 24 | "scales": [ 25 | { 26 | "name": "row", 27 | "type": "band", 28 | "domain": [ 29 | 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 30 | 0, 1, 2, 3, 4, 5 31 | ], 32 | "bandSize": {"signal": "bandSize"} 33 | }, 34 | { 35 | "name": "x", 36 | "type": "time", 37 | "domain": {"data": "temperature", "field": "date"}, 38 | "range": "width" 39 | }, 40 | { 41 | "name": "y", 42 | "type": "linear", "zero": false, 43 | "domain": {"data": "temperature", "field": "temp"}, 44 | "range": [{"signal": "bandSize"}, 1] 45 | } 46 | ], 47 | 48 | "axes": [ 49 | {"orient": "bottom", "scale": "x", "domain": false, "title": "Month"}, 50 | { 51 | "orient": "left", "scale": "row", "domain": false, "title": "Hour", 52 | "tickSize": 0, 53 | "encode": { 54 | "labels": { 55 | "update": { 56 | "text": {"signal": "datum.value === 0 ? 'Midnight' : datum.value === 12 ? 'Noon' : datum.value < 12 ? datum.value + ':00 am' : (datum.value - 12) + ':00 pm'"} 57 | } 58 | } 59 | } 60 | } 61 | ], 62 | 63 | "marks": [ 64 | { 65 | "type": "group", 66 | "from": { 67 | "facet": { 68 | "name": "hour", 69 | "data": "temperature", 70 | "groupby": "hour" 71 | } 72 | }, 73 | "encode": { 74 | "enter": { 75 | "x": {"value": 0}, 76 | "y": {"scale": "row", "field": "hour"}, 77 | "width": {"signal": "width"}, 78 | "height": {"signal": "bandSize"} 79 | } 80 | }, 81 | "marks": [ 82 | { 83 | "type": "area", 84 | "from": {"data": "hour"}, 85 | "encode": { 86 | "enter": { 87 | "x": {"scale": "x", "field": "date"}, 88 | "y": {"scale": "y", "field": "temp"}, 89 | "y2": {"signal": "bandSize"} 90 | } 91 | } 92 | } 93 | ] 94 | }, 95 | { 96 | "type": "text", 97 | "encode": { 98 | "enter": { 99 | "x": {"value": 0}, 100 | "y": {"value": -4}, 101 | "text": {"value": "Seattle Annual Temperatures"}, 102 | "baseline": {"value": "bottom"}, 103 | "fontSize": {"value": 14}, 104 | "fontWeight": {"value": "bold"}, 105 | "fill": {"value": "black"} 106 | } 107 | } 108 | } 109 | ] 110 | } -------------------------------------------------------------------------------- /test/spec/heatmap.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 800, 4 | "height": 500, 5 | "padding": 5, 6 | 7 | "signals": [ 8 | { 9 | "name": "palette", "value": "Plasma", 10 | "bind": { 11 | "type": "select", 12 | "options": [ 13 | "Viridis", 14 | "Magma", 15 | "Inferno", 16 | "Plasma", 17 | "Cubehelix", 18 | "Rainbow", 19 | "Warm", 20 | "Cool", 21 | "Blues", 22 | "Greens", 23 | "Greys", 24 | "Purples", 25 | "Reds", 26 | "Oranges", 27 | "BrownBlueGreen", 28 | "PurpleGreen", 29 | "PinkYellowGreen", 30 | "PurpleOrange", 31 | "RedBlue", 32 | "RedGrey", 33 | "RedYellowBlue", 34 | "RedYellowGreen", 35 | "BlueGreen", 36 | "BluePurple", 37 | "GreenBlue", 38 | "OrangeRed", 39 | "PurpleBlueGreen", 40 | "PurpleBlue", 41 | "PurpleRed", 42 | "RedPurple", 43 | "YellowGreenBlue", 44 | "YellowGreen", 45 | "YellowOrangeBrown", 46 | "YellowOrangeRed" 47 | ] 48 | } 49 | }, 50 | { 51 | "name": "reverse", "value": false, "bind": {"type": "checkbox"} 52 | } 53 | ], 54 | 55 | "data": [ 56 | { 57 | "name": "temperature", 58 | "url": "data/seattle-temps.csv", 59 | "format": {"type": "csv", "parse": {"temp": "number", "date": "date"}}, 60 | "transform": [ 61 | {"type": "formula", "as": "hour", "expr": "hours(datum.date)"}, 62 | { "type": "formula", "as": "date", 63 | "expr": "datetime(year(datum.date), month(datum.date), date(datum.date))"} 64 | ] 65 | } 66 | ], 67 | 68 | "scales": [ 69 | { 70 | "name": "x", 71 | "type": "time", 72 | "domain": {"data": "temperature", "field": "date"}, 73 | "range": "width" 74 | }, 75 | { 76 | "name": "y", 77 | "type": "band", 78 | "domain": [ 79 | 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 80 | 0, 1, 2, 3, 4, 5 81 | ], 82 | "range": "height" 83 | }, 84 | { 85 | "name": "color", 86 | "type": "sequential", 87 | "scheme": {"signal": "palette"}, 88 | "domain": {"data": "temperature", "field": "temp"}, 89 | "reverse": {"signal": "reverse"}, 90 | "zero": false, "nice": false 91 | } 92 | ], 93 | 94 | "axes": [ 95 | {"orient": "bottom", "scale": "x", "domain": false, "title": "Month"}, 96 | { 97 | "orient": "left", "scale": "y", "domain": false, "title": "Hour", 98 | "encode": { 99 | "labels": { 100 | "update": { 101 | "text": {"signal": "datum.value === 0 ? 'Midnight' : datum.value === 12 ? 'Noon' : datum.value < 12 ? datum.value + ':00 am' : (datum.value - 12) + ':00 pm'"} 102 | } 103 | } 104 | } 105 | } 106 | ], 107 | 108 | "legends": [ 109 | {"fill": "color", "type": "gradient", "title": "Avg. Temp (°F)"} 110 | ], 111 | 112 | "marks": [ 113 | { 114 | "type": "rect", 115 | "from": {"data": "temperature"}, 116 | "encode": { 117 | "enter": { 118 | "x": {"scale": "x", "field": "date"}, 119 | "width": {"value": 5}, 120 | "y": {"scale": "y", "field": "hour"}, 121 | "height": {"scale": "y", "band": 1} 122 | }, 123 | "update": { 124 | "fill": {"scale": "color", "field": "temp"} 125 | } 126 | } 127 | }, 128 | { 129 | "type": "text", 130 | "encode": { 131 | "enter": { 132 | "x": {"value": 0}, 133 | "y": {"value": -4}, 134 | "text": {"value": "Seattle Annual Temperatures"}, 135 | "baseline": {"value": "bottom"}, 136 | "fontSize": {"value": 14}, 137 | "fontWeight": {"value": "bold"}, 138 | "fill": {"value": "black"} 139 | } 140 | } 141 | } 142 | ] 143 | } -------------------------------------------------------------------------------- /test/spec/histogram.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 500, 4 | "height": 100, 5 | "padding": 5, 6 | 7 | "signals": [ 8 | { "name": "binOffset", "value": 0, 9 | "bind": {"type": "range", "min": -0.1, "max": 0.1} }, 10 | { "name": "binStep", "value": 0.1, 11 | "bind": {"type": "range", "min": 0.001, "max": 0.4, "step": 0.001} }, 12 | { "name": "extent", "update": "[binOffset, 2+binOffset]" } 13 | ], 14 | 15 | "data": [ 16 | { 17 | "name": "points", 18 | "url": "data/normal-2d.json" 19 | }, 20 | { 21 | "name": "binned", 22 | "source": "points", 23 | "transform": [ 24 | { 25 | "type": "bin", "field": "u", 26 | "extent": {"signal": "extent"}, 27 | "step": {"signal": "binStep"}, 28 | "nice": false 29 | }, 30 | { 31 | "type": "aggregate", 32 | "key": "bin0", "groupby": ["bin0", "bin1"], 33 | "fields": ["bin0"], "ops": ["count"], "as": ["count"] 34 | } 35 | ] 36 | } 37 | ], 38 | 39 | "scales": [ 40 | { 41 | "name": "xscale", 42 | "type": "linear", 43 | "range": "width", 44 | "domain": [-1, 1] 45 | }, 46 | { 47 | "name": "yscale", 48 | "type": "linear", 49 | "range": "height", "round": true, 50 | "domain": {"data": "binned", "field": "count"}, 51 | "zero": true, "nice": true 52 | } 53 | ], 54 | 55 | "axes": [ 56 | {"orient": "bottom", "scale": "xscale", "zindex": 1}, 57 | {"orient": "left", "scale": "yscale", "tickCount": 5, "zindex": 1} 58 | ], 59 | 60 | "marks": [ 61 | { 62 | "type": "rect", 63 | "from": {"data": "binned"}, 64 | "encode": { 65 | "update": { 66 | "x": {"scale": "xscale", "field": "bin0"}, 67 | "x2": {"scale": "xscale", "field": "bin1", 68 | "offset": {"signal": "binStep > 0.02 ? -0.5 : 0"}}, 69 | "y": {"scale": "yscale", "field": "count"}, 70 | "y2": {"scale": "yscale", "value": 0}, 71 | "fill": {"value": "steelblue"} 72 | }, 73 | "hover": { "fill": {"value": "firebrick"} } 74 | } 75 | }, 76 | { 77 | "type": "rect", 78 | "from": {"data": "points"}, 79 | "encode": { 80 | "enter": { 81 | "x": {"scale": "xscale", "field": "u"}, 82 | "width": {"value": 1}, 83 | "y": {"value": 25, "offset": {"signal": "height"}}, 84 | "height": {"value": 5}, 85 | "fill": {"value": "steelblue"}, 86 | "fillOpacity": {"value": 0.4} 87 | } 88 | } 89 | } 90 | ] 91 | } -------------------------------------------------------------------------------- /test/spec/horizon.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 500, 4 | "height": 50, 5 | 6 | "signals": [ 7 | { 8 | "name": "layers", 9 | "value": 2, 10 | "on": [{"events": "mousedown!", "update": "1 + (layers % 4)"}] 11 | }, 12 | { 13 | "name": "vheight", 14 | "update": "height * layers" 15 | }, 16 | { 17 | "name": "opacity", 18 | "update": "pow(layers, -2/3)" 19 | } 20 | ], 21 | 22 | "data": [ 23 | { 24 | "name": "layer_indices", 25 | "values": [0, 1, 2, 3], 26 | "transform": [ 27 | {"type": "filter", "expr": "datum.data < layers"}, 28 | {"type": "formula", "expr": "datum.data * -height", "as": "offset"} 29 | ] 30 | }, 31 | { 32 | "name": "table", 33 | "values": [ 34 | {"x": 1, "y": 28}, {"x": 2, "y": 55}, 35 | {"x": 3, "y": 43}, {"x": 4, "y": 91}, 36 | {"x": 5, "y": 81}, {"x": 6, "y": 53}, 37 | {"x": 7, "y": 19}, {"x": 8, "y": 87}, 38 | {"x": 9, "y": 52}, {"x": 10, "y": 48}, 39 | {"x": 11, "y": 24}, {"x": 12, "y": 49}, 40 | {"x": 13, "y": 87}, {"x": 14, "y": 66}, 41 | {"x": 15, "y": 17}, {"x": 16, "y": 27}, 42 | {"x": 17, "y": 68}, {"x": 18, "y": 16}, 43 | {"x": 19, "y": 49}, {"x": 20, "y": 15} 44 | ] 45 | } 46 | ], 47 | 48 | "scales": [ 49 | { 50 | "name": "x", 51 | "type": "linear", 52 | "range": "width", 53 | "zero": false, "round": true, 54 | "domain": {"data": "table", "field": "x"} 55 | }, 56 | { 57 | "name": "y", 58 | "type": "linear", 59 | "range": [{"signal":"vheight"}, 0], 60 | "nice": true, "zero": true, 61 | "domain": {"data": "table", "field": "y"} 62 | } 63 | ], 64 | 65 | "axes": [ 66 | {"orient": "bottom", "scale": "x", "tickCount": 20} 67 | ], 68 | 69 | "marks": [ 70 | { 71 | "type": "group", 72 | "encode": { 73 | "update": { 74 | "width": {"field": {"group": "width"}}, 75 | "height": {"field": {"group": "height"}}, 76 | "clip": {"value": true} 77 | } 78 | }, 79 | "marks": [ 80 | { 81 | "type": "group", 82 | "from": {"data": "layer_indices"}, 83 | "encode": { 84 | "update": { 85 | "y": {"field": "offset"} 86 | } 87 | }, 88 | "marks": [ 89 | { 90 | "type": "area", 91 | "from": {"data": "table"}, 92 | "encode": { 93 | "enter": { 94 | "interpolate": {"value": "monotone"}, 95 | "x": {"scale": "x", "field": "x"}, 96 | "fill": {"value": "steelblue"} 97 | }, 98 | "update": { 99 | "y": {"scale": "y", "field": "y"}, 100 | "y2": {"scale": "y", "value": 0}, 101 | "fillOpacity": {"signal": "opacity"} 102 | } 103 | } 104 | } 105 | ] 106 | } 107 | ] 108 | } 109 | ] 110 | } -------------------------------------------------------------------------------- /test/spec/images.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 200, 4 | "height": 200, 5 | "padding": 5, 6 | 7 | "data": [ 8 | { 9 | "name": "data", 10 | "values": [ 11 | {"x": 0.5, "y": 0.5, "img": "data/ffox.png"}, 12 | {"x": 1.5, "y": 1.5, "img": "data/gimp.png"}, 13 | {"x": 2.5, "y": 2.5, "img": "data/7zip.png"} 14 | ] 15 | } 16 | ], 17 | 18 | "scales": [ 19 | { 20 | "name": "x", 21 | "type": "linear", 22 | "domain": [0, 3], 23 | "range": "width" 24 | }, 25 | { 26 | "name": "y", 27 | "type": "linear", 28 | "domain": [0, 3], 29 | "range": "height" 30 | } 31 | ], 32 | 33 | "axes": [ 34 | {"orient": "bottom", "scale": "x", "tickCount": 5}, 35 | {"orient": "left", "scale": "y", "tickCount": 5} 36 | ], 37 | 38 | "marks": [ 39 | { 40 | "type": "image", 41 | "from": {"data": "data"}, 42 | "encode": { 43 | "enter": { 44 | "url": {"field": "img"}, 45 | "width": {"value": 50}, 46 | "height": {"value": 50}, 47 | "x": {"scale": "x", "field": "x"}, 48 | "y": {"scale": "y", "field": "y"}, 49 | "align": {"value": "center"}, 50 | "baseline": {"value": "middle"} 51 | }, 52 | "update": { 53 | "opacity": {"value": 1.0} 54 | }, 55 | "hover": { 56 | "opacity": {"value": 0.5} 57 | } 58 | } 59 | } 60 | ] 61 | } -------------------------------------------------------------------------------- /test/spec/legends.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 0, 4 | "height": 0, 5 | "padding": 5, 6 | 7 | "scales": [ 8 | { 9 | "name": "sequence", 10 | "type": "sequential", 11 | "scheme": "viridis", 12 | "domain": [0, 100] 13 | }, 14 | { 15 | "name": "stops", 16 | "type": "linear", 17 | "range": ["#f00", "#a44", "#666", "#4a4", "#0f0"], 18 | "domain": [-100, -35, 0, 35, 100] 19 | } 20 | ], 21 | 22 | "legends": [ 23 | { 24 | "type": "gradient", 25 | "fill": "sequence", 26 | "orient": "left", 27 | "title": "Gradient", 28 | "offset": 0 29 | }, 30 | { 31 | "type": "gradient", 32 | "stroke": "stops", 33 | "orient": "left", 34 | "title": "Multi-Stop", 35 | "offset": 0 36 | }, 37 | { 38 | "type": "symbol", 39 | "stroke": "sequence", 40 | "orient": "right", 41 | "title": "Sequence", 42 | "encode": { 43 | "symbols": { 44 | "interactive": true, 45 | "update": {"fill": {"value": "transparent"}}, 46 | "hover": {"fill": {"value": "#ccc"}} 47 | }, 48 | "labels": { 49 | "interactive": true, 50 | "update": {"fill": {"value": "#000"}, "fontWeight": {"value": null}}, 51 | "hover": {"fill": {"value": "firebrick"}, "fontWeight": {"value": "bold"}} 52 | } 53 | } 54 | }, 55 | { 56 | "type": "symbol", 57 | "fill": "stops", 58 | "orient": "right", 59 | "title": "Stops", 60 | "values": [-100, -35, 0, 35, 100] 61 | } 62 | ] 63 | } -------------------------------------------------------------------------------- /test/spec/lifelines.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 500, 4 | "height": 80, 5 | "padding": 5, 6 | 7 | "data": [ 8 | { 9 | "name": "people", 10 | "values": [ 11 | { 12 | "label": "Washington", 13 | "born": -7506057600000, 14 | "died": -5366196000000, 15 | "enter": -5701424400000, 16 | "leave": -5453884800000 17 | }, 18 | { 19 | "label": "Adams", 20 | "born": -7389766800000, 21 | "died": -4528285200000, 22 | "enter": -5453884800000, 23 | "leave": -5327740800000 24 | }, 25 | { 26 | "label": "Jefferson", 27 | "born": -7154586000000, 28 | "died": -4528285200000, 29 | "enter": -5327740800000, 30 | "leave": -5075280000000 31 | }, 32 | { 33 | "label": "Madison", 34 | "born": -6904544400000, 35 | "died": -4213184400000, 36 | "enter": -5075280000000, 37 | "leave": -4822819200000 38 | }, 39 | { 40 | "label": "Monroe", 41 | "born": -6679904400000, 42 | "died": -4370518800000, 43 | "enter": -4822819200000, 44 | "leave": -4570358400000 45 | } 46 | ] 47 | }, 48 | { 49 | "name": "events", 50 | "format": {"type":"json", "parse":{"when":"date"}}, 51 | "values": [ 52 | { "name":"Decl. of Independence", "when":"July 4, 1776" }, 53 | { "name":"U.S. Constitution", "when":"3/4/1789" }, 54 | { "name":"Louisiana Purchase", "when":"April 30, 1803" }, 55 | { "name":"Monroe Doctrine", "when":"Dec 2, 1823" } 56 | ] 57 | } 58 | ], 59 | 60 | "scales": [ 61 | { 62 | "name": "yscale", 63 | "type": "band", 64 | "range": [0, {"signal": "height"}], 65 | "domain": {"data": "people", "field": "label"} 66 | }, 67 | { 68 | "name": "xscale", 69 | "type": "time", 70 | "range": "width", 71 | "round": true, 72 | "domain": {"data": "people", "fields": ["born", "died"]} 73 | } 74 | ], 75 | 76 | "axes": [ 77 | {"orient": "bottom", "scale": "xscale"} 78 | ], 79 | 80 | "marks": [ 81 | { 82 | "type": "text", 83 | "from": {"data": "events"}, 84 | "encode": { 85 | "enter": { 86 | "x": {"scale": "xscale", "field": "when"}, 87 | "y": {"value": -10}, 88 | "angle": {"value": -25}, 89 | "fill": {"value": "#000"}, 90 | "text": {"field": "name"}, 91 | "font": {"value": "Helvetica Neue"}, 92 | "fontSize": {"value": 10} 93 | } 94 | } 95 | }, 96 | { 97 | "type": "rect", 98 | "from": {"data": "events"}, 99 | "encode": { 100 | "enter": { 101 | "x": {"scale": "xscale", "field": "when"}, 102 | "y": {"value": -8}, 103 | "width": {"value": 1}, 104 | "height": {"field": {"group": "height"}, "offset": 8}, 105 | "fill": {"value": "#888"} 106 | } 107 | } 108 | }, 109 | { 110 | "type": "text", 111 | "from": {"data": "people"}, 112 | "encode": { 113 | "enter": { 114 | "x": {"scale": "xscale", "field": "born"}, 115 | "y": {"scale": "yscale", "field": "label", "offset": -3}, 116 | "fill": {"value": "#000"}, 117 | "text": {"field": "label"}, 118 | "font": {"value": "Helvetica Neue"}, 119 | "fontSize": {"value": 10} 120 | } 121 | } 122 | }, 123 | { 124 | "type": "rect", 125 | "from": {"data": "people"}, 126 | "encode": { 127 | "enter": { 128 | "x": {"scale": "xscale", "field": "born"}, 129 | "x2": {"scale": "xscale", "field": "died"}, 130 | "y": {"scale": "yscale", "field": "label"}, 131 | "height": {"value": 2}, 132 | "fill": {"value": "#557"} 133 | } 134 | } 135 | }, 136 | { 137 | "type": "rect", 138 | "from": {"data": "people"}, 139 | "encode": { 140 | "enter": { 141 | "x": {"scale": "xscale", "field": "enter"}, 142 | "x2": {"scale": "xscale", "field": "leave"}, 143 | "y": {"scale": "yscale", "field": "label", "offset":-1}, 144 | "height": {"value": 4}, 145 | "fill": {"value": "#e44"} 146 | } 147 | } 148 | } 149 | ] 150 | } -------------------------------------------------------------------------------- /test/spec/map-bind.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 900, 4 | "height": 500, 5 | "autosize": "none", 6 | 7 | "encode": { 8 | "update": { 9 | "fill": {"signal": "background"} 10 | } 11 | }, 12 | 13 | "signals": [ 14 | { 15 | "name": "type", 16 | "value": "mercator", 17 | "bind": { 18 | "type": "select", 19 | "options": [ 20 | "albers", 21 | "albersUsa", 22 | "azimuthalEqualArea", 23 | "azimuthalEquidistant", 24 | "conicConformal", 25 | "conicEqualArea", 26 | "conicEquidistant", 27 | "equirectangular", 28 | "gnomonic", 29 | "mercator", 30 | "orthographic", 31 | "stereographic", 32 | "transverseMercator" 33 | ] 34 | } 35 | }, 36 | { "name": "scale", "value": 150, 37 | "bind": {"type": "range", "min": 50, "max": 2000, "step": 1} }, 38 | { "name": "rotate0", "value": 0, 39 | "bind": {"type": "range", "min": -180, "max": 180, "step": 1} }, 40 | { "name": "rotate1", "value": 0, 41 | "bind": {"type": "range", "min": -90, "max": 90, "step": 1} }, 42 | { "name": "rotate2", "value": 0, 43 | "bind": {"type": "range", "min": -180, "max": 180, "step": 1} }, 44 | { "name": "center0", "value": 0, 45 | "bind": {"type": "range", "min": -180, "max": 180, "step": 1} }, 46 | { "name": "center1", "value": 0, 47 | "bind": {"type": "range", "min": -90, "max": 90, "step": 1} }, 48 | { "name": "translate0", "update": "width / 2" }, 49 | { "name": "translate1", "update": "height / 2" }, 50 | 51 | { "name": "graticuleDash", "value": 0, 52 | "bind": {"type": "radio", "options": [0, 3, 5, 10]} }, 53 | { "name": "borderWidth", "value": 1, 54 | "bind": {"type": "text"} }, 55 | { "name": "background", "value": "#ffffff", 56 | "bind": {"type": "color"} }, 57 | { "name": "invert", "value": false, 58 | "bind": {"type": "checkbox"} } 59 | ], 60 | 61 | "projections": [ 62 | { 63 | "name": "projection", 64 | "type": {"signal": "type"}, 65 | "scale": {"signal": "scale"}, 66 | "rotate": [ 67 | {"signal": "rotate0"}, 68 | {"signal": "rotate1"}, 69 | {"signal": "rotate2"} 70 | ], 71 | "center": [ 72 | {"signal": "center0"}, 73 | {"signal": "center1"} 74 | ], 75 | "translate": [ 76 | {"signal": "translate0"}, 77 | {"signal": "translate1"} 78 | ] 79 | } 80 | ], 81 | 82 | "data": [ 83 | { 84 | "name": "world", 85 | "url": "data/world-110m.json", 86 | "format": { 87 | "type": "topojson", 88 | "feature": "countries" 89 | } 90 | }, 91 | { 92 | "name": "graticule", 93 | "transform": [ 94 | { "type": "graticule" } 95 | ] 96 | } 97 | ], 98 | 99 | "marks": [ 100 | { 101 | "type": "shape", 102 | "from": {"data": "graticule"}, 103 | "encode": { 104 | "update": { 105 | "strokeWidth": {"value": 1}, 106 | "strokeDash": {"signal": "[+graticuleDash, +graticuleDash]"}, 107 | "stroke": {"signal": "invert ? '#444' : '#ddd'"}, 108 | "fill": {"value": null} 109 | } 110 | }, 111 | "transform": [ 112 | { "type": "geoshape", "projection": "projection" } 113 | ] 114 | }, 115 | { 116 | "type": "shape", 117 | "from": {"data": "world"}, 118 | "encode": { 119 | "update": { 120 | "strokeWidth": {"signal": "+borderWidth"}, 121 | "stroke": {"signal": "invert ? '#777' : '#bbb'"}, 122 | "fill": {"signal": "invert ? '#fff' : '#000'"}, 123 | "zindex": {"value": 0} 124 | }, 125 | "hover": { 126 | "strokeWidth": {"signal": "+borderWidth + 1"}, 127 | "stroke": {"value": "firebrick"}, 128 | "zindex": {"value": 1} 129 | } 130 | }, 131 | "transform": [ 132 | { "type": "geoshape", "projection": "projection" } 133 | ] 134 | } 135 | ] 136 | } -------------------------------------------------------------------------------- /test/spec/map.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 900, 4 | "height": 500, 5 | "autosize": "none", 6 | 7 | "signals": [ 8 | { "name": "tx", "update": "width / 2" }, 9 | { "name": "ty", "update": "height / 2" }, 10 | { 11 | "name": "scale", 12 | "value": 150, 13 | "on": [{ 14 | "events": {"type": "wheel", "consume": true}, 15 | "update": "clamp(scale * pow(1.0005, -event.deltaY * pow(16, event.deltaMode)), 150, 3000)" 16 | }] 17 | }, 18 | { 19 | "name": "angles", 20 | "value": [0, 0], 21 | "on": [{ 22 | "events": "mousedown", 23 | "update": "[rotateX, centerY]" 24 | }] 25 | }, 26 | { 27 | "name": "cloned", 28 | "value": null, 29 | "on": [{ 30 | "events": "mousedown", 31 | "update": "copy('projection')" 32 | }] 33 | }, 34 | { 35 | "name": "start", 36 | "value": null, 37 | "on": [{ 38 | "events": "mousedown", 39 | "update": "invert(cloned, xy())" 40 | }] 41 | }, 42 | { 43 | "name": "drag", "value": null, 44 | "on": [{ 45 | "events": "[mousedown, window:mouseup] > window:mousemove", 46 | "update": "invert(cloned, xy())" 47 | }] 48 | }, 49 | { 50 | "name": "delta", "value": null, 51 | "on": [{ 52 | "events": {"signal": "drag"}, 53 | "update": "[drag[0] - start[0], start[1] - drag[1]]" 54 | }] 55 | }, 56 | { 57 | "name": "rotateX", "value": 0, 58 | "on": [{ 59 | "events": {"signal": "delta"}, 60 | "update": "angles[0] + delta[0]" 61 | }] 62 | }, 63 | { 64 | "name": "centerY", "value": 0, 65 | "on": [{ 66 | "events": {"signal": "delta"}, 67 | "update": "clamp(angles[1] + delta[1], -60, 60)" 68 | }] 69 | } 70 | ], 71 | 72 | "projections": [ 73 | { 74 | "name": "projection", 75 | "type": "mercator", 76 | "scale": {"signal": "scale"}, 77 | "rotate": [{"signal": "rotateX"}, 0, 0], 78 | "center": [0, {"signal": "centerY"} ], 79 | "translate": [{"signal": "tx"}, {"signal": "ty"}] 80 | } 81 | ], 82 | 83 | "data": [ 84 | { 85 | "name": "world", 86 | "url": "data/world-110m.json", 87 | "format": { 88 | "type": "topojson", 89 | "feature": "countries" 90 | } 91 | }, 92 | { 93 | "name": "graticule", 94 | "transform": [ 95 | { "type": "graticule", "step": [15, 15] } 96 | ] 97 | } 98 | ], 99 | 100 | "marks": [ 101 | { 102 | "type": "shape", 103 | "from": {"data": "graticule"}, 104 | "encode": { 105 | "enter": { 106 | "strokeWidth": {"value": 1}, 107 | "stroke": {"value": "#ddd"}, 108 | "fill": {"value": null} 109 | } 110 | }, 111 | "transform": [ 112 | { "type": "geoshape", "projection": "projection" } 113 | ] 114 | }, 115 | { 116 | "type": "shape", 117 | "from": {"data": "world"}, 118 | "encode": { 119 | "enter": { 120 | "strokeWidth": {"value": 0.5}, 121 | "stroke": {"value": "#bbb"}, 122 | "fill": {"value": "#e5e8d3"} 123 | } 124 | }, 125 | "transform": [ 126 | { "type": "geoshape", "projection": "projection" } 127 | ] 128 | } 129 | ] 130 | } -------------------------------------------------------------------------------- /test/spec/movies-sort.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 15, 4 | "padding": 5, 5 | "autosize": "pad", 6 | 7 | "config": { 8 | "axisLeft": { 9 | "titleX": -5, 10 | "titleY": -2, 11 | "titleAlign": "right", 12 | "titleAngle": 0, 13 | "titleBaseline": "bottom" 14 | } 15 | }, 16 | 17 | "signals": [ 18 | { 19 | "name": "cellSize", 20 | "value": 15 21 | }, 22 | { 23 | "name": "height", 24 | "update": "cellSize * extent[1]" 25 | }, 26 | { 27 | "name": "sortop", 28 | "value": "count", 29 | "bind": {"type": "radio", "options": ["count", "min"]} 30 | }, 31 | { 32 | "name": "sortorder", 33 | "value": "descending", 34 | "bind": {"type": "radio", "options": ["ascending", "descending"]} 35 | } 36 | ], 37 | 38 | "data": [ 39 | { 40 | "name": "source", 41 | "url": "data/movies.json" 42 | }, 43 | { 44 | "name": "layout", 45 | "source": "source", 46 | "transform": [ 47 | { 48 | "type": "aggregate", 49 | "fields": ["Title"], 50 | "ops": ["distinct"], 51 | "signal": "aggregate" 52 | }, 53 | { 54 | "type": "extent", 55 | "field": "distinct_Title", 56 | "signal": "extent" 57 | } 58 | ] 59 | } 60 | ], 61 | 62 | "marks": [ 63 | { 64 | "type": "symbol", 65 | "from": {"data": "source"}, 66 | "encode": { 67 | "update": { 68 | "x": {"value": 10}, 69 | "y": {"scale": "y", "field": "Title"}, 70 | "size": {"value": 36}, 71 | "shape": {"value": "circle"}, 72 | "strokeWidth": {"value": 1.5}, 73 | "opacity": {"value": 0.7}, 74 | "stroke": {"value": "steelblue"}, 75 | "fill": {"value": "transparent"} 76 | }, 77 | "hover": { 78 | "stroke": {"value": "firebrick"}, 79 | "cursor": {"value": "pointer"} 80 | } 81 | } 82 | } 83 | ], 84 | 85 | "scales": [ 86 | { 87 | "name": "y", 88 | "type": "point", 89 | "domain": { 90 | "data": "source", 91 | "field": "Title", 92 | "sort": { 93 | "field": "Title", 94 | "op": {"signal": "sortop"}, 95 | "order": {"signal": "sortorder"} 96 | } 97 | }, 98 | "bandSize": {"signal": "cellSize"}, 99 | "padding": 0.5 100 | } 101 | ], 102 | 103 | "axes": [ 104 | { 105 | "scale": "y", 106 | "orient": "left", 107 | "title": "Film Title", 108 | "encode": { 109 | "labels": { 110 | "interactive": true, 111 | "title": { 112 | "update": { 113 | "x": {"value": -5}, 114 | "y": {"value": -2}, 115 | "align": {"value": "right"}, 116 | "baseline": {"value": "bottom"}, 117 | "angle": {"value": 0} 118 | } 119 | }, 120 | "enter": { 121 | "text": {"signal": "truncate(datum.label, 25)"} 122 | }, 123 | "update": { 124 | "fill": {"value": "black"} 125 | }, 126 | "hover": { 127 | "fill": {"value": "firebrick"}, 128 | "cursor": {"value": "pointer"} 129 | } 130 | } 131 | } 132 | } 133 | ] 134 | } -------------------------------------------------------------------------------- /test/spec/nested.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 300, 4 | "padding": 5, 5 | "autosize": "pad", 6 | 7 | "encode": { 8 | "enter": { 9 | "fill": {"value": "transparent"}, 10 | "strokeWidth": {"value": 1}, 11 | "stroke": {"value": "#888"} 12 | }, 13 | "update": { 14 | "strokeDash": {"value": [3, 3]} 15 | }, 16 | "hover": { 17 | "strokeDash": {"value": []} 18 | } 19 | }, 20 | 21 | "signals": [ 22 | { 23 | "name": "height", 24 | "update": "extent[1] * bandSize" 25 | }, 26 | { 27 | "name": "bandSize", 28 | "value": 20 29 | } 30 | ], 31 | 32 | "data": [ 33 | { 34 | "name": "tuples", 35 | "values": [ 36 | {"a": 0, "b": "a", "c": 6.3}, 37 | {"a": 0, "b": "a", "c": 4.2}, 38 | {"a": 0, "b": "b", "c": 6.8}, 39 | {"a": 1, "b": "b", "c": 4.4}, 40 | {"a": 2, "b": "b", "c": 3.5}, 41 | {"a": 2, "b": "c", "c": 6.2} 42 | ], 43 | "transform": [ 44 | { 45 | "type": "aggregate", 46 | "groupby": ["a", "b"], 47 | "fields": ["c"], 48 | "ops": ["average"], 49 | "as": ["c"] 50 | } 51 | ] 52 | }, 53 | { 54 | "name": "trellis", 55 | "source": "tuples", 56 | "transform": [ 57 | { 58 | "type": "aggregate", 59 | "groupby": ["a"] 60 | }, 61 | { 62 | "type": "stack", 63 | "field": "count" 64 | }, 65 | { 66 | "type": "extent", 67 | "field": "y1", 68 | "signal": "extent" 69 | } 70 | ] 71 | } 72 | ], 73 | 74 | "scales": [ 75 | { 76 | "name": "xscale", 77 | "domain": {"data": "tuples", "field": "c"}, 78 | "nice": true, 79 | "zero": true, 80 | "round": true, 81 | "range": "width" 82 | }, 83 | { 84 | "name": "color", 85 | "type": "ordinal", 86 | "scheme": "category10", 87 | "domain": {"data": "trellis", "field": "a"} 88 | } 89 | ], 90 | 91 | "axes": [ 92 | { "orient": "bottom", "scale": "xscale", "domain": true } 93 | ], 94 | 95 | "marks": [ 96 | { 97 | "type": "group", 98 | 99 | "from": { 100 | "data": "trellis", 101 | "facet": { 102 | "name": "faceted_tuples", 103 | "data": "tuples", 104 | "groupby": "a" 105 | } 106 | }, 107 | 108 | "encode": { 109 | "enter": { 110 | "x": {"value": 0}, 111 | "width": {"signal": "width"}, 112 | "y": {"field": "y0", "mult": {"signal": "bandSize"}}, 113 | "y2": {"field": "y1", "mult": {"signal": "bandSize"}} 114 | } 115 | }, 116 | 117 | "scales": [ 118 | { 119 | "name": "yscale", 120 | "type": "band", 121 | "padding": 0.11, 122 | "round": true, 123 | "domain": {"data": "faceted_tuples", "field": "b"}, 124 | "bandSize": {"signal": "bandSize"} 125 | } 126 | ], 127 | 128 | "axes": [ 129 | { "orient": "left", "scale": "yscale", 130 | "tickSize": 0, "tickPadding": 4, "domain": false } 131 | ], 132 | 133 | "marks": [ 134 | { 135 | "type": "rect", 136 | "from": {"data": "faceted_tuples"}, 137 | "encode": { 138 | "enter": { 139 | "x": {"value": 0}, 140 | "x2": {"scale": "xscale", "field": "c"}, 141 | "y": {"scale": "yscale", "field": "b"}, 142 | "height": {"scale": "yscale", "band": 1}, 143 | "fill": {"scale": "color", "field": "a"}, 144 | "cornerRadius": {"value": 8}, 145 | "strokeWidth": {"value": 2} 146 | }, 147 | "update": { 148 | "stroke": {"value": null} 149 | }, 150 | "hover": { 151 | "stroke": {"value": "firebrick"} 152 | } 153 | } 154 | } 155 | ] 156 | } 157 | ] 158 | } -------------------------------------------------------------------------------- /test/spec/parallel-coords.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 700, 4 | "height": 400, 5 | "padding": 5, 6 | 7 | "config": { 8 | "axisY": { 9 | "titleX": -2, 10 | "titleY": 410, 11 | "titleAngle": 0, 12 | "titleAlign": "right", 13 | "titleBaseline": "top" 14 | } 15 | }, 16 | 17 | "data": [ 18 | { 19 | "name": "cars", 20 | "url": "data/cars.json", 21 | "transform": [ 22 | {"type": "filter", "expr": "datum.Horsepower && datum.Miles_per_Gallon"} 23 | ] 24 | }, 25 | { 26 | "name": "fields", 27 | "values": [ 28 | "Cylinders", 29 | "Displacement", 30 | "Weight_in_lbs", 31 | "Horsepower", 32 | "Acceleration", 33 | "Miles_per_Gallon", 34 | "Year" 35 | ] 36 | } 37 | ], 38 | 39 | "scales": [ 40 | { 41 | "name": "ord", "type": "point", 42 | "range": "width", "round": true, 43 | "domain": {"data": "fields", "field": "data"} 44 | }, 45 | { 46 | "name": "Cylinders", "type": "linear", 47 | "range": "height", "zero": false, "nice": true, 48 | "domain": {"data": "cars", "field": "Cylinders"} 49 | }, 50 | { 51 | "name": "Displacement", "type": "linear", 52 | "range": "height", "zero": false, "nice": true, 53 | "domain": {"data": "cars", "field": "Displacement"} 54 | }, 55 | { 56 | "name": "Weight_in_lbs", "type": "linear", 57 | "range": "height", "zero": false, "nice": true, 58 | "domain": {"data": "cars", "field": "Weight_in_lbs"} 59 | }, 60 | { 61 | "name": "Horsepower", "type": "linear", 62 | "range": "height", "zero": false, "nice": true, 63 | "domain": {"data": "cars", "field": "Horsepower"} 64 | }, 65 | { 66 | "name": "Acceleration", "type": "linear", 67 | "range": "height", "zero": false, "nice": true, 68 | "domain": {"data": "cars", "field": "Acceleration"} 69 | }, 70 | { 71 | "name": "Miles_per_Gallon", "type": "linear", 72 | "range": "height", "zero": false, "nice": true, 73 | "domain": {"data": "cars", "field": "Miles_per_Gallon"} 74 | }, 75 | { 76 | "name": "Year", "type": "linear", 77 | "range": "height", "zero": false, "nice": true, 78 | "domain": {"data": "cars", "field": "Year"} 79 | } 80 | ], 81 | 82 | "axes": [ 83 | { 84 | "orient": "left", "zindex": 1, 85 | "scale": "Cylinders", "title": "Cylinders", 86 | "offset": {"scale": "ord", "value": "Cylinders", "mult": -1} 87 | }, 88 | { 89 | "orient": "left", "zindex": 1, 90 | "scale": "Displacement", "title": "Displacement", 91 | "offset": {"scale": "ord", "value": "Displacement", "mult": -1} 92 | }, 93 | { 94 | "orient": "left", "zindex": 1, 95 | "scale": "Weight_in_lbs", "title": "Weight_in_lbs", 96 | "offset": {"scale": "ord", "value": "Weight_in_lbs", "mult": -1} 97 | }, 98 | { 99 | "orient": "left", "zindex": 1, 100 | "scale": "Horsepower", "title": "Horsepower", 101 | "offset": {"scale": "ord", "value": "Horsepower", "mult": -1} 102 | }, 103 | { 104 | "orient": "left", "zindex": 1, 105 | "scale": "Acceleration", "title": "Acceleration", 106 | "offset": {"scale": "ord", "value": "Acceleration", "mult": -1} 107 | }, 108 | { 109 | "orient": "left", "zindex": 1, 110 | "scale": "Miles_per_Gallon", "title": "Miles_per_Gallon", 111 | "offset": {"scale": "ord", "value": "Miles_per_Gallon", "mult": -1} 112 | }, 113 | { 114 | "orient": "left", "zindex": 1, 115 | "scale": "Year", "title": "Year", "format": "d", 116 | "offset": {"scale": "ord", "value": "Year", "mult": -1} 117 | } 118 | ], 119 | 120 | "marks": [ 121 | { 122 | "type": "group", 123 | "from": {"data": "cars"}, 124 | "marks": [ 125 | { 126 | "type": "line", 127 | "from": {"data": "fields"}, 128 | "encode": { 129 | "enter": { 130 | "x": {"scale": "ord", "field": "data"}, 131 | "y": { 132 | "scale": {"datum": "data"}, 133 | "field": {"parent": {"datum": "data"}} 134 | }, 135 | "stroke": {"value": "steelblue"}, 136 | "strokeWidth": {"value": 1.01}, 137 | "strokeOpacity": {"value": 0.3} 138 | } 139 | } 140 | } 141 | ] 142 | } 143 | ] 144 | } -------------------------------------------------------------------------------- /test/spec/shift-select.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 600, 4 | "height": 300, 5 | "padding": 10, 6 | 7 | "signals": [ 8 | { 9 | "name": "shift", 10 | "value": false, 11 | "on": [ 12 | { 13 | "events": {"marktype": "rect", "type": "click"}, 14 | "update": "event.shiftKey", 15 | "force": true 16 | } 17 | ] 18 | }, 19 | { 20 | "name": "clicked", 21 | "value": null, 22 | "on": [ 23 | { 24 | "events": {"marktype": "rect", "type": "click"}, 25 | "update": "datum", 26 | "force": true 27 | } 28 | ] 29 | } 30 | ], 31 | 32 | "data": [ 33 | { 34 | "name": "values", 35 | "values": [ 36 | {"x": 0, "y": 28}, 37 | {"x": 1, "y": 43}, 38 | {"x": 2, "y": 99}, 39 | {"x": 3, "y": 56}, 40 | {"x": 4, "y": 38}, 41 | {"x": 5, "y": 83}, 42 | {"x": 6, "y": 69}, 43 | {"x": 7, "y": 24} 44 | ] 45 | }, 46 | { 47 | "name": "selected", 48 | "on": [ 49 | {"trigger": "!shift", "remove": true}, 50 | {"trigger": "!shift && clicked", "insert": "clicked"}, 51 | {"trigger": "shift && clicked", "toggle": "clicked"} 52 | ] 53 | } 54 | ], 55 | 56 | "scales": [ 57 | { 58 | "name": "xscale", 59 | "type": "band", 60 | "range": "width", 61 | "round": true, 62 | "domain": {"data": "values", "field": "x"} 63 | }, 64 | { 65 | "name": "yscale", 66 | "type": "linear", 67 | "range": "height", 68 | "round": true, 69 | "domain": {"data": "values", "field": "y"}, 70 | "zero": true, 71 | "nice": true 72 | } 73 | ], 74 | 75 | "axes": [ 76 | { 77 | "scale": "yscale", 78 | "orient": "left", 79 | "tickCount": 5, 80 | "zindex": 1 81 | }, 82 | { 83 | "scale": "xscale", 84 | "orient": "bottom", 85 | "zindex": 1 86 | } 87 | ], 88 | 89 | "marks": [ 90 | { 91 | "type": "rect", 92 | "from": {"data": "values"}, 93 | "encode": { 94 | "enter": { 95 | "x": {"scale": "xscale", "field": "x"}, 96 | "width": {"scale": "xscale", "band": 1}, 97 | "y": {"scale": "yscale", "field": "y"}, 98 | "y2": {"scale": "yscale", "value": 0} 99 | }, 100 | "update": { 101 | "fill": [ 102 | {"test": "indata('selected', '_id', datum._id)", "value": "steelblue"}, 103 | {"value": "#ccc"} 104 | ] 105 | } 106 | } 107 | } 108 | ] 109 | } -------------------------------------------------------------------------------- /test/spec/stacked-area.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 500, 4 | "height": 200, 5 | "padding": 5, 6 | 7 | "data": [ 8 | { 9 | "name": "table", 10 | "values": [ 11 | {"x": 0, "y": 28, "c":0}, {"x": 0, "y": 55, "c":1}, 12 | {"x": 1, "y": 43, "c":0}, {"x": 1, "y": 91, "c":1}, 13 | {"x": 2, "y": 81, "c":0}, {"x": 2, "y": 53, "c":1}, 14 | {"x": 3, "y": 19, "c":0}, {"x": 3, "y": 87, "c":1}, 15 | {"x": 4, "y": 52, "c":0}, {"x": 4, "y": 48, "c":1}, 16 | {"x": 5, "y": 24, "c":0}, {"x": 5, "y": 49, "c":1}, 17 | {"x": 6, "y": 87, "c":0}, {"x": 6, "y": 66, "c":1}, 18 | {"x": 7, "y": 17, "c":0}, {"x": 7, "y": 27, "c":1}, 19 | {"x": 8, "y": 68, "c":0}, {"x": 8, "y": 16, "c":1}, 20 | {"x": 9, "y": 49, "c":0}, {"x": 9, "y": 15, "c":1} 21 | ], 22 | "transform": [ 23 | { 24 | "type": "stack", 25 | "groupby": ["x"], 26 | "sort": {"field": "c"}, 27 | "field": "y" 28 | } 29 | ] 30 | }, 31 | { 32 | "name": "stats", 33 | "source": "table", 34 | "transform": [ 35 | { 36 | "type": "aggregate", 37 | "groupby": ["x"], "fields": ["y"], "ops": ["sum"] 38 | } 39 | ] 40 | } 41 | ], 42 | 43 | "scales": [ 44 | { 45 | "name": "x", 46 | "type": "point", 47 | "range": "width", 48 | "domain": {"data": "table", "field": "x"} 49 | }, 50 | { 51 | "name": "y", 52 | "type": "linear", 53 | "range": "height", 54 | "nice": true, "zero": true, 55 | "domain": {"data": "stats", "field": "sum_y"} 56 | }, 57 | { 58 | "name": "color", 59 | "type": "ordinal", 60 | "scheme": "category10", 61 | "domain": {"data": "table", "field": "c"} 62 | } 63 | ], 64 | 65 | "axes": [ 66 | {"orient": "bottom", "scale": "x", "zindex": 1}, 67 | {"orient": "left", "scale": "y", "zindex": 1} 68 | ], 69 | 70 | "marks": [ 71 | { 72 | "type": "group", 73 | "from": { 74 | "facet": { 75 | "name": "series", 76 | "data": "table", 77 | "groupby": "c" 78 | } 79 | }, 80 | "marks": [ 81 | { 82 | "type": "area", 83 | "from": {"data": "series"}, 84 | "encode": { 85 | "enter": { 86 | "interpolate": {"value": "monotone"}, 87 | "x": {"scale": "x", "field": "x"}, 88 | "y": {"scale": "y", "field": "y0"}, 89 | "y2": {"scale": "y", "field": "y1"}, 90 | "fill": {"scale": "color", "field": "c"} 91 | }, 92 | "update": { 93 | "fillOpacity": {"value": 1} 94 | }, 95 | "hover": { 96 | "fillOpacity": {"value": 0.5} 97 | } 98 | } 99 | } 100 | ] 101 | } 102 | ] 103 | } -------------------------------------------------------------------------------- /test/spec/stacked-bar.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 500, 4 | "height": 200, 5 | "padding": 5, 6 | 7 | "data": [ 8 | { 9 | "name": "table", 10 | "values": [ 11 | {"x": 0, "y": 28, "c":0}, {"x": 0, "y": 55, "c":1}, 12 | {"x": 1, "y": 43, "c":0}, {"x": 1, "y": 91, "c":1}, 13 | {"x": 2, "y": 81, "c":0}, {"x": 2, "y": 53, "c":1}, 14 | {"x": 3, "y": 19, "c":0}, {"x": 3, "y": 87, "c":1}, 15 | {"x": 4, "y": 52, "c":0}, {"x": 4, "y": 48, "c":1}, 16 | {"x": 5, "y": 24, "c":0}, {"x": 5, "y": 49, "c":1}, 17 | {"x": 6, "y": 87, "c":0}, {"x": 6, "y": 66, "c":1}, 18 | {"x": 7, "y": 17, "c":0}, {"x": 7, "y": 27, "c":1}, 19 | {"x": 8, "y": 68, "c":0}, {"x": 8, "y": 16, "c":1}, 20 | {"x": 9, "y": 49, "c":0}, {"x": 9, "y": 15, "c":1} 21 | ], 22 | "transform": [ 23 | { 24 | "type": "stack", 25 | "groupby": ["x"], 26 | "sort": {"field": "c"}, 27 | "field": "y" 28 | } 29 | ] 30 | }, 31 | { 32 | "name": "stats", 33 | "source": "table", 34 | "transform": [ 35 | { 36 | "type": "aggregate", 37 | "groupby": ["x"], "fields": ["y"], "ops": ["sum"] 38 | } 39 | ] 40 | } 41 | ], 42 | 43 | "scales": [ 44 | { 45 | "name": "x", 46 | "type": "band", 47 | "range": "width", 48 | "domain": {"data": "table", "field": "x"} 49 | }, 50 | { 51 | "name": "y", 52 | "type": "linear", 53 | "range": "height", 54 | "nice": true, "zero": true, 55 | "domain": {"data": "stats", "field": "sum_y"} 56 | }, 57 | { 58 | "name": "color", 59 | "type": "ordinal", 60 | "scheme": "category10", 61 | "domain": {"data": "table", "field": "c"} 62 | } 63 | ], 64 | 65 | "axes": [ 66 | {"orient": "bottom", "scale": "x", "zindex": 1}, 67 | {"orient": "left", "scale": "y", "zindex": 1} 68 | ], 69 | 70 | "marks": [ 71 | { 72 | "type": "rect", 73 | "from": {"data": "table"}, 74 | "encode": { 75 | "enter": { 76 | "x": {"scale": "x", "field": "x"}, 77 | "width": {"scale": "x", "band": 1, "offset": -1}, 78 | "y": {"scale": "y", "field": "y0"}, 79 | "y2": {"scale": "y", "field": "y1"}, 80 | "fill": {"scale": "color", "field": "c"} 81 | }, 82 | "update": { 83 | "fillOpacity": {"value": 1} 84 | }, 85 | "hover": { 86 | "fillOpacity": {"value": 0.5} 87 | } 88 | } 89 | } 90 | ] 91 | } -------------------------------------------------------------------------------- /test/spec/tree-radial.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 810, 4 | "height": 810, 5 | "padding": 20, 6 | 7 | "signals": [ 8 | { 9 | "name": "labels", "value": true, 10 | "bind": {"type": "checkbox"} 11 | }, 12 | { 13 | "name": "radius", "value": 330, 14 | "bind": {"type": "range", "min": 20, "max": 600} 15 | }, 16 | { 17 | "name": "angle", "value": 360, 18 | "bind": {"type": "range", "min": 0, "max": 360, "step": 1} 19 | }, 20 | { 21 | "name": "layout", "value": "tidy", 22 | "bind": {"type": "radio", "options": ["tidy", "cluster"]} 23 | }, 24 | { 25 | "name": "links", "value": "line", 26 | "bind": { 27 | "type": "radio", 28 | "options": ["line", "curve", "diagonal", "orthogonal"] 29 | } 30 | }, 31 | { "name": "originX", "update": "width / 2" }, 32 | { "name": "originY", "update": "height / 2" } 33 | ], 34 | 35 | "data": [ 36 | { 37 | "name": "tree", 38 | "url": "data/flare.json", 39 | "transform": [ 40 | { 41 | "type": "stratify", 42 | "key": "id", 43 | "parentKey": "parent" 44 | }, 45 | { 46 | "type": "tree", 47 | "method": {"signal": "layout"}, 48 | "size": [{"signal": "angle"}, {"signal": "radius"}], 49 | "as": ["degrees", "radius", "depth", "children"] 50 | }, 51 | { 52 | "type": "formula", 53 | "expr": "PI * (datum.degrees / 180 - 0.5)", 54 | "as": "angle" 55 | } 56 | ] 57 | }, 58 | { 59 | "name": "links", 60 | "source": "tree", 61 | "transform": [ 62 | { "type": "treelinks" }, 63 | { 64 | "type": "linkpath", 65 | "shape": {"signal": "links"}, "orient": "radial", 66 | "sourceX": "source.angle", "sourceY": "source.radius", 67 | "targetX": "target.angle", "targetY": "target.radius" 68 | } 69 | ] 70 | } 71 | ], 72 | 73 | "scales": [ 74 | { 75 | "name": "color", 76 | "type": "sequential", "scheme": "magma", 77 | "domain": {"data": "tree", "field": "depth"}, 78 | "zero": true 79 | } 80 | ], 81 | 82 | "marks": [ 83 | { 84 | "type": "path", 85 | "from": {"data": "links"}, 86 | "encode": { 87 | "update": { 88 | "x": {"signal": "originX"}, 89 | "y": {"signal": "originY"}, 90 | "path": {"field": "path"}, 91 | "stroke": {"value": "#ccc"} 92 | } 93 | } 94 | }, 95 | { 96 | "type": "symbol", 97 | "from": {"data": "tree"}, 98 | "encode": { 99 | "update": { 100 | "x": {"signal": "originX + datum.radius * cos(datum.angle)"}, 101 | "y": {"signal": "originY + datum.radius * sin(datum.angle)"}, 102 | "size": {"value": 100}, 103 | "stroke": {"value": "#fff"}, 104 | "fill": {"scale": "color", "field": "depth"} 105 | } 106 | } 107 | }, 108 | { 109 | "type": "text", 110 | "from": {"data": "tree"}, 111 | "encode": { 112 | "update": { 113 | "x": {"signal": "originX + datum.radius * cos(datum.angle)"}, 114 | "y": {"signal": "originY + datum.radius * sin(datum.angle)"}, 115 | "dx": {"signal": "(datum.degrees >= 180 ? -1 : 1) * 6"}, 116 | "text": {"field": "name"}, 117 | "fontSize": {"value": 9}, 118 | "angle": {"signal": "datum.degrees >= 180 ? datum.degrees - 270 : datum.degrees - 90"}, 119 | "align": {"signal": "datum.degrees >= 180 ? 'right' : 'left'"}, 120 | "baseline": {"value": "middle"}, 121 | "opacity": {"signal": "labels ? 1 : 0"} 122 | } 123 | } 124 | } 125 | ] 126 | } -------------------------------------------------------------------------------- /test/spec/treemap.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 960, 4 | "height": 500, 5 | "padding": 2.5, 6 | "autosize": "none", 7 | 8 | "data": [ 9 | { 10 | "name": "tree", 11 | "url": "data/flare.json", 12 | "transform": [ 13 | { 14 | "type": "stratify", 15 | "key": "id", 16 | "parentKey": "parent" 17 | }, 18 | { 19 | "type": "treemap", 20 | "field": "size", 21 | "sort": {"field": "value"}, 22 | "round": true, 23 | "size": [{"signal": "width"}, {"signal": "height"}] 24 | } 25 | ] 26 | }, 27 | { 28 | "name": "nodes", 29 | "source": "tree", 30 | "transform": [{ "type": "filter", "expr": "datum.children" }] 31 | }, 32 | { 33 | "name": "leaves", 34 | "source": "tree", 35 | "transform": [{ "type": "filter", "expr": "!datum.children" }] 36 | } 37 | ], 38 | 39 | "scales": [ 40 | { 41 | "name": "color", 42 | "type": "ordinal", 43 | "range": [ 44 | "#3182bd", "#6baed6", "#9ecae1", "#c6dbef", "#e6550d", 45 | "#fd8d3c", "#fdae6b", "#fdd0a2", "#31a354", "#74c476", 46 | "#a1d99b", "#c7e9c0", "#756bb1", "#9e9ac8", "#bcbddc", 47 | "#dadaeb", "#636363", "#969696", "#bdbdbd", "#d9d9d9" 48 | ] 49 | }, 50 | { 51 | "name": "size", 52 | "type": "ordinal", 53 | "domain": [0, 1, 2, 3], 54 | "range": [256, 28, 20, 14] 55 | }, 56 | { 57 | "name": "opacity", 58 | "type": "ordinal", 59 | "domain": [0, 1, 2, 3], 60 | "range": [0.15, 0.5, 0.8, 1.0] 61 | } 62 | ], 63 | 64 | "marks": [ 65 | { 66 | "type": "rect", 67 | "from": {"data": "nodes"}, 68 | "interactive": false, 69 | "encode": { 70 | "enter": { 71 | "x": {"field": "x0"}, 72 | "y": {"field": "y0"}, 73 | "x2": {"field": "x1"}, 74 | "y2": {"field": "y1"}, 75 | "fill": {"scale": "color", "field": "name"} 76 | } 77 | } 78 | }, 79 | { 80 | "type": "rect", 81 | "from": {"data": "leaves"}, 82 | "encode": { 83 | "enter": { 84 | "x": {"field": "x0"}, 85 | "y": {"field": "y0"}, 86 | "x2": {"field": "x1"}, 87 | "y2": {"field": "y1"}, 88 | "stroke": {"value": "#fff"} 89 | }, 90 | "update": { 91 | "fill": {"value": "transparent"} 92 | }, 93 | "hover": { 94 | "fill": {"value": "red"} 95 | } 96 | } 97 | }, 98 | { 99 | "type": "text", 100 | "from": {"data": "nodes"}, 101 | "interactive": false, 102 | "encode": { 103 | "enter": { 104 | "x": {"signal": "0.5 * (datum.x0 + datum.x1)"}, 105 | "y": {"signal": "0.5 * (datum.y0 + datum.y1)"}, 106 | "font": {"value": "Helvetica Neue"}, 107 | "align": {"value": "center"}, 108 | "baseline": {"value": "middle"}, 109 | "fill": {"value": "#000"}, 110 | "text": {"field": "name"}, 111 | "fontSize": {"scale": "size", "field": "depth"}, 112 | "fillOpacity": {"scale": "opacity", "field": "depth"} 113 | } 114 | } 115 | } 116 | ] 117 | } 118 | -------------------------------------------------------------------------------- /web/data/7zip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uwdata/vega/ff38e3673818072b31411e6c0f6c050bf2d3e741/web/data/7zip.png -------------------------------------------------------------------------------- /web/data/driving.json: -------------------------------------------------------------------------------- 1 | [ 2 | {"side": "left", "year": 1956, "miles": 3675, "gas": 2.38}, 3 | {"side": "right", "year": 1957, "miles": 3706, "gas": 2.40}, 4 | {"side": "bottom", "year": 1958, "miles": 3766, "gas": 2.26}, 5 | {"side": "top", "year": 1959, "miles": 3905, "gas": 2.31}, 6 | {"side": "right", "year": 1960, "miles": 3935, "gas": 2.27}, 7 | {"side": "bottom", "year": 1961, "miles": 3977, "gas": 2.25}, 8 | {"side": "right", "year": 1962, "miles": 4085, "gas": 2.22}, 9 | {"side": "bottom", "year": 1963, "miles": 4218, "gas": 2.12}, 10 | {"side": "bottom", "year": 1964, "miles": 4369, "gas": 2.11}, 11 | {"side": "bottom", "year": 1965, "miles": 4538, "gas": 2.14}, 12 | {"side": "top", "year": 1966, "miles": 4676, "gas": 2.14}, 13 | {"side": "bottom", "year": 1967, "miles": 4827, "gas": 2.14}, 14 | {"side": "right", "year": 1968, "miles": 5038, "gas": 2.13}, 15 | {"side": "right", "year": 1969, "miles": 5207, "gas": 2.07}, 16 | {"side": "right", "year": 1970, "miles": 5376, "gas": 2.01}, 17 | {"side": "bottom", "year": 1971, "miles": 5617, "gas": 1.93}, 18 | {"side": "bottom", "year": 1972, "miles": 5973, "gas": 1.87}, 19 | {"side": "right", "year": 1973, "miles": 6154, "gas": 1.90}, 20 | {"side": "left", "year": 1974, "miles": 5943, "gas": 2.34}, 21 | {"side": "bottom", "year": 1975, "miles": 6111, "gas": 2.31}, 22 | {"side": "bottom", "year": 1976, "miles": 6389, "gas": 2.32}, 23 | {"side": "top", "year": 1977, "miles": 6630, "gas": 2.36}, 24 | {"side": "bottom", "year": 1978, "miles": 6883, "gas": 2.23}, 25 | {"side": "left", "year": 1979, "miles": 6744, "gas": 2.68}, 26 | {"side": "left", "year": 1980, "miles": 6672, "gas": 3.30}, 27 | {"side": "right", "year": 1981, "miles": 6732, "gas": 3.30}, 28 | {"side": "right", "year": 1982, "miles": 6835, "gas": 2.92}, 29 | {"side": "right", "year": 1983, "miles": 6943, "gas": 2.66}, 30 | {"side": "right", "year": 1984, "miles": 7130, "gas": 2.48}, 31 | {"side": "right", "year": 1985, "miles": 7323, "gas": 2.36}, 32 | {"side": "left", "year": 1986, "miles": 7558, "gas": 1.76}, 33 | {"side": "top", "year": 1987, "miles": 7770, "gas": 1.76}, 34 | {"side": "bottom", "year": 1988, "miles": 8089, "gas": 1.68}, 35 | {"side": "left", "year": 1989, "miles": 8397, "gas": 1.75}, 36 | {"side": "top", "year": 1990, "miles": 8529, "gas": 1.88}, 37 | {"side": "right", "year": 1991, "miles": 8535, "gas": 1.78}, 38 | {"side": "right", "year": 1992, "miles": 8662, "gas": 1.69}, 39 | {"side": "left", "year": 1993, "miles": 8855, "gas": 1.60}, 40 | {"side": "bottom", "year": 1994, "miles": 8909, "gas": 1.59}, 41 | {"side": "bottom", "year": 1995, "miles": 9150, "gas": 1.60}, 42 | {"side": "top", "year": 1996, "miles": 9192, "gas": 1.67}, 43 | {"side": "right", "year": 1997, "miles": 9416, "gas": 1.65}, 44 | {"side": "bottom", "year": 1998, "miles": 9590, "gas": 1.39}, 45 | {"side": "right", "year": 1999, "miles": 9687, "gas": 1.50}, 46 | {"side": "top", "year": 2000, "miles": 9717, "gas": 1.89}, 47 | {"side": "left", "year": 2001, "miles": 9699, "gas": 1.77}, 48 | {"side": "bottom", "year": 2002, "miles": 9814, "gas": 1.64}, 49 | {"side": "right", "year": 2003, "miles": 9868, "gas": 1.86}, 50 | {"side": "left", "year": 2004, "miles": 9994, "gas": 2.14}, 51 | {"side": "left", "year": 2005, "miles": 10067, "gas": 2.53}, 52 | {"side": "right", "year": 2006, "miles": 10037, "gas": 2.79}, 53 | {"side": "right", "year": 2007, "miles": 10025, "gas": 2.95}, 54 | {"side": "left", "year": 2008, "miles": 9880, "gas": 3.31}, 55 | {"side": "bottom", "year": 2009, "miles": 9657, "gas": 2.38}, 56 | {"side": "left", "year": 2010, "miles": 9596, "gas": 2.61} 57 | ] -------------------------------------------------------------------------------- /web/data/ffox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uwdata/vega/ff38e3673818072b31411e6c0f6c050bf2d3e741/web/data/ffox.png -------------------------------------------------------------------------------- /web/data/gimp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uwdata/vega/ff38e3673818072b31411e6c0f6c050bf2d3e741/web/data/gimp.png -------------------------------------------------------------------------------- /web/data/monarchs.json: -------------------------------------------------------------------------------- 1 | [ 2 | {"name":"Elizabeth","start":1565,"end":1603,"index":0}, 3 | {"name":"James I","start":1603,"end":1625,"index":1}, 4 | {"name":"Charles I","start":1625,"end":1649,"index":2}, 5 | {"name":"Cromwell","start":1649,"end":1660,"commonwealth":true,"index":3}, 6 | {"name":"Charles II","start":1660,"end":1685,"index":4}, 7 | {"name":"James II","start":1685,"end":1689,"index":5}, 8 | {"name":"W&M","start":1689,"end":1702,"index":6}, 9 | {"name":"Anne","start":1702,"end":1714,"index":7}, 10 | {"name":"George I","start":1714,"end":1727,"index":8}, 11 | {"name":"George II","start":1727,"end":1760,"index":9}, 12 | {"name":"George III","start":1760,"end":1820,"index":10}, 13 | {"name":"George IV","start":1820,"end":1820,"index":11} 14 | ] -------------------------------------------------------------------------------- /web/data/sp500.csv: -------------------------------------------------------------------------------- 1 | date,price 2 | Jan 1 2000,1394.46 3 | Feb 1 2000,1366.42 4 | Mar 1 2000,1498.58 5 | Apr 1 2000,1452.43 6 | May 1 2000,1420.6 7 | Jun 1 2000,1454.6 8 | Jul 1 2000,1430.83 9 | Aug 1 2000,1517.68 10 | Sep 1 2000,1436.51 11 | Oct 1 2000,1429.4 12 | Nov 1 2000,1314.95 13 | Dec 1 2000,1320.28 14 | Jan 1 2001,1366.01 15 | Feb 1 2001,1239.94 16 | Mar 1 2001,1160.33 17 | Apr 1 2001,1249.46 18 | May 1 2001,1255.82 19 | Jun 1 2001,1224.38 20 | Jul 1 2001,1211.23 21 | Aug 1 2001,1133.58 22 | Sep 1 2001,1040.94 23 | Oct 1 2001,1059.78 24 | Nov 1 2001,1139.45 25 | Dec 1 2001,1148.08 26 | Jan 1 2002,1130.2 27 | Feb 1 2002,1106.73 28 | Mar 1 2002,1147.39 29 | Apr 1 2002,1076.92 30 | May 1 2002,1067.14 31 | Jun 1 2002,989.82 32 | Jul 1 2002,911.62 33 | Aug 1 2002,916.07 34 | Sep 1 2002,815.28 35 | Oct 1 2002,885.76 36 | Nov 1 2002,936.31 37 | Dec 1 2002,879.82 38 | Jan 1 2003,855.7 39 | Feb 1 2003,841.15 40 | Mar 1 2003,848.18 41 | Apr 1 2003,916.92 42 | May 1 2003,963.59 43 | Jun 1 2003,974.5 44 | Jul 1 2003,990.31 45 | Aug 1 2003,1008.01 46 | Sep 1 2003,995.97 47 | Oct 1 2003,1050.71 48 | Nov 1 2003,1058.2 49 | Dec 1 2003,1111.92 50 | Jan 1 2004,1131.13 51 | Feb 1 2004,1144.94 52 | Mar 1 2004,1126.21 53 | Apr 1 2004,1107.3 54 | May 1 2004,1120.68 55 | Jun 1 2004,1140.84 56 | Jul 1 2004,1101.72 57 | Aug 1 2004,1104.24 58 | Sep 1 2004,1114.58 59 | Oct 1 2004,1130.2 60 | Nov 1 2004,1173.82 61 | Dec 1 2004,1211.92 62 | Jan 1 2005,1181.27 63 | Feb 1 2005,1203.6 64 | Mar 1 2005,1180.59 65 | Apr 1 2005,1156.85 66 | May 1 2005,1191.5 67 | Jun 1 2005,1191.33 68 | Jul 1 2005,1234.18 69 | Aug 1 2005,1220.33 70 | Sep 1 2005,1228.81 71 | Oct 1 2005,1207.01 72 | Nov 1 2005,1249.48 73 | Dec 1 2005,1248.29 74 | Jan 1 2006,1280.08 75 | Feb 1 2006,1280.66 76 | Mar 1 2006,1294.87 77 | Apr 1 2006,1310.61 78 | May 1 2006,1270.09 79 | Jun 1 2006,1270.2 80 | Jul 1 2006,1276.66 81 | Aug 1 2006,1303.82 82 | Sep 1 2006,1335.85 83 | Oct 1 2006,1377.94 84 | Nov 1 2006,1400.63 85 | Dec 1 2006,1418.3 86 | Jan 1 2007,1438.24 87 | Feb 1 2007,1406.82 88 | Mar 1 2007,1420.86 89 | Apr 1 2007,1482.37 90 | May 1 2007,1530.62 91 | Jun 1 2007,1503.35 92 | Jul 1 2007,1455.27 93 | Aug 1 2007,1473.99 94 | Sep 1 2007,1526.75 95 | Oct 1 2007,1549.38 96 | Nov 1 2007,1481.14 97 | Dec 1 2007,1468.36 98 | Jan 1 2008,1378.55 99 | Feb 1 2008,1330.63 100 | Mar 1 2008,1322.7 101 | Apr 1 2008,1385.59 102 | May 1 2008,1400.38 103 | Jun 1 2008,1280 104 | Jul 1 2008,1267.38 105 | Aug 1 2008,1282.83 106 | Sep 1 2008,1166.36 107 | Oct 1 2008,968.75 108 | Nov 1 2008,896.24 109 | Dec 1 2008,903.25 110 | Jan 1 2009,825.88 111 | Feb 1 2009,735.09 112 | Mar 1 2009,797.87 113 | Apr 1 2009,872.81 114 | May 1 2009,919.14 115 | Jun 1 2009,919.32 116 | Jul 1 2009,987.48 117 | Aug 1 2009,1020.62 118 | Sep 1 2009,1057.08 119 | Oct 1 2009,1036.19 120 | Nov 1 2009,1095.63 121 | Dec 1 2009,1115.1 122 | Jan 1 2010,1073.87 123 | Feb 1 2010,1104.49 124 | Mar 1 2010,1140.45 125 | -------------------------------------------------------------------------------- /web/data/weather.json: -------------------------------------------------------------------------------- 1 | [{"day":"M","record":{"high":62,"low":15},"normal":{"high":50,"low":38},"actual":{"high":48,"low":36},"id":0},{"day":"T","record":{"high":62,"low":23},"normal":{"high":50,"low":38},"actual":{"high":50,"low":40},"id":1},{"day":"W","record":{"high":61,"low":20},"normal":{"high":50,"low":38},"actual":{"high":55,"low":36},"id":2},{"day":"T","record":{"high":67,"low":21},"normal":{"high":50,"low":38},"actual":{"high":51,"low":33},"id":3},{"day":"F","record":{"high":61,"low":23},"normal":{"high":50,"low":38},"actual":{"high":50,"low":30},"id":4},{"day":"S","record":{"high":67,"low":20},"normal":{"high":50,"low":38},"forecast":{"high":{"high":53,"low":49},"low":{"high":40,"low":35}},"id":5},{"day":"S","record":{"high":63,"low":23},"normal":{"high":50,"low":39},"forecast":{"high":{"high":55,"low":49},"low":{"high":42,"low":37}},"id":6},{"day":"M","record":{"high":61,"low":26},"normal":{"high":51,"low":39},"forecast":{"high":{"high":53,"low":49},"low":{"high":43,"low":40}},"id":7},{"day":"T","record":{"high":61,"low":24},"normal":{"high":51,"low":39},"forecast":{"high":{"high":52,"low":46},"low":{"high":44,"low":40}},"id":8},{"day":"W","record":{"high":63,"low":20},"normal":{"high":51,"low":39},"forecast":{"high":{"high":53,"low":46},"low":{"high":43,"low":38}},"id":9}] -------------------------------------------------------------------------------- /web/data/wheat.json: -------------------------------------------------------------------------------- 1 | [ 2 | {"year":"1565","wheat":41,"wages":5}, 3 | {"year":"1570","wheat":45,"wages":5.05}, 4 | {"year":"1575","wheat":42,"wages":5.08}, 5 | {"year":"1580","wheat":49,"wages":5.12}, 6 | {"year":"1585","wheat":41.5,"wages":5.15}, 7 | {"year":"1590","wheat":47,"wages":5.25}, 8 | {"year":"1595","wheat":64,"wages":5.54}, 9 | {"year":"1600","wheat":27,"wages":5.61}, 10 | {"year":"1605","wheat":33,"wages":5.69}, 11 | {"year":"1610","wheat":32,"wages":5.78}, 12 | {"year":"1615","wheat":33,"wages":5.94}, 13 | {"year":"1620","wheat":35,"wages":6.01}, 14 | {"year":"1625","wheat":33,"wages":6.12}, 15 | {"year":"1630","wheat":45,"wages":6.22}, 16 | {"year":"1635","wheat":33,"wages":6.3}, 17 | {"year":"1640","wheat":39,"wages":6.37}, 18 | {"year":"1645","wheat":53,"wages":6.45}, 19 | {"year":"1650","wheat":42,"wages":6.5}, 20 | {"year":"1655","wheat":40.5,"wages":6.6}, 21 | {"year":"1660","wheat":46.5,"wages":6.75}, 22 | {"year":"1665","wheat":32,"wages":6.8}, 23 | {"year":"1670","wheat":37,"wages":6.9}, 24 | {"year":"1675","wheat":43,"wages":7}, 25 | {"year":"1680","wheat":35,"wages":7.3}, 26 | {"year":"1685","wheat":27,"wages":7.6}, 27 | {"year":"1690","wheat":40,"wages":8}, 28 | {"year":"1695","wheat":50,"wages":8.5}, 29 | {"year":"1700","wheat":30,"wages":9}, 30 | {"year":"1705","wheat":32,"wages":10}, 31 | {"year":"1710","wheat":44,"wages":11}, 32 | {"year":"1715","wheat":33,"wages":11.75}, 33 | {"year":"1720","wheat":29,"wages":12.5}, 34 | {"year":"1725","wheat":39,"wages":13}, 35 | {"year":"1730","wheat":26,"wages":13.3}, 36 | {"year":"1735","wheat":32,"wages":13.6}, 37 | {"year":"1740","wheat":27,"wages":14}, 38 | {"year":"1745","wheat":27.5,"wages":14.5}, 39 | {"year":"1750","wheat":31,"wages":15}, 40 | {"year":"1755","wheat":35.5,"wages":15.7}, 41 | {"year":"1760","wheat":31,"wages":16.5}, 42 | {"year":"1765","wheat":43,"wages":17.6}, 43 | {"year":"1770","wheat":47,"wages":18.5}, 44 | {"year":"1775","wheat":44,"wages":19.5}, 45 | {"year":"1780","wheat":46,"wages":21}, 46 | {"year":"1785","wheat":42,"wages":23}, 47 | {"year":"1790","wheat":47.5,"wages":25.5}, 48 | {"year":"1795","wheat":76,"wages":27.5}, 49 | {"year":"1800","wheat":79,"wages":28.5}, 50 | {"year":"1805","wheat":81,"wages":29.5}, 51 | {"year":"1810","wheat":99,"wages":30}, 52 | {"year":"1815","wheat":78}, 53 | {"year":"1820","wheat":54} 54 | ] -------------------------------------------------------------------------------- /web/group.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Vega Group Test 5 | 6 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 149 | 150 | 151 | -------------------------------------------------------------------------------- /web/image-output.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Vega Image Output Test 5 | 6 | 11 | 12 | 13 |
14 | 15 | 16 | 73 | 74 | -------------------------------------------------------------------------------- /web/prefacet.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Vega PreFacet Test 5 | 6 | 10 | 11 | 12 |
13 | 118 | 119 | 120 | -------------------------------------------------------------------------------- /web/spec.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Vega Spec Test 5 | 6 | 24 | 25 | 26 | 37 |
38 | 107 | 108 | 109 | -------------------------------------------------------------------------------- /web/spec/arc.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 400, 4 | "height": 400, 5 | 6 | "data": [ 7 | { 8 | "name": "table", 9 | "values": [12, 23, 47, 6, 52, 19], 10 | "transform": [{"type": "pie", "field": "data"}] 11 | } 12 | ], 13 | 14 | "scales": [ 15 | { 16 | "name": "r", 17 | "type": "sqrt", 18 | "domain": {"data": "table", "field": "data"}, 19 | "zero": true, 20 | "range": [20, 100] 21 | } 22 | ], 23 | 24 | "marks": [ 25 | { 26 | "type": "arc", 27 | "from": {"data": "table"}, 28 | "encode": { 29 | "enter": { 30 | "x": {"field": {"group": "width"}, "mult": 0.5}, 31 | "y": {"field": {"group": "height"}, "mult": 0.5}, 32 | "startAngle": {"field": "startAngle"}, 33 | "endAngle": {"field": "endAngle"}, 34 | "innerRadius": {"value": 20}, 35 | "outerRadius": {"scale": "r", "field": "data"}, 36 | "stroke": {"value": "#fff"} 37 | }, 38 | "update": { 39 | "fill": {"value": "#ccc"} 40 | }, 41 | "hover": { 42 | "fill": {"value": "pink"} 43 | } 44 | } 45 | }, 46 | 47 | { 48 | "type": "text", 49 | "from": {"data": "table"}, 50 | "encode": { 51 | "enter": { 52 | "x": {"field": {"group": "width"}, "mult": 0.5}, 53 | "y": {"field": {"group": "height"}, "mult": 0.5}, 54 | "radius": {"scale": "r", "field": "data", "offset": 8}, 55 | "theta": {"signal": "(datum.startAngle + datum.endAngle)/2"}, 56 | "fill": {"value": "#000"}, 57 | "align": {"value": "center"}, 58 | "baseline": {"value": "middle"}, 59 | "text": {"field": "data"} 60 | } 61 | } 62 | } 63 | ] 64 | } -------------------------------------------------------------------------------- /web/spec/area.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 500, 4 | "height": 200, 5 | "padding": 5, 6 | 7 | "data": [ 8 | { 9 | "name": "table", 10 | "values": [ 11 | {"u": 1, "v": 28}, {"u": 2, "v": 55}, 12 | {"u": 3, "v": 43}, {"u": 4, "v": 91}, 13 | {"u": 5, "v": 81}, {"u": 6, "v": 53}, 14 | {"u": 7, "v": 19}, {"u": 8, "v": 87}, 15 | {"u": 9, "v": 52}, {"u": 10, "v": 48}, 16 | {"u": 11, "v": 24}, {"u": 12, "v": 49}, 17 | {"u": 13, "v": 87}, {"u": 14, "v": 66}, 18 | {"u": 15, "v": 17}, {"u": 16, "v": 27}, 19 | {"u": 17, "v": 68}, {"u": 18, "v": 16}, 20 | {"u": 19, "v": 49}, {"u": 20, "v": 15} 21 | ] 22 | } 23 | ], 24 | 25 | "scales": [ 26 | { 27 | "name": "xscale", 28 | "type": "linear", 29 | "range": "width", 30 | "zero": false, 31 | "domain": {"data": "table", "field": "u"} 32 | }, 33 | { 34 | "name": "yscale", 35 | "type": "linear", 36 | "range": "height", 37 | "nice": true, 38 | "zero": true, 39 | "domain": {"data": "table", "field": "v"} 40 | } 41 | ], 42 | 43 | "axes": [ 44 | {"orient": "bottom", "scale": "xscale", "tickCount": 20}, 45 | {"orient": "left", "scale": "yscale"} 46 | ], 47 | 48 | "marks": [ 49 | { 50 | "type": "area", 51 | "from": {"data": "table"}, 52 | "encode": { 53 | "enter": { 54 | "interpolate": {"value": "monotone"}, 55 | "x": {"scale": "xscale", "field": "u"}, 56 | "y": {"scale": "yscale", "field": "v"}, 57 | "y2": {"scale": "yscale", "value": 0}, 58 | "fill": {"value": "steelblue"} 59 | }, 60 | "update": { 61 | "fillOpacity": {"value": 1} 62 | }, 63 | "hover": { 64 | "fillOpacity": {"value": 0.5} 65 | } 66 | } 67 | } 68 | ] 69 | } -------------------------------------------------------------------------------- /web/spec/bar-hover-label.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 400, 4 | "height": 200, 5 | "padding": 5, 6 | 7 | "signals": [ 8 | { 9 | "name": "label", 10 | "value": {"x": 0, "y": 0}, 11 | "on": [ 12 | {"events": "rect:mouseover", "update": "datum"}, 13 | {"events": "rect:mouseout", "update": "{x:0, y:0}"} 14 | ] 15 | } 16 | ], 17 | 18 | "data": [ 19 | { 20 | "name": "table", 21 | "values": [ 22 | {"x": 1, "y": 28}, {"x": 2, "y": 55}, 23 | {"x": 3, "y": 43}, {"x": 4, "y": 91}, 24 | {"x": 5, "y": 81}, {"x": 6, "y": 53}, 25 | {"x": 7, "y": 19}, {"x": 8, "y": 87}, 26 | {"x": 9, "y": 52}, {"x": 10, "y": 48}, 27 | {"x": 11, "y": 24}, {"x": 12, "y": 49}, 28 | {"x": 13, "y": 87}, {"x": 14, "y": 66}, 29 | {"x": 15, "y": 17}, {"x": 16, "y": 27}, 30 | {"x": 17, "y": 68}, {"x": 18, "y": 16}, 31 | {"x": 19, "y": 49}, {"x": 20, "y": 15} 32 | ] 33 | } 34 | ], 35 | 36 | "scales": [ 37 | { 38 | "name": "xscale", 39 | "type": "band", 40 | "range": "width", 41 | "domain": {"data": "table", "field": "x"} 42 | }, 43 | { 44 | "name": "yscale", 45 | "type": "linear", 46 | "range": "height", 47 | "domain": {"data": "table", "field": "y"}, 48 | "nice": true 49 | } 50 | ], 51 | 52 | "axes": [ 53 | {"orient": "bottom", "scale": "xscale"}, 54 | {"orient": "left", "scale": "yscale"} 55 | ], 56 | 57 | "marks": [ 58 | { 59 | "type": "rect", 60 | "from": {"data": "table"}, 61 | "encode": { 62 | "enter": { 63 | "x": {"scale": "xscale", "field": "x", "offset":1}, 64 | "width": {"scale": "xscale", "band": 1, "offset":-1}, 65 | "y": {"scale": "yscale", "field": "y"}, 66 | "y2": {"scale": "yscale", "value": 0} 67 | }, 68 | "update": { 69 | "fill": [ 70 | {"test": "datum === label", "value": "red"}, 71 | {"value": "steelblue"} 72 | ] 73 | } 74 | } 75 | }, 76 | { 77 | "type": "text", 78 | "encode": { 79 | "enter": { 80 | "align": {"value": "center"}, 81 | "fill": {"value": "#333"} 82 | }, 83 | "update": { 84 | "x": {"scale": "xscale", "signal": "label.x", "band": 0.5}, 85 | "y": {"scale": "yscale", "signal": "label.y", "offset": -5}, 86 | "text": {"signal": "label.y"}, 87 | "fillOpacity": [ 88 | {"test": "!label._id", "value": 0}, 89 | {"value": 1} 90 | ] 91 | } 92 | } 93 | } 94 | ] 95 | } 96 | -------------------------------------------------------------------------------- /web/spec/bar.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 400, 4 | "height": 200, 5 | "padding": 5, 6 | 7 | "data": [ 8 | { 9 | "name": "table", 10 | "values": [ 11 | {"u": 1, "v": 28}, {"u": 2, "v": 55}, 12 | {"u": 3, "v": 43}, {"u": 4, "v": 91}, 13 | {"u": 5, "v": 81}, {"u": 6, "v": 53}, 14 | {"u": 7, "v": 19}, {"u": 8, "v": 87}, 15 | {"u": 9, "v": 52}, {"u": 10, "v": 48}, 16 | {"u": 11, "v": 24}, {"u": 12, "v": 49}, 17 | {"u": 13, "v": 87}, {"u": 14, "v": 66}, 18 | {"u": 15, "v": 17}, {"u": 16, "v": 27}, 19 | {"u": 17, "v": 68}, {"u": 18, "v": 16}, 20 | {"u": 19, "v": 49}, {"u": 20, "v": 15} 21 | ] 22 | } 23 | ], 24 | 25 | "scales": [ 26 | { 27 | "name": "xscale", 28 | "type": "band", 29 | "range": "width", 30 | "domain": {"data": "table", "field": "u"} 31 | }, 32 | { 33 | "name": "yscale", 34 | "type": "linear", 35 | "range": "height", 36 | "domain": {"data": "table", "field": "v"}, 37 | "zero": true, 38 | "nice": true 39 | } 40 | ], 41 | 42 | "axes": [ 43 | {"orient": "bottom", "scale": "xscale"}, 44 | {"orient": "left", "scale": "yscale"} 45 | ], 46 | 47 | "marks": [ 48 | { 49 | "type": "rect", 50 | "from": {"data": "table"}, 51 | "encode": { 52 | "enter": { 53 | "x": {"scale": "xscale", "field": "u", "offset": 1}, 54 | "width": {"scale": "xscale", "band": 1, "offset": -1}, 55 | "y": {"scale": "yscale", "field": "v"}, 56 | "y2": {"scale": "yscale", "value": 0} 57 | }, 58 | "update": { 59 | "fill": {"value": "steelblue"} 60 | }, 61 | "hover": { 62 | "fill": {"value": "red"} 63 | } 64 | } 65 | } 66 | ] 67 | } -------------------------------------------------------------------------------- /web/spec/barley.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 200, 4 | "padding": 5, 5 | 6 | "signals": [ 7 | {"name": "offset", "value": 15}, 8 | {"name": "cellHeight", "value": 100}, 9 | {"name": "height", "update": "6 * (offset + cellHeight)"} 10 | ], 11 | 12 | "data": [ 13 | { 14 | "name": "barley", 15 | "url": "data/barley.json" 16 | } 17 | ], 18 | 19 | "scales": [ 20 | { 21 | "name": "gscale", 22 | "type": "band", 23 | "range": [0, {"signal": "height"}], 24 | "round": true, 25 | "domain": { 26 | "data": "barley", 27 | "field": "site", 28 | "sort": { 29 | "field": "yield", 30 | "op": "median", 31 | "order": "descending" 32 | } 33 | } 34 | }, 35 | { 36 | "name": "xscale", 37 | "type": "linear", 38 | "nice": true, 39 | "range": "width", 40 | "round": true, 41 | "domain": {"data": "barley", "field": "yield"} 42 | }, 43 | { 44 | "name": "cscale", 45 | "type": "ordinal", 46 | "scheme": "category10", 47 | "domain": {"data": "barley", "field": "year"} 48 | } 49 | ], 50 | 51 | "axes": [ 52 | {"orient": "bottom", "scale": "xscale"} 53 | ], 54 | 55 | "legends": [ 56 | { 57 | "stroke": "cscale", 58 | "title": "Year", 59 | "padding": 4, 60 | "encode": { 61 | "symbols": { 62 | "enter": { 63 | "strokeWidth": {"value": 2}, 64 | "size": {"value": 50} 65 | } 66 | } 67 | } 68 | } 69 | ], 70 | 71 | "marks": [ 72 | { 73 | "name": "site", 74 | "type": "group", 75 | 76 | "from": { 77 | "facet": { 78 | "data": "barley", 79 | "name": "sites", 80 | "groupby": "site" 81 | } 82 | }, 83 | 84 | "encode": { 85 | "enter": { 86 | "y": {"scale": "gscale", "field": "site", "offset": {"signal": "offset"}}, 87 | "height": {"signal": "cellHeight"}, 88 | "width": {"signal": "width"}, 89 | "stroke": {"value": "#ccc"} 90 | } 91 | }, 92 | 93 | "scales": [ 94 | { 95 | "name": "yscale", 96 | "type": "point", 97 | "range": [0, {"signal": "cellHeight"}], 98 | "padding": 1, 99 | "round": true, 100 | "domain": { 101 | "data": "barley", 102 | "field": "variety", 103 | "sort": { 104 | "field": "yield", 105 | "op": "median", 106 | "order": "descending" 107 | } 108 | } 109 | } 110 | ], 111 | 112 | "axes": [ 113 | { 114 | "orient": "left", 115 | "scale": "yscale", 116 | "tickSize": 0, 117 | "domain": false, 118 | "grid": true, 119 | "encode": { 120 | "grid": { 121 | "enter": {"strokeDash": {"value": [3,3]}} 122 | } 123 | } 124 | }, 125 | { 126 | "orient": "right", 127 | "scale": "yscale", 128 | "tickSize": 0, 129 | "domain": false 130 | } 131 | ], 132 | 133 | "marks": [ 134 | { 135 | "type": "symbol", 136 | "from": {"data": "sites"}, 137 | "encode": { 138 | "enter": { 139 | "x": {"scale": "xscale", "field": "yield"}, 140 | "y": {"scale": "yscale", "field": "variety"}, 141 | "stroke": {"scale": "cscale", "field": "year"}, 142 | "strokeWidth": {"value": 2}, 143 | "size": {"value": 50} 144 | } 145 | } 146 | } 147 | ] 148 | }, 149 | 150 | { 151 | "type": "text", 152 | "from": {"data": "site"}, 153 | "encode": { 154 | "enter": { 155 | "x": {"field": "width", "mult": 0.5}, 156 | "y": {"field": "y"}, 157 | "fontSize": {"value": 11}, 158 | "fontWeight": {"value": "bold"}, 159 | "text": {"field": "datum.site"}, 160 | "align": {"value": "center"}, 161 | "baseline": {"value": "bottom"}, 162 | "fill": {"value": "#000"} 163 | } 164 | } 165 | } 166 | ] 167 | } -------------------------------------------------------------------------------- /web/spec/choropleth.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 960, 4 | "height": 500, 5 | "autosize": "none", 6 | 7 | "data": [ 8 | { 9 | "name": "unemp", 10 | "url": "data/unemployment.tsv", 11 | "format": {"type": "tsv", "parse": "auto"} 12 | }, 13 | { 14 | "name": "counties", 15 | "url": "data/us-10m.json", 16 | "format": {"type": "topojson", "feature": "counties"}, 17 | "transform": [ 18 | { "type": "lookup", "from": "unemp", "key": "id", "fields": ["id"], "as": ["unemp"] }, 19 | { "type": "filter", "expr": "datum.unemp != null" } 20 | ] 21 | } 22 | ], 23 | 24 | "projections": [ 25 | { 26 | "name": "projection", 27 | "type": "albersUsa" 28 | } 29 | ], 30 | 31 | "scales": [ 32 | { 33 | "name": "color", 34 | "type": "quantize", 35 | "domain": [0, 0.15], 36 | "range": ["#f7fbff", "#deebf7", "#c6dbef", "#9ecae1", "#6baed6", 37 | "#4292c6", "#2171b5", "#08519c", "#08306b"] 38 | } 39 | ], 40 | 41 | "marks": [ 42 | { 43 | "type": "shape", 44 | "from": {"data": "counties"}, 45 | "encode": { 46 | "update": { "fill": {"scale": "color", "field": "unemp.rate"} }, 47 | "hover": { "fill": {"value": "red"} } 48 | }, 49 | "transform": [ 50 | { "type": "geoshape", "projection": "projection" } 51 | ] 52 | } 53 | ] 54 | } -------------------------------------------------------------------------------- /web/spec/density.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 500, 4 | "height": 100, 5 | "padding": 5, 6 | 7 | "signals": [ 8 | { "name": "bandwidth", "value": 0, 9 | "bind": {"type": "range", "min": 0, "max": 0.1, "step": 0.001} }, 10 | { "name": "steps", "value": 100, 11 | "bind": {"type": "range", "min": 10, "max": 500, "step": 1} }, 12 | { "name": "method", "value": "pdf", 13 | "bind": {"type": "radio", "options": ["pdf", "cdf"]} } 14 | ], 15 | 16 | "data": [ 17 | { 18 | "name": "points", 19 | "url": "data/normal-2d.json" 20 | }, 21 | { 22 | "name": "summary", 23 | "source": "points", 24 | "transform": [ 25 | { 26 | "type": "aggregate", 27 | "fields": ["u", "u"], 28 | "ops": ["mean", "stdev"], 29 | "as": ["mean", "stdev"] 30 | } 31 | ] 32 | }, 33 | { 34 | "name": "density", 35 | "source": "points", 36 | "transform": [ 37 | { 38 | "type": "density", 39 | "extent": {"signal": "domain('xscale')"}, 40 | "steps": {"signal": "steps"}, 41 | "method": {"signal": "method"}, 42 | "distribution": { 43 | "function": "kde", 44 | "field": "u", 45 | "bandwidth": {"signal": "bandwidth"} 46 | } 47 | } 48 | ] 49 | }, 50 | { 51 | "name": "normal", 52 | "transform": [ 53 | { 54 | "type": "density", 55 | "extent": {"signal": "domain('xscale')"}, 56 | "steps": {"signal": "steps"}, 57 | "method": {"signal": "method"}, 58 | "distribution": { 59 | "function": "normal", 60 | "mean": {"signal": "tuples('summary')[0].mean"}, 61 | "stdev": {"signal": "tuples('summary')[0].stdev"} 62 | } 63 | } 64 | ] 65 | } 66 | ], 67 | 68 | "scales": [ 69 | { 70 | "name": "xscale", 71 | "type": "linear", 72 | "range": "width", 73 | "domain": {"data": "points", "field": "u"}, 74 | "nice": true 75 | }, 76 | { 77 | "name": "yscale", 78 | "type": "linear", 79 | "range": "height", "round": true, 80 | "domain": { 81 | "fields": [ 82 | {"data": "density", "field": "density"}, 83 | {"data": "normal", "field": "density"} 84 | ] 85 | } 86 | }, 87 | { 88 | "name": "color", 89 | "type": "ordinal", 90 | "domain": ["Normal Estimate", "Kernel Density Estimate"], 91 | "range": ["#444", "steelblue"] 92 | } 93 | ], 94 | 95 | "axes": [ 96 | {"orient": "bottom", "scale": "xscale", "zindex": 1} 97 | ], 98 | 99 | "legends": [ 100 | {"orient": "top-left", "fill": "color", "offset": 0, "zindex": 1} 101 | ], 102 | 103 | "marks": [ 104 | { 105 | "type": "area", 106 | "from": {"data": "density"}, 107 | "encode": { 108 | "update": { 109 | "x": {"scale": "xscale", "field": "value"}, 110 | "y": {"scale": "yscale", "field": "density"}, 111 | "y2": {"scale": "yscale", "value": 0}, 112 | "fill": {"signal": "scale('color', 'Kernel Density Estimate')"} 113 | } 114 | } 115 | }, 116 | { 117 | "type": "line", 118 | "from": {"data": "normal"}, 119 | "encode": { 120 | "update": { 121 | "x": {"scale": "xscale", "field": "value"}, 122 | "y": {"scale": "yscale", "field": "density"}, 123 | "stroke": {"signal": "scale('color', 'Normal Estimate')"}, 124 | "strokeWidth": {"value": 2} 125 | } 126 | } 127 | }, 128 | { 129 | "type": "rect", 130 | "from": {"data": "points"}, 131 | "encode": { 132 | "enter": { 133 | "x": {"scale": "xscale", "field": "u"}, 134 | "width": {"value": 1}, 135 | "y": {"value": 25, "offset": {"signal": "height"}}, 136 | "height": {"value": 5}, 137 | "fill": {"value": "steelblue"}, 138 | "fillOpacity": {"value": 0.4} 139 | } 140 | } 141 | } 142 | ] 143 | } -------------------------------------------------------------------------------- /web/spec/driving.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 800, 4 | "height": 500, 5 | "padding": 5, 6 | 7 | "data": [ 8 | { 9 | "name": "drive", 10 | "url": "data/driving.json" 11 | } 12 | ], 13 | 14 | "scales": [ 15 | { 16 | "name": "x", 17 | "type": "linear", 18 | "domain": {"data": "drive", "field": "miles"}, 19 | "range": "width", 20 | "nice": true, 21 | "zero": false, 22 | "round": true 23 | }, 24 | { 25 | "name": "y", 26 | "type": "linear", 27 | "domain": {"data": "drive", "field": "gas"}, 28 | "range": "height", 29 | "nice": true, 30 | "zero": false, 31 | "round": true 32 | }, 33 | { 34 | "name": "align", 35 | "type": "ordinal", 36 | "domain": ["left", "right", "top", "bottom"], 37 | "range": ["right", "left", "center", "center"] 38 | }, 39 | { 40 | "name": "base", 41 | "type": "ordinal", 42 | "domain": ["left", "right", "top", "bottom"], 43 | "range": ["middle", "middle", "bottom", "top"] 44 | }, 45 | { 46 | "name": "dx", 47 | "type": "ordinal", 48 | "domain": ["left", "right", "top", "bottom"], 49 | "range": [-7, 6, 0, 0] 50 | }, 51 | { 52 | "name": "dy", 53 | "type": "ordinal", 54 | "domain": ["left", "right", "top", "bottom"], 55 | "range": [1, 1, -5, 6] 56 | } 57 | ], 58 | 59 | "axes": [ 60 | { 61 | "orient": "top", 62 | "scale": "x", 63 | "tickCount": 5, 64 | "tickSize": 0, 65 | "grid": true, 66 | "domain": false, 67 | "encode": { 68 | "axis": { 69 | "enter": { "stroke": {"value": "transparent"} } 70 | }, 71 | "labels": { 72 | "enter": { 73 | "align": {"value": "left"}, 74 | "baseline": {"value": "top"}, 75 | "fontSize": {"value": 12}, 76 | "fontWeight": {"value": "bold"} 77 | } 78 | } 79 | } 80 | }, 81 | { 82 | "orient": "left", 83 | "scale": "y", 84 | "tickCount": 5, 85 | "tickSize": 0, 86 | "grid": true, 87 | "domain": false, 88 | "format": "$0.2f", 89 | "encode": { 90 | "axis": { 91 | "enter": {"stroke": {"value": "transparent"}} 92 | }, 93 | "labels": { 94 | "enter": { 95 | "align": {"value": "left"}, 96 | "baseline": {"value": "bottom"}, 97 | "fontSize": {"value": 12}, 98 | "fontWeight": {"value": "bold"} 99 | } 100 | } 101 | } 102 | } 103 | ], 104 | 105 | "marks": [ 106 | { 107 | "type": "line", 108 | "from": {"data": "drive"}, 109 | "encode": { 110 | "enter": { 111 | "interpolate": {"value": "cardinal"}, 112 | "x": {"scale": "x", "field": "miles"}, 113 | "y": {"scale": "y", "field": "gas"}, 114 | "stroke": {"value": "#000"}, 115 | "strokeWidth": {"value": 3} 116 | } 117 | } 118 | }, 119 | { 120 | "type": "symbol", 121 | "from": {"data": "drive"}, 122 | "encode": { 123 | "enter": { 124 | "x": {"scale": "x", "field": "miles"}, 125 | "y": {"scale": "y", "field": "gas"}, 126 | "fill": {"value": "#fff"}, 127 | "stroke": {"value": "#000"}, 128 | "strokeWidth": {"value": 1}, 129 | "size": {"value": 49} 130 | } 131 | } 132 | }, 133 | { 134 | "type": "text", 135 | "from": {"data": "drive"}, 136 | "encode": { 137 | "enter": { 138 | "x": {"scale": "x", "field": "miles"}, 139 | "y": {"scale": "y", "field": "gas"}, 140 | "dx": {"scale": "dx", "field": "side"}, 141 | "dy": {"scale": "dy", "field": "side"}, 142 | "fill": {"value": "#000"}, 143 | "text": {"field": "year"}, 144 | "align": {"scale": "align", "field": "side"}, 145 | "baseline": {"scale": "base", "field": "side"} 146 | } 147 | } 148 | } 149 | ] 150 | } -------------------------------------------------------------------------------- /web/spec/error.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 400, 4 | "height": 100, 5 | "padding": 5, 6 | 7 | "data": [ 8 | { 9 | "name": "aggregate", 10 | "values": [ 11 | {"label": "Category A", "mean": 1, "lo": 0, "hi": 2}, 12 | {"label": "Category B", "mean": 2, "lo": 1.5, "hi": 2.5}, 13 | {"label": "Category C", "mean": 3, "lo": 1.7, "hi": 4.3}, 14 | {"label": "Category D", "mean": 4, "lo": 3, "hi": 5}, 15 | {"label": "Category E", "mean": 5, "lo": 4.1, "hi": 5.9} 16 | ] 17 | } 18 | ], 19 | 20 | "scales": [ 21 | { 22 | "name": "y", 23 | "type": "band", 24 | "range": "height", 25 | "domain": {"data": "aggregate", "field": "label"}, 26 | "zero": true 27 | }, 28 | { 29 | "name": "x", 30 | "type": "linear", 31 | "domain": {"data": "aggregate", "field": "hi"}, 32 | "range": [100, 400], 33 | "nice": true, "zero": true 34 | } 35 | ], 36 | 37 | "axes": [ 38 | {"orient": "bottom", "scale": "x", "tickCount": 6} 39 | ], 40 | 41 | "marks": [ 42 | { 43 | "type": "text", 44 | "from": {"data": "aggregate"}, 45 | "encode": { 46 | "enter": { 47 | "x": {"value": 0}, 48 | "y": {"scale": "y", "field": "label"}, 49 | "baseline": {"value": "middle"}, 50 | "fill": {"value": "#000"}, 51 | "text": {"field": "label"}, 52 | "font": {"value": "Helvetica Neue"}, 53 | "fontSize": {"value": 13} 54 | } 55 | } 56 | }, 57 | { 58 | "type": "rect", 59 | "from": {"data": "aggregate"}, 60 | "encode": { 61 | "enter": { 62 | "x": {"scale": "x", "field": "lo"}, 63 | "x2": {"scale": "x", "field": "hi"}, 64 | "y": {"scale": "y", "field": "label", "offset": -1}, 65 | "height": {"value": 1}, 66 | "fill": {"value": "#888"} 67 | } 68 | } 69 | }, 70 | { 71 | "type": "symbol", 72 | "from": {"data": "aggregate"}, 73 | "encode": { 74 | "enter": { 75 | "x": {"scale": "x", "field": "mean"}, 76 | "y": {"scale": "y", "field": "label"}, 77 | "size": {"value": 40}, 78 | "fill": {"value": "#000"} 79 | } 80 | } 81 | } 82 | ] 83 | } -------------------------------------------------------------------------------- /web/spec/force-beeswarm.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 800, 4 | "height": 100, 5 | "padding": {"left": 5, "right": 5, "top": 0, "bottom": 20}, 6 | "autosize": "none", 7 | 8 | "signals": [ 9 | { "name": "cx", "update": "width / 2" }, 10 | { "name": "cy", "update": "height / 2" }, 11 | { "name": "radius", "value": 8, "bind": {"type": "range", "min": 2, "max": 15, "step": 1} }, 12 | { "name": "collide", "value": 1, "bind": {"type": "range", "min": 1, "max": 10, "step": 1} }, 13 | { "name": "gravityX", "value": 0.2, "bind": {"type": "range", "min": 0, "max": 1} }, 14 | { "name": "gravityY", "value": 0.1, "bind": {"type": "range", "min": 0, "max": 1} }, 15 | { "name": "static", "value": false, "bind": {"type": "checkbox"} } 16 | ], 17 | 18 | "data": [ 19 | { 20 | "name": "people", 21 | "url": "data/miserables.json", 22 | "format": {"type": "json", "property": "nodes"} 23 | } 24 | ], 25 | 26 | "scales": [ 27 | { 28 | "name": "xscale", 29 | "type": "band", 30 | "domain": { 31 | "data": "people", 32 | "field": "group", 33 | "sort": true 34 | }, 35 | "range": "width" 36 | }, 37 | { 38 | "name": "color", 39 | "type": "ordinal", 40 | "scheme": "category20c" 41 | } 42 | ], 43 | 44 | "axes": [ 45 | { "orient": "bottom", "scale": "xscale" } 46 | ], 47 | 48 | "marks": [ 49 | { 50 | "name": "nodes", 51 | "type": "symbol", 52 | "from": {"data": "people"}, 53 | "encode": { 54 | "enter": { 55 | "fill": {"scale": "color", "field": "group"}, 56 | "xfocus": {"scale": "xscale", "field": "group", "band": 0.5}, 57 | "yfocus": {"signal": "cy"} 58 | }, 59 | "update": { 60 | "size": {"signal": "pow(2 * radius, 2)"}, 61 | "stroke": {"value": "white"}, 62 | "strokeWidth": {"value": 1}, 63 | "zindex": {"value": 0} 64 | }, 65 | "hover": { 66 | "stroke": {"value": "purple"}, 67 | "strokeWidth": {"value": 3}, 68 | "zindex": {"value": 1} 69 | } 70 | }, 71 | "transform": [ 72 | { 73 | "type": "force", 74 | "iterations": 300, 75 | "static": {"signal": "static"}, 76 | "forces": [ 77 | {"force": "collide", "iterations": {"signal": "collide"}, "radius": {"signal": "radius"}}, 78 | {"force": "x", "x": "xfocus", "strength": {"signal": "gravityX"}}, 79 | {"force": "y", "y": "yfocus", "strength": {"signal": "gravityY"}} 80 | ] 81 | } 82 | ] 83 | } 84 | ] 85 | } 86 | -------------------------------------------------------------------------------- /web/spec/force-network.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 800, 4 | "height": 500, 5 | "padding": 0, 6 | "autosize": "none", 7 | 8 | "signals": [ 9 | { "name": "cx", "update": "width / 2" }, 10 | { "name": "cy", "update": "height / 2" }, 11 | { "name": "nodeRadius", "value": 8, 12 | "bind": {"type": "range", "min": 1, "max": 50, "step": 1} }, 13 | { "name": "nodeCharge", "value": -30, 14 | "bind": {"type": "range", "min":-100, "max": 10, "step": 1} }, 15 | { "name": "linkDistance", "value": 30, 16 | "bind": {"type": "range", "min": 5, "max": 100, "step": 1} }, 17 | { "name": "static", "value": false, 18 | "bind": {"type": "checkbox"} }, 19 | { 20 | "description": "State variable for active node fix status.", 21 | "name": "fix", "value": 0, 22 | "on": [ 23 | { 24 | "events": "symbol:mouseout[!event.buttons], window:mouseup", 25 | "update": "0" 26 | }, 27 | { 28 | "events": "symbol:mouseover", 29 | "update": "fix || 1" 30 | }, 31 | { 32 | "events": "[symbol:mousedown, window:mouseup] > window:mousemove!", 33 | "update": "2", "force": true 34 | } 35 | ] 36 | }, 37 | { 38 | "description": "Graph node most recently interacted with.", 39 | "name": "node", "value": null, 40 | "on": [ 41 | { 42 | "events": "symbol:mouseover", 43 | "update": "fix === 1 ? item() : node" 44 | } 45 | ] 46 | }, 47 | { 48 | "description": "Flag to restart Force simulation upon data changes.", 49 | "name": "restart", "value": false, 50 | "on": [ 51 | {"events": {"signal": "fix"}, "update": "fix > 1"} 52 | ] 53 | } 54 | ], 55 | 56 | "data": [ 57 | { 58 | "name": "node-data", 59 | "url": "data/miserables.json", 60 | "format": {"type": "json", "property": "nodes"} 61 | }, 62 | { 63 | "name": "link-data", 64 | "url": "data/miserables.json", 65 | "format": {"type": "json", "property": "links"} 66 | } 67 | ], 68 | 69 | "scales": [ 70 | { 71 | "name": "color", 72 | "type": "ordinal", 73 | "scheme": "category20c" 74 | } 75 | ], 76 | 77 | "marks": [ 78 | { 79 | "name": "nodes", 80 | "type": "symbol", 81 | "zindex": 1, 82 | 83 | "from": {"data": "node-data"}, 84 | "on": [ 85 | { 86 | "trigger": "fix", 87 | "modify": "node", 88 | "values": "fix === 1 ? {fx:node.x, fy:node.y} : {fx:x(), fy:y()}" 89 | }, 90 | { 91 | "trigger": "!fix", 92 | "modify": "node", "values": "{fx: null, fy: null}" 93 | } 94 | ], 95 | 96 | "encode": { 97 | "enter": { 98 | "fill": {"scale": "color", "field": "group"}, 99 | "stroke": {"value": "white"} 100 | }, 101 | "update": { 102 | "size": {"signal": "2 * nodeRadius * nodeRadius"}, 103 | "cursor": {"value": "pointer"} 104 | } 105 | }, 106 | 107 | "transform": [ 108 | { 109 | "type": "force", 110 | "iterations": 300, 111 | "restart": {"signal": "restart"}, 112 | "static": {"signal": "static"}, 113 | "forces": [ 114 | {"force": "center", "x": {"signal": "cx"}, "y": {"signal": "cy"}}, 115 | {"force": "collide", "radius": {"signal": "nodeRadius"}}, 116 | {"force": "nbody", "strength": {"signal": "nodeCharge"}}, 117 | {"force": "link", "links": "link-data", "distance": {"signal": "linkDistance"}} 118 | ] 119 | } 120 | ] 121 | }, 122 | { 123 | "type": "path", 124 | "from": {"data": "link-data"}, 125 | "interactive": false, 126 | "encode": { 127 | "update": { 128 | "stroke": {"value": "#ccc"}, 129 | "strokeWidth": {"value": 0.5} 130 | } 131 | }, 132 | "transform": [ 133 | { 134 | "type": "linkpath", "shape": "line", 135 | "sourceX": "datum.source.x", "sourceY": "datum.source.y", 136 | "targetX": "datum.target.x", "targetY": "datum.target.y" 137 | } 138 | ] 139 | } 140 | ] 141 | } 142 | -------------------------------------------------------------------------------- /web/spec/gradient.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 300, 4 | "height": 15, 5 | "padding": 5, 6 | 7 | "scales": [ 8 | { 9 | "name": "color", 10 | "type": "sequential", 11 | "scheme": "viridis", 12 | "domain": [0, 100] 13 | } 14 | ], 15 | 16 | "marks": [ 17 | { 18 | "type": "rect", 19 | "encode": { 20 | "update": { 21 | "width": {"signal": "width"}, 22 | "height": {"signal": "height"}, 23 | "fill": {"gradient": "color"} 24 | } 25 | } 26 | } 27 | ] 28 | } -------------------------------------------------------------------------------- /web/spec/grouped-bar.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 300, 4 | "height": 240, 5 | 6 | "data": [ 7 | { 8 | "name": "table", 9 | "values": [ 10 | {"category":"A", "position":0, "value":0.1}, 11 | {"category":"A", "position":1, "value":0.6}, 12 | {"category":"A", "position":2, "value":0.9}, 13 | {"category":"A", "position":3, "value":0.4}, 14 | {"category":"B", "position":0, "value":0.7}, 15 | {"category":"B", "position":1, "value":0.2}, 16 | {"category":"B", "position":2, "value":1.1}, 17 | {"category":"B", "position":3, "value":0.8}, 18 | {"category":"C", "position":0, "value":0.6}, 19 | {"category":"C", "position":1, "value":0.1}, 20 | {"category":"C", "position":2, "value":0.2}, 21 | {"category":"C", "position":3, "value":0.7} 22 | ] 23 | } 24 | ], 25 | 26 | "scales": [ 27 | { 28 | "name": "yscale", 29 | "type": "band", 30 | "domain": {"data": "table", "field": "category"}, 31 | "range": "height", 32 | "padding": 0.2 33 | }, 34 | { 35 | "name": "xscale", 36 | "type": "linear", 37 | "domain": {"data": "table", "field": "value"}, 38 | "range": "width", 39 | "round": true, 40 | "zero": true, 41 | "nice": true 42 | }, 43 | { 44 | "name": "color", 45 | "type": "ordinal", 46 | "domain": {"data": "table", "field": "position"}, 47 | "scheme": "category20" 48 | } 49 | ], 50 | 51 | "axes": [ 52 | {"orient": "left", "scale": "yscale", "tickSize": 0, "tickPadding": 4, "zindex": 1}, 53 | {"orient": "bottom", "scale": "xscale"} 54 | ], 55 | 56 | "marks": [ 57 | { 58 | "type": "group", 59 | 60 | "from": { 61 | "facet": { 62 | "data": "table", 63 | "name": "facet", 64 | "groupby": "category" 65 | } 66 | }, 67 | 68 | "encode": { 69 | "enter": { 70 | "y": {"scale": "yscale", "field": "category"} 71 | } 72 | }, 73 | 74 | "signals": [ 75 | {"name": "height", "update": "bandwidth('yscale')"} 76 | ], 77 | 78 | "scales": [ 79 | { 80 | "name": "pos", 81 | "type": "band", 82 | "range": "height", 83 | "domain": {"data": "facet", "field": "position"} 84 | } 85 | ], 86 | 87 | "marks": [ 88 | { 89 | "name": "bars", 90 | "from": {"data": "facet"}, 91 | "type": "rect", 92 | "encode": { 93 | "enter": { 94 | "y": {"scale": "pos", "field": "position"}, 95 | "height": {"scale": "pos", "band": 1}, 96 | "x": {"scale": "xscale", "field": "value"}, 97 | "x2": {"scale": "xscale", "value": 0}, 98 | "fill": {"scale": "color", "field": "position"} 99 | } 100 | } 101 | }, 102 | { 103 | "type": "text", 104 | "from": {"data": "bars"}, 105 | "encode": { 106 | "enter": { 107 | "x": {"field": "x2", "offset": -5}, 108 | "y": {"field": "y", "offset": {"field": "height", "mult": 0.5}}, 109 | "fill": {"value": "white"}, 110 | "align": {"value": "right"}, 111 | "baseline": {"value": "middle"}, 112 | "text": {"field": "datum.value"} 113 | } 114 | } 115 | } 116 | ] 117 | } 118 | ] 119 | } -------------------------------------------------------------------------------- /web/spec/heatmap-lines.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 800, 4 | "padding": 5, 5 | 6 | "signals": [ 7 | {"name": "bandSize", "value": 25}, 8 | {"name": "height", "update": "bandSize * 24"} 9 | ], 10 | 11 | "data": [ 12 | { 13 | "name": "temperature", 14 | "url": "data/seattle-temps.csv", 15 | "format": {"type": "csv", "parse": {"temp": "number", "date": "date"}}, 16 | "transform": [ 17 | {"type": "formula", "as": "hour", "expr": "hours(datum.date)"}, 18 | { "type": "formula", "as": "date", 19 | "expr": "datetime(year(datum.date), month(datum.date), date(datum.date))"} 20 | ] 21 | } 22 | ], 23 | 24 | "scales": [ 25 | { 26 | "name": "row", 27 | "type": "band", 28 | "domain": [ 29 | 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 30 | 0, 1, 2, 3, 4, 5 31 | ], 32 | "bandSize": {"signal": "bandSize"} 33 | }, 34 | { 35 | "name": "x", 36 | "type": "time", 37 | "domain": {"data": "temperature", "field": "date"}, 38 | "range": "width" 39 | }, 40 | { 41 | "name": "y", 42 | "type": "linear", "zero": false, 43 | "domain": {"data": "temperature", "field": "temp"}, 44 | "range": [{"signal": "bandSize"}, 1] 45 | } 46 | ], 47 | 48 | "axes": [ 49 | {"orient": "bottom", "scale": "x", "domain": false, "title": "Month"}, 50 | { 51 | "orient": "left", "scale": "row", "domain": false, "title": "Hour", 52 | "tickSize": 0, 53 | "encode": { 54 | "labels": { 55 | "update": { 56 | "text": {"signal": "datum.value === 0 ? 'Midnight' : datum.value === 12 ? 'Noon' : datum.value < 12 ? datum.value + ':00 am' : (datum.value - 12) + ':00 pm'"} 57 | } 58 | } 59 | } 60 | } 61 | ], 62 | 63 | "marks": [ 64 | { 65 | "type": "group", 66 | "from": { 67 | "facet": { 68 | "name": "hour", 69 | "data": "temperature", 70 | "groupby": "hour" 71 | } 72 | }, 73 | "encode": { 74 | "enter": { 75 | "x": {"value": 0}, 76 | "y": {"scale": "row", "field": "hour"}, 77 | "width": {"signal": "width"}, 78 | "height": {"signal": "bandSize"} 79 | } 80 | }, 81 | "marks": [ 82 | { 83 | "type": "area", 84 | "from": {"data": "hour"}, 85 | "encode": { 86 | "enter": { 87 | "x": {"scale": "x", "field": "date"}, 88 | "y": {"scale": "y", "field": "temp"}, 89 | "y2": {"signal": "bandSize"} 90 | } 91 | } 92 | } 93 | ] 94 | }, 95 | { 96 | "type": "text", 97 | "encode": { 98 | "enter": { 99 | "x": {"value": 0}, 100 | "y": {"value": -4}, 101 | "text": {"value": "Seattle Annual Temperatures"}, 102 | "baseline": {"value": "bottom"}, 103 | "fontSize": {"value": 14}, 104 | "fontWeight": {"value": "bold"}, 105 | "fill": {"value": "black"} 106 | } 107 | } 108 | } 109 | ] 110 | } -------------------------------------------------------------------------------- /web/spec/heatmap.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 800, 4 | "height": 500, 5 | "padding": 5, 6 | 7 | "signals": [ 8 | { 9 | "name": "palette", "value": "Plasma", 10 | "bind": { 11 | "type": "select", 12 | "options": [ 13 | "Viridis", 14 | "Magma", 15 | "Inferno", 16 | "Plasma", 17 | "Cubehelix", 18 | "Rainbow", 19 | "Warm", 20 | "Cool", 21 | "Blues", 22 | "Greens", 23 | "Greys", 24 | "Purples", 25 | "Reds", 26 | "Oranges", 27 | "BrownBlueGreen", 28 | "PurpleGreen", 29 | "PinkYellowGreen", 30 | "PurpleOrange", 31 | "RedBlue", 32 | "RedGrey", 33 | "RedYellowBlue", 34 | "RedYellowGreen", 35 | "BlueGreen", 36 | "BluePurple", 37 | "GreenBlue", 38 | "OrangeRed", 39 | "PurpleBlueGreen", 40 | "PurpleBlue", 41 | "PurpleRed", 42 | "RedPurple", 43 | "YellowGreenBlue", 44 | "YellowGreen", 45 | "YellowOrangeBrown", 46 | "YellowOrangeRed" 47 | ] 48 | } 49 | }, 50 | { 51 | "name": "reverse", "value": false, "bind": {"type": "checkbox"} 52 | } 53 | ], 54 | 55 | "data": [ 56 | { 57 | "name": "temperature", 58 | "url": "data/seattle-temps.csv", 59 | "format": {"type": "csv", "parse": {"temp": "number", "date": "date"}}, 60 | "transform": [ 61 | {"type": "formula", "as": "hour", "expr": "hours(datum.date)"}, 62 | { "type": "formula", "as": "date", 63 | "expr": "datetime(year(datum.date), month(datum.date), date(datum.date))"} 64 | ] 65 | } 66 | ], 67 | 68 | "scales": [ 69 | { 70 | "name": "x", 71 | "type": "time", 72 | "domain": {"data": "temperature", "field": "date"}, 73 | "range": "width" 74 | }, 75 | { 76 | "name": "y", 77 | "type": "band", 78 | "domain": [ 79 | 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 80 | 0, 1, 2, 3, 4, 5 81 | ], 82 | "range": "height" 83 | }, 84 | { 85 | "name": "color", 86 | "type": "sequential", 87 | "scheme": {"signal": "palette"}, 88 | "domain": {"data": "temperature", "field": "temp"}, 89 | "reverse": {"signal": "reverse"}, 90 | "zero": false, "nice": false 91 | } 92 | ], 93 | 94 | "axes": [ 95 | {"orient": "bottom", "scale": "x", "domain": false, "title": "Month"}, 96 | { 97 | "orient": "left", "scale": "y", "domain": false, "title": "Hour", 98 | "encode": { 99 | "labels": { 100 | "update": { 101 | "text": {"signal": "datum.value === 0 ? 'Midnight' : datum.value === 12 ? 'Noon' : datum.value < 12 ? datum.value + ':00 am' : (datum.value - 12) + ':00 pm'"} 102 | } 103 | } 104 | } 105 | } 106 | ], 107 | 108 | "legends": [ 109 | {"fill": "color", "type": "gradient", "title": "Avg. Temp (°F)"} 110 | ], 111 | 112 | "marks": [ 113 | { 114 | "type": "rect", 115 | "from": {"data": "temperature"}, 116 | "encode": { 117 | "enter": { 118 | "x": {"scale": "x", "field": "date"}, 119 | "width": {"value": 5}, 120 | "y": {"scale": "y", "field": "hour"}, 121 | "height": {"scale": "y", "band": 1} 122 | }, 123 | "update": { 124 | "fill": {"scale": "color", "field": "temp"} 125 | } 126 | } 127 | }, 128 | { 129 | "type": "text", 130 | "encode": { 131 | "enter": { 132 | "x": {"value": 0}, 133 | "y": {"value": -4}, 134 | "text": {"value": "Seattle Annual Temperatures"}, 135 | "baseline": {"value": "bottom"}, 136 | "fontSize": {"value": 14}, 137 | "fontWeight": {"value": "bold"}, 138 | "fill": {"value": "black"} 139 | } 140 | } 141 | } 142 | ] 143 | } -------------------------------------------------------------------------------- /web/spec/histogram.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 500, 4 | "height": 100, 5 | "padding": 5, 6 | 7 | "signals": [ 8 | { "name": "binOffset", "value": 0, 9 | "bind": {"type": "range", "min": -0.1, "max": 0.1} }, 10 | { "name": "binStep", "value": 0.1, 11 | "bind": {"type": "range", "min": 0.001, "max": 0.4, "step": 0.001} }, 12 | { "name": "extent", "update": "[binOffset, 2+binOffset]" } 13 | ], 14 | 15 | "data": [ 16 | { 17 | "name": "points", 18 | "url": "data/normal-2d.json" 19 | }, 20 | { 21 | "name": "binned", 22 | "source": "points", 23 | "transform": [ 24 | { 25 | "type": "bin", "field": "u", 26 | "extent": {"signal": "extent"}, 27 | "step": {"signal": "binStep"}, 28 | "nice": false 29 | }, 30 | { 31 | "type": "aggregate", 32 | "key": "bin0", "groupby": ["bin0", "bin1"], 33 | "fields": ["bin0"], "ops": ["count"], "as": ["count"] 34 | } 35 | ] 36 | } 37 | ], 38 | 39 | "scales": [ 40 | { 41 | "name": "xscale", 42 | "type": "linear", 43 | "range": "width", 44 | "domain": [-1, 1] 45 | }, 46 | { 47 | "name": "yscale", 48 | "type": "linear", 49 | "range": "height", "round": true, 50 | "domain": {"data": "binned", "field": "count"}, 51 | "zero": true, "nice": true 52 | } 53 | ], 54 | 55 | "axes": [ 56 | {"orient": "bottom", "scale": "xscale", "zindex": 1}, 57 | {"orient": "left", "scale": "yscale", "tickCount": 5, "zindex": 1} 58 | ], 59 | 60 | "marks": [ 61 | { 62 | "type": "rect", 63 | "from": {"data": "binned"}, 64 | "encode": { 65 | "update": { 66 | "x": {"scale": "xscale", "field": "bin0"}, 67 | "x2": {"scale": "xscale", "field": "bin1", 68 | "offset": {"signal": "binStep > 0.02 ? -0.5 : 0"}}, 69 | "y": {"scale": "yscale", "field": "count"}, 70 | "y2": {"scale": "yscale", "value": 0}, 71 | "fill": {"value": "steelblue"} 72 | }, 73 | "hover": { "fill": {"value": "firebrick"} } 74 | } 75 | }, 76 | { 77 | "type": "rect", 78 | "from": {"data": "points"}, 79 | "encode": { 80 | "enter": { 81 | "x": {"scale": "xscale", "field": "u"}, 82 | "width": {"value": 1}, 83 | "y": {"value": 25, "offset": {"signal": "height"}}, 84 | "height": {"value": 5}, 85 | "fill": {"value": "steelblue"}, 86 | "fillOpacity": {"value": 0.4} 87 | } 88 | } 89 | } 90 | ] 91 | } -------------------------------------------------------------------------------- /web/spec/horizon.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 500, 4 | "height": 50, 5 | 6 | "signals": [ 7 | { 8 | "name": "layers", 9 | "value": 2, 10 | "on": [{"events": "mousedown!", "update": "1 + (layers % 4)"}] 11 | }, 12 | { 13 | "name": "vheight", 14 | "update": "height * layers" 15 | }, 16 | { 17 | "name": "opacity", 18 | "update": "pow(layers, -2/3)" 19 | } 20 | ], 21 | 22 | "data": [ 23 | { 24 | "name": "layer_indices", 25 | "values": [0, 1, 2, 3], 26 | "transform": [ 27 | {"type": "filter", "expr": "datum.data < layers"}, 28 | {"type": "formula", "expr": "datum.data * -height", "as": "offset"} 29 | ] 30 | }, 31 | { 32 | "name": "table", 33 | "values": [ 34 | {"x": 1, "y": 28}, {"x": 2, "y": 55}, 35 | {"x": 3, "y": 43}, {"x": 4, "y": 91}, 36 | {"x": 5, "y": 81}, {"x": 6, "y": 53}, 37 | {"x": 7, "y": 19}, {"x": 8, "y": 87}, 38 | {"x": 9, "y": 52}, {"x": 10, "y": 48}, 39 | {"x": 11, "y": 24}, {"x": 12, "y": 49}, 40 | {"x": 13, "y": 87}, {"x": 14, "y": 66}, 41 | {"x": 15, "y": 17}, {"x": 16, "y": 27}, 42 | {"x": 17, "y": 68}, {"x": 18, "y": 16}, 43 | {"x": 19, "y": 49}, {"x": 20, "y": 15} 44 | ] 45 | } 46 | ], 47 | 48 | "scales": [ 49 | { 50 | "name": "x", 51 | "type": "linear", 52 | "range": "width", 53 | "zero": false, "round": true, 54 | "domain": {"data": "table", "field": "x"} 55 | }, 56 | { 57 | "name": "y", 58 | "type": "linear", 59 | "range": [{"signal":"vheight"}, 0], 60 | "nice": true, "zero": true, 61 | "domain": {"data": "table", "field": "y"} 62 | } 63 | ], 64 | 65 | "axes": [ 66 | {"orient": "bottom", "scale": "x", "tickCount": 20} 67 | ], 68 | 69 | "marks": [ 70 | { 71 | "type": "group", 72 | "encode": { 73 | "update": { 74 | "width": {"field": {"group": "width"}}, 75 | "height": {"field": {"group": "height"}}, 76 | "clip": {"value": true} 77 | } 78 | }, 79 | "marks": [ 80 | { 81 | "type": "group", 82 | "from": {"data": "layer_indices"}, 83 | "encode": { 84 | "update": { 85 | "y": {"field": "offset"} 86 | } 87 | }, 88 | "marks": [ 89 | { 90 | "type": "area", 91 | "from": {"data": "table"}, 92 | "encode": { 93 | "enter": { 94 | "interpolate": {"value": "monotone"}, 95 | "x": {"scale": "x", "field": "x"}, 96 | "fill": {"value": "steelblue"} 97 | }, 98 | "update": { 99 | "y": {"scale": "y", "field": "y"}, 100 | "y2": {"scale": "y", "value": 0}, 101 | "fillOpacity": {"signal": "opacity"} 102 | } 103 | } 104 | } 105 | ] 106 | } 107 | ] 108 | } 109 | ] 110 | } -------------------------------------------------------------------------------- /web/spec/images.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 200, 4 | "height": 200, 5 | "padding": 5, 6 | 7 | "data": [ 8 | { 9 | "name": "data", 10 | "values": [ 11 | {"x": 0.5, "y": 0.5, "img": "data/ffox.png"}, 12 | {"x": 1.5, "y": 1.5, "img": "data/gimp.png"}, 13 | {"x": 2.5, "y": 2.5, "img": "data/7zip.png"} 14 | ] 15 | } 16 | ], 17 | 18 | "scales": [ 19 | { 20 | "name": "x", 21 | "type": "linear", 22 | "domain": [0, 3], 23 | "range": "width" 24 | }, 25 | { 26 | "name": "y", 27 | "type": "linear", 28 | "domain": [0, 3], 29 | "range": "height" 30 | } 31 | ], 32 | 33 | "axes": [ 34 | {"orient": "bottom", "scale": "x", "tickCount": 5}, 35 | {"orient": "left", "scale": "y", "tickCount": 5} 36 | ], 37 | 38 | "marks": [ 39 | { 40 | "type": "image", 41 | "from": {"data": "data"}, 42 | "encode": { 43 | "enter": { 44 | "url": {"field": "img"}, 45 | "width": {"value": 50}, 46 | "height": {"value": 50}, 47 | "x": {"scale": "x", "field": "x"}, 48 | "y": {"scale": "y", "field": "y"}, 49 | "align": {"value": "center"}, 50 | "baseline": {"value": "middle"} 51 | }, 52 | "update": { 53 | "opacity": {"value": 1.0} 54 | }, 55 | "hover": { 56 | "opacity": {"value": 0.5} 57 | } 58 | } 59 | } 60 | ] 61 | } -------------------------------------------------------------------------------- /web/spec/legends.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 0, 4 | "height": 0, 5 | "padding": 5, 6 | 7 | "scales": [ 8 | { 9 | "name": "sequence", 10 | "type": "sequential", 11 | "scheme": "viridis", 12 | "domain": [0, 100] 13 | }, 14 | { 15 | "name": "stops", 16 | "type": "linear", 17 | "range": ["#f00", "#a44", "#666", "#4a4", "#0f0"], 18 | "domain": [-100, -35, 0, 35, 100] 19 | } 20 | ], 21 | 22 | "legends": [ 23 | { 24 | "type": "gradient", 25 | "fill": "sequence", 26 | "orient": "left", 27 | "title": "Gradient", 28 | "offset": 0 29 | }, 30 | { 31 | "type": "gradient", 32 | "stroke": "stops", 33 | "orient": "left", 34 | "title": "Multi-Stop", 35 | "offset": 0 36 | }, 37 | { 38 | "type": "symbol", 39 | "stroke": "sequence", 40 | "orient": "right", 41 | "title": "Sequence", 42 | "encode": { 43 | "symbols": { 44 | "interactive": true, 45 | "update": {"fill": {"value": "transparent"}}, 46 | "hover": {"fill": {"value": "#ccc"}} 47 | }, 48 | "labels": { 49 | "interactive": true, 50 | "update": {"fill": {"value": "#000"}, "fontWeight": {"value": null}}, 51 | "hover": {"fill": {"value": "firebrick"}, "fontWeight": {"value": "bold"}} 52 | } 53 | } 54 | }, 55 | { 56 | "type": "symbol", 57 | "fill": "stops", 58 | "orient": "right", 59 | "title": "Stops", 60 | "values": [-100, -35, 0, 35, 100] 61 | } 62 | ] 63 | } -------------------------------------------------------------------------------- /web/spec/lifelines.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 500, 4 | "height": 80, 5 | "padding": 5, 6 | 7 | "data": [ 8 | { 9 | "name": "people", 10 | "values": [ 11 | { 12 | "label": "Washington", 13 | "born": -7506057600000, 14 | "died": -5366196000000, 15 | "enter": -5701424400000, 16 | "leave": -5453884800000 17 | }, 18 | { 19 | "label": "Adams", 20 | "born": -7389766800000, 21 | "died": -4528285200000, 22 | "enter": -5453884800000, 23 | "leave": -5327740800000 24 | }, 25 | { 26 | "label": "Jefferson", 27 | "born": -7154586000000, 28 | "died": -4528285200000, 29 | "enter": -5327740800000, 30 | "leave": -5075280000000 31 | }, 32 | { 33 | "label": "Madison", 34 | "born": -6904544400000, 35 | "died": -4213184400000, 36 | "enter": -5075280000000, 37 | "leave": -4822819200000 38 | }, 39 | { 40 | "label": "Monroe", 41 | "born": -6679904400000, 42 | "died": -4370518800000, 43 | "enter": -4822819200000, 44 | "leave": -4570358400000 45 | } 46 | ] 47 | }, 48 | { 49 | "name": "events", 50 | "format": {"type":"json", "parse":{"when":"date"}}, 51 | "values": [ 52 | { "name":"Decl. of Independence", "when":"July 4, 1776" }, 53 | { "name":"U.S. Constitution", "when":"3/4/1789" }, 54 | { "name":"Louisiana Purchase", "when":"April 30, 1803" }, 55 | { "name":"Monroe Doctrine", "when":"Dec 2, 1823" } 56 | ] 57 | } 58 | ], 59 | 60 | "scales": [ 61 | { 62 | "name": "yscale", 63 | "type": "band", 64 | "range": [0, {"signal": "height"}], 65 | "domain": {"data": "people", "field": "label"} 66 | }, 67 | { 68 | "name": "xscale", 69 | "type": "time", 70 | "range": "width", 71 | "round": true, 72 | "domain": {"data": "people", "fields": ["born", "died"]} 73 | } 74 | ], 75 | 76 | "axes": [ 77 | {"orient": "bottom", "scale": "xscale"} 78 | ], 79 | 80 | "marks": [ 81 | { 82 | "type": "text", 83 | "from": {"data": "events"}, 84 | "encode": { 85 | "enter": { 86 | "x": {"scale": "xscale", "field": "when"}, 87 | "y": {"value": -10}, 88 | "angle": {"value": -25}, 89 | "fill": {"value": "#000"}, 90 | "text": {"field": "name"}, 91 | "font": {"value": "Helvetica Neue"}, 92 | "fontSize": {"value": 10} 93 | } 94 | } 95 | }, 96 | { 97 | "type": "rect", 98 | "from": {"data": "events"}, 99 | "encode": { 100 | "enter": { 101 | "x": {"scale": "xscale", "field": "when"}, 102 | "y": {"value": -8}, 103 | "width": {"value": 1}, 104 | "height": {"field": {"group": "height"}, "offset": 8}, 105 | "fill": {"value": "#888"} 106 | } 107 | } 108 | }, 109 | { 110 | "type": "text", 111 | "from": {"data": "people"}, 112 | "encode": { 113 | "enter": { 114 | "x": {"scale": "xscale", "field": "born"}, 115 | "y": {"scale": "yscale", "field": "label", "offset": -3}, 116 | "fill": {"value": "#000"}, 117 | "text": {"field": "label"}, 118 | "font": {"value": "Helvetica Neue"}, 119 | "fontSize": {"value": 10} 120 | } 121 | } 122 | }, 123 | { 124 | "type": "rect", 125 | "from": {"data": "people"}, 126 | "encode": { 127 | "enter": { 128 | "x": {"scale": "xscale", "field": "born"}, 129 | "x2": {"scale": "xscale", "field": "died"}, 130 | "y": {"scale": "yscale", "field": "label"}, 131 | "height": {"value": 2}, 132 | "fill": {"value": "#557"} 133 | } 134 | } 135 | }, 136 | { 137 | "type": "rect", 138 | "from": {"data": "people"}, 139 | "encode": { 140 | "enter": { 141 | "x": {"scale": "xscale", "field": "enter"}, 142 | "x2": {"scale": "xscale", "field": "leave"}, 143 | "y": {"scale": "yscale", "field": "label", "offset":-1}, 144 | "height": {"value": 4}, 145 | "fill": {"value": "#e44"} 146 | } 147 | } 148 | } 149 | ] 150 | } -------------------------------------------------------------------------------- /web/spec/map-bind.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 900, 4 | "height": 500, 5 | "autosize": "none", 6 | 7 | "encode": { 8 | "update": { 9 | "fill": {"signal": "background"} 10 | } 11 | }, 12 | 13 | "signals": [ 14 | { 15 | "name": "type", 16 | "value": "mercator", 17 | "bind": { 18 | "type": "select", 19 | "options": [ 20 | "albers", 21 | "albersUsa", 22 | "azimuthalEqualArea", 23 | "azimuthalEquidistant", 24 | "conicConformal", 25 | "conicEqualArea", 26 | "conicEquidistant", 27 | "equirectangular", 28 | "gnomonic", 29 | "mercator", 30 | "orthographic", 31 | "stereographic", 32 | "transverseMercator" 33 | ] 34 | } 35 | }, 36 | { "name": "scale", "value": 150, 37 | "bind": {"type": "range", "min": 50, "max": 2000, "step": 1} }, 38 | { "name": "rotate0", "value": 0, 39 | "bind": {"type": "range", "min": -180, "max": 180, "step": 1} }, 40 | { "name": "rotate1", "value": 0, 41 | "bind": {"type": "range", "min": -90, "max": 90, "step": 1} }, 42 | { "name": "rotate2", "value": 0, 43 | "bind": {"type": "range", "min": -180, "max": 180, "step": 1} }, 44 | { "name": "center0", "value": 0, 45 | "bind": {"type": "range", "min": -180, "max": 180, "step": 1} }, 46 | { "name": "center1", "value": 0, 47 | "bind": {"type": "range", "min": -90, "max": 90, "step": 1} }, 48 | { "name": "translate0", "update": "width / 2" }, 49 | { "name": "translate1", "update": "height / 2" }, 50 | 51 | { "name": "graticuleDash", "value": 0, 52 | "bind": {"type": "radio", "options": [0, 3, 5, 10]} }, 53 | { "name": "borderWidth", "value": 1, 54 | "bind": {"type": "text"} }, 55 | { "name": "background", "value": "#ffffff", 56 | "bind": {"type": "color"} }, 57 | { "name": "invert", "value": false, 58 | "bind": {"type": "checkbox"} } 59 | ], 60 | 61 | "projections": [ 62 | { 63 | "name": "projection", 64 | "type": {"signal": "type"}, 65 | "scale": {"signal": "scale"}, 66 | "rotate": [ 67 | {"signal": "rotate0"}, 68 | {"signal": "rotate1"}, 69 | {"signal": "rotate2"} 70 | ], 71 | "center": [ 72 | {"signal": "center0"}, 73 | {"signal": "center1"} 74 | ], 75 | "translate": [ 76 | {"signal": "translate0"}, 77 | {"signal": "translate1"} 78 | ] 79 | } 80 | ], 81 | 82 | "data": [ 83 | { 84 | "name": "world", 85 | "url": "data/world-110m.json", 86 | "format": { 87 | "type": "topojson", 88 | "feature": "countries" 89 | } 90 | }, 91 | { 92 | "name": "graticule", 93 | "transform": [ 94 | { "type": "graticule" } 95 | ] 96 | } 97 | ], 98 | 99 | "marks": [ 100 | { 101 | "type": "shape", 102 | "from": {"data": "graticule"}, 103 | "encode": { 104 | "update": { 105 | "strokeWidth": {"value": 1}, 106 | "strokeDash": {"signal": "[+graticuleDash, +graticuleDash]"}, 107 | "stroke": {"signal": "invert ? '#444' : '#ddd'"}, 108 | "fill": {"value": null} 109 | } 110 | }, 111 | "transform": [ 112 | { "type": "geoshape", "projection": "projection" } 113 | ] 114 | }, 115 | { 116 | "type": "shape", 117 | "from": {"data": "world"}, 118 | "encode": { 119 | "update": { 120 | "strokeWidth": {"signal": "+borderWidth"}, 121 | "stroke": {"signal": "invert ? '#777' : '#bbb'"}, 122 | "fill": {"signal": "invert ? '#fff' : '#000'"}, 123 | "zindex": {"value": 0} 124 | }, 125 | "hover": { 126 | "strokeWidth": {"signal": "+borderWidth + 1"}, 127 | "stroke": {"value": "firebrick"}, 128 | "zindex": {"value": 1} 129 | } 130 | }, 131 | "transform": [ 132 | { "type": "geoshape", "projection": "projection" } 133 | ] 134 | } 135 | ] 136 | } -------------------------------------------------------------------------------- /web/spec/map.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 900, 4 | "height": 500, 5 | "autosize": "none", 6 | 7 | "signals": [ 8 | { "name": "tx", "update": "width / 2" }, 9 | { "name": "ty", "update": "height / 2" }, 10 | { 11 | "name": "scale", 12 | "value": 150, 13 | "on": [{ 14 | "events": {"type": "wheel", "consume": true}, 15 | "update": "clamp(scale * pow(1.0005, -event.deltaY * pow(16, event.deltaMode)), 150, 3000)" 16 | }] 17 | }, 18 | { 19 | "name": "angles", 20 | "value": [0, 0], 21 | "on": [{ 22 | "events": "mousedown", 23 | "update": "[rotateX, centerY]" 24 | }] 25 | }, 26 | { 27 | "name": "cloned", 28 | "value": null, 29 | "on": [{ 30 | "events": "mousedown", 31 | "update": "copy('projection')" 32 | }] 33 | }, 34 | { 35 | "name": "start", 36 | "value": null, 37 | "on": [{ 38 | "events": "mousedown", 39 | "update": "invert(cloned, xy())" 40 | }] 41 | }, 42 | { 43 | "name": "drag", "value": null, 44 | "on": [{ 45 | "events": "[mousedown, window:mouseup] > window:mousemove", 46 | "update": "invert(cloned, xy())" 47 | }] 48 | }, 49 | { 50 | "name": "delta", "value": null, 51 | "on": [{ 52 | "events": {"signal": "drag"}, 53 | "update": "[drag[0] - start[0], start[1] - drag[1]]" 54 | }] 55 | }, 56 | { 57 | "name": "rotateX", "value": 0, 58 | "on": [{ 59 | "events": {"signal": "delta"}, 60 | "update": "angles[0] + delta[0]" 61 | }] 62 | }, 63 | { 64 | "name": "centerY", "value": 0, 65 | "on": [{ 66 | "events": {"signal": "delta"}, 67 | "update": "clamp(angles[1] + delta[1], -60, 60)" 68 | }] 69 | } 70 | ], 71 | 72 | "projections": [ 73 | { 74 | "name": "projection", 75 | "type": "mercator", 76 | "scale": {"signal": "scale"}, 77 | "rotate": [{"signal": "rotateX"}, 0, 0], 78 | "center": [0, {"signal": "centerY"} ], 79 | "translate": [{"signal": "tx"}, {"signal": "ty"}] 80 | } 81 | ], 82 | 83 | "data": [ 84 | { 85 | "name": "world", 86 | "url": "data/world-110m.json", 87 | "format": { 88 | "type": "topojson", 89 | "feature": "countries" 90 | } 91 | }, 92 | { 93 | "name": "graticule", 94 | "transform": [ 95 | { "type": "graticule", "step": [15, 15] } 96 | ] 97 | } 98 | ], 99 | 100 | "marks": [ 101 | { 102 | "type": "shape", 103 | "from": {"data": "graticule"}, 104 | "encode": { 105 | "enter": { 106 | "strokeWidth": {"value": 1}, 107 | "stroke": {"value": "#ddd"}, 108 | "fill": {"value": null} 109 | } 110 | }, 111 | "transform": [ 112 | { "type": "geoshape", "projection": "projection" } 113 | ] 114 | }, 115 | { 116 | "type": "shape", 117 | "from": {"data": "world"}, 118 | "encode": { 119 | "enter": { 120 | "strokeWidth": {"value": 0.5}, 121 | "stroke": {"value": "#bbb"}, 122 | "fill": {"value": "#e5e8d3"} 123 | } 124 | }, 125 | "transform": [ 126 | { "type": "geoshape", "projection": "projection" } 127 | ] 128 | } 129 | ] 130 | } -------------------------------------------------------------------------------- /web/spec/movies-sort.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 15, 4 | "padding": 5, 5 | "autosize": "pad", 6 | 7 | "config": { 8 | "axisLeft": { 9 | "titleX": -5, 10 | "titleY": -2, 11 | "titleAlign": "right", 12 | "titleAngle": 0, 13 | "titleBaseline": "bottom" 14 | } 15 | }, 16 | 17 | "signals": [ 18 | { 19 | "name": "cellSize", 20 | "value": 15 21 | }, 22 | { 23 | "name": "height", 24 | "update": "cellSize * extent[1]" 25 | }, 26 | { 27 | "name": "sortop", 28 | "value": "count", 29 | "bind": {"type": "radio", "options": ["count", "min"]} 30 | }, 31 | { 32 | "name": "sortorder", 33 | "value": "descending", 34 | "bind": {"type": "radio", "options": ["ascending", "descending"]} 35 | } 36 | ], 37 | 38 | "data": [ 39 | { 40 | "name": "source", 41 | "url": "data/movies.json" 42 | }, 43 | { 44 | "name": "layout", 45 | "source": "source", 46 | "transform": [ 47 | { 48 | "type": "aggregate", 49 | "fields": ["Title"], 50 | "ops": ["distinct"], 51 | "signal": "aggregate" 52 | }, 53 | { 54 | "type": "extent", 55 | "field": "distinct_Title", 56 | "signal": "extent" 57 | } 58 | ] 59 | } 60 | ], 61 | 62 | "marks": [ 63 | { 64 | "type": "symbol", 65 | "from": {"data": "source"}, 66 | "encode": { 67 | "update": { 68 | "x": {"value": 10}, 69 | "y": {"scale": "y", "field": "Title"}, 70 | "size": {"value": 36}, 71 | "shape": {"value": "circle"}, 72 | "strokeWidth": {"value": 1.5}, 73 | "opacity": {"value": 0.7}, 74 | "stroke": {"value": "steelblue"}, 75 | "fill": {"value": "transparent"} 76 | }, 77 | "hover": { 78 | "stroke": {"value": "firebrick"}, 79 | "cursor": {"value": "pointer"} 80 | } 81 | } 82 | } 83 | ], 84 | 85 | "scales": [ 86 | { 87 | "name": "y", 88 | "type": "point", 89 | "domain": { 90 | "data": "source", 91 | "field": "Title", 92 | "sort": { 93 | "field": "Title", 94 | "op": {"signal": "sortop"}, 95 | "order": {"signal": "sortorder"} 96 | } 97 | }, 98 | "bandSize": {"signal": "cellSize"}, 99 | "padding": 0.5 100 | } 101 | ], 102 | 103 | "axes": [ 104 | { 105 | "scale": "y", 106 | "orient": "left", 107 | "title": "Film Title", 108 | "encode": { 109 | "labels": { 110 | "interactive": true, 111 | "title": { 112 | "update": { 113 | "x": {"value": -5}, 114 | "y": {"value": -2}, 115 | "align": {"value": "right"}, 116 | "baseline": {"value": "bottom"}, 117 | "angle": {"value": 0} 118 | } 119 | }, 120 | "enter": { 121 | "text": {"signal": "truncate(datum.label, 25)"} 122 | }, 123 | "update": { 124 | "fill": {"value": "black"} 125 | }, 126 | "hover": { 127 | "fill": {"value": "firebrick"}, 128 | "cursor": {"value": "pointer"} 129 | } 130 | } 131 | } 132 | } 133 | ] 134 | } -------------------------------------------------------------------------------- /web/spec/nested.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 300, 4 | "padding": 5, 5 | "autosize": "pad", 6 | 7 | "encode": { 8 | "enter": { 9 | "fill": {"value": "transparent"}, 10 | "strokeWidth": {"value": 1}, 11 | "stroke": {"value": "#888"} 12 | }, 13 | "update": { 14 | "strokeDash": {"value": [3, 3]} 15 | }, 16 | "hover": { 17 | "strokeDash": {"value": []} 18 | } 19 | }, 20 | 21 | "signals": [ 22 | { 23 | "name": "height", 24 | "update": "extent[1] * bandSize" 25 | }, 26 | { 27 | "name": "bandSize", 28 | "value": 20 29 | } 30 | ], 31 | 32 | "data": [ 33 | { 34 | "name": "tuples", 35 | "values": [ 36 | {"a": 0, "b": "a", "c": 6.3}, 37 | {"a": 0, "b": "a", "c": 4.2}, 38 | {"a": 0, "b": "b", "c": 6.8}, 39 | {"a": 1, "b": "b", "c": 4.4}, 40 | {"a": 2, "b": "b", "c": 3.5}, 41 | {"a": 2, "b": "c", "c": 6.2} 42 | ], 43 | "transform": [ 44 | { 45 | "type": "aggregate", 46 | "groupby": ["a", "b"], 47 | "fields": ["c"], 48 | "ops": ["average"], 49 | "as": ["c"] 50 | } 51 | ] 52 | }, 53 | { 54 | "name": "trellis", 55 | "source": "tuples", 56 | "transform": [ 57 | { 58 | "type": "aggregate", 59 | "groupby": ["a"] 60 | }, 61 | { 62 | "type": "stack", 63 | "field": "count" 64 | }, 65 | { 66 | "type": "extent", 67 | "field": "y1", 68 | "signal": "extent" 69 | } 70 | ] 71 | } 72 | ], 73 | 74 | "scales": [ 75 | { 76 | "name": "xscale", 77 | "domain": {"data": "tuples", "field": "c"}, 78 | "nice": true, 79 | "zero": true, 80 | "round": true, 81 | "range": "width" 82 | }, 83 | { 84 | "name": "color", 85 | "type": "ordinal", 86 | "scheme": "category10", 87 | "domain": {"data": "trellis", "field": "a"} 88 | } 89 | ], 90 | 91 | "axes": [ 92 | { "orient": "bottom", "scale": "xscale", "domain": true } 93 | ], 94 | 95 | "marks": [ 96 | { 97 | "type": "group", 98 | 99 | "from": { 100 | "data": "trellis", 101 | "facet": { 102 | "name": "faceted_tuples", 103 | "data": "tuples", 104 | "groupby": "a" 105 | } 106 | }, 107 | 108 | "encode": { 109 | "enter": { 110 | "x": {"value": 0}, 111 | "width": {"signal": "width"}, 112 | "y": {"field": "y0", "mult": {"signal": "bandSize"}}, 113 | "y2": {"field": "y1", "mult": {"signal": "bandSize"}} 114 | } 115 | }, 116 | 117 | "scales": [ 118 | { 119 | "name": "yscale", 120 | "type": "band", 121 | "padding": 0.11, 122 | "round": true, 123 | "domain": {"data": "faceted_tuples", "field": "b"}, 124 | "bandSize": {"signal": "bandSize"} 125 | } 126 | ], 127 | 128 | "axes": [ 129 | { "orient": "left", "scale": "yscale", 130 | "tickSize": 0, "tickPadding": 4, "domain": false } 131 | ], 132 | 133 | "marks": [ 134 | { 135 | "type": "rect", 136 | "from": {"data": "faceted_tuples"}, 137 | "encode": { 138 | "enter": { 139 | "x": {"value": 0}, 140 | "x2": {"scale": "xscale", "field": "c"}, 141 | "y": {"scale": "yscale", "field": "b"}, 142 | "height": {"scale": "yscale", "band": 1}, 143 | "fill": {"scale": "color", "field": "a"}, 144 | "cornerRadius": {"value": 8}, 145 | "strokeWidth": {"value": 2} 146 | }, 147 | "update": { 148 | "stroke": {"value": null} 149 | }, 150 | "hover": { 151 | "stroke": {"value": "firebrick"} 152 | } 153 | } 154 | } 155 | ] 156 | } 157 | ] 158 | } -------------------------------------------------------------------------------- /web/spec/parallel-coords.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 700, 4 | "height": 400, 5 | "padding": 5, 6 | 7 | "config": { 8 | "axisY": { 9 | "titleX": -2, 10 | "titleY": 410, 11 | "titleAngle": 0, 12 | "titleAlign": "right", 13 | "titleBaseline": "top" 14 | } 15 | }, 16 | 17 | "data": [ 18 | { 19 | "name": "cars", 20 | "url": "data/cars.json", 21 | "transform": [ 22 | {"type": "filter", "expr": "datum.Horsepower && datum.Miles_per_Gallon"} 23 | ] 24 | }, 25 | { 26 | "name": "fields", 27 | "values": [ 28 | "Cylinders", 29 | "Displacement", 30 | "Weight_in_lbs", 31 | "Horsepower", 32 | "Acceleration", 33 | "Miles_per_Gallon", 34 | "Year" 35 | ] 36 | } 37 | ], 38 | 39 | "scales": [ 40 | { 41 | "name": "ord", "type": "point", 42 | "range": "width", "round": true, 43 | "domain": {"data": "fields", "field": "data"} 44 | }, 45 | { 46 | "name": "Cylinders", "type": "linear", 47 | "range": "height", "zero": false, "nice": true, 48 | "domain": {"data": "cars", "field": "Cylinders"} 49 | }, 50 | { 51 | "name": "Displacement", "type": "linear", 52 | "range": "height", "zero": false, "nice": true, 53 | "domain": {"data": "cars", "field": "Displacement"} 54 | }, 55 | { 56 | "name": "Weight_in_lbs", "type": "linear", 57 | "range": "height", "zero": false, "nice": true, 58 | "domain": {"data": "cars", "field": "Weight_in_lbs"} 59 | }, 60 | { 61 | "name": "Horsepower", "type": "linear", 62 | "range": "height", "zero": false, "nice": true, 63 | "domain": {"data": "cars", "field": "Horsepower"} 64 | }, 65 | { 66 | "name": "Acceleration", "type": "linear", 67 | "range": "height", "zero": false, "nice": true, 68 | "domain": {"data": "cars", "field": "Acceleration"} 69 | }, 70 | { 71 | "name": "Miles_per_Gallon", "type": "linear", 72 | "range": "height", "zero": false, "nice": true, 73 | "domain": {"data": "cars", "field": "Miles_per_Gallon"} 74 | }, 75 | { 76 | "name": "Year", "type": "linear", 77 | "range": "height", "zero": false, "nice": true, 78 | "domain": {"data": "cars", "field": "Year"} 79 | } 80 | ], 81 | 82 | "axes": [ 83 | { 84 | "orient": "left", "zindex": 1, 85 | "scale": "Cylinders", "title": "Cylinders", 86 | "offset": {"scale": "ord", "value": "Cylinders", "mult": -1} 87 | }, 88 | { 89 | "orient": "left", "zindex": 1, 90 | "scale": "Displacement", "title": "Displacement", 91 | "offset": {"scale": "ord", "value": "Displacement", "mult": -1} 92 | }, 93 | { 94 | "orient": "left", "zindex": 1, 95 | "scale": "Weight_in_lbs", "title": "Weight_in_lbs", 96 | "offset": {"scale": "ord", "value": "Weight_in_lbs", "mult": -1} 97 | }, 98 | { 99 | "orient": "left", "zindex": 1, 100 | "scale": "Horsepower", "title": "Horsepower", 101 | "offset": {"scale": "ord", "value": "Horsepower", "mult": -1} 102 | }, 103 | { 104 | "orient": "left", "zindex": 1, 105 | "scale": "Acceleration", "title": "Acceleration", 106 | "offset": {"scale": "ord", "value": "Acceleration", "mult": -1} 107 | }, 108 | { 109 | "orient": "left", "zindex": 1, 110 | "scale": "Miles_per_Gallon", "title": "Miles_per_Gallon", 111 | "offset": {"scale": "ord", "value": "Miles_per_Gallon", "mult": -1} 112 | }, 113 | { 114 | "orient": "left", "zindex": 1, 115 | "scale": "Year", "title": "Year", "format": "d", 116 | "offset": {"scale": "ord", "value": "Year", "mult": -1} 117 | } 118 | ], 119 | 120 | "marks": [ 121 | { 122 | "type": "group", 123 | "from": {"data": "cars"}, 124 | "marks": [ 125 | { 126 | "type": "line", 127 | "from": {"data": "fields"}, 128 | "encode": { 129 | "enter": { 130 | "x": {"scale": "ord", "field": "data"}, 131 | "y": { 132 | "scale": {"datum": "data"}, 133 | "field": {"parent": {"datum": "data"}} 134 | }, 135 | "stroke": {"value": "steelblue"}, 136 | "strokeWidth": {"value": 1.01}, 137 | "strokeOpacity": {"value": 0.3} 138 | } 139 | } 140 | } 141 | ] 142 | } 143 | ] 144 | } -------------------------------------------------------------------------------- /web/spec/shift-select.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 600, 4 | "height": 300, 5 | "padding": 10, 6 | 7 | "signals": [ 8 | { 9 | "name": "shift", 10 | "value": false, 11 | "on": [ 12 | { 13 | "events": {"marktype": "rect", "type": "click"}, 14 | "update": "event.shiftKey", 15 | "force": true 16 | } 17 | ] 18 | }, 19 | { 20 | "name": "clicked", 21 | "value": null, 22 | "on": [ 23 | { 24 | "events": {"marktype": "rect", "type": "click"}, 25 | "update": "datum", 26 | "force": true 27 | } 28 | ] 29 | } 30 | ], 31 | 32 | "data": [ 33 | { 34 | "name": "values", 35 | "values": [ 36 | {"x": 0, "y": 28}, 37 | {"x": 1, "y": 43}, 38 | {"x": 2, "y": 99}, 39 | {"x": 3, "y": 56}, 40 | {"x": 4, "y": 38}, 41 | {"x": 5, "y": 83}, 42 | {"x": 6, "y": 69}, 43 | {"x": 7, "y": 24} 44 | ] 45 | }, 46 | { 47 | "name": "selected", 48 | "on": [ 49 | {"trigger": "!shift", "remove": true}, 50 | {"trigger": "!shift && clicked", "insert": "clicked"}, 51 | {"trigger": "shift && clicked", "toggle": "clicked"} 52 | ] 53 | } 54 | ], 55 | 56 | "scales": [ 57 | { 58 | "name": "xscale", 59 | "type": "band", 60 | "range": "width", 61 | "round": true, 62 | "domain": {"data": "values", "field": "x"} 63 | }, 64 | { 65 | "name": "yscale", 66 | "type": "linear", 67 | "range": "height", 68 | "round": true, 69 | "domain": {"data": "values", "field": "y"}, 70 | "zero": true, 71 | "nice": true 72 | } 73 | ], 74 | 75 | "axes": [ 76 | { 77 | "scale": "yscale", 78 | "orient": "left", 79 | "tickCount": 5, 80 | "zindex": 1 81 | }, 82 | { 83 | "scale": "xscale", 84 | "orient": "bottom", 85 | "zindex": 1 86 | } 87 | ], 88 | 89 | "marks": [ 90 | { 91 | "type": "rect", 92 | "from": {"data": "values"}, 93 | "encode": { 94 | "enter": { 95 | "x": {"scale": "xscale", "field": "x"}, 96 | "width": {"scale": "xscale", "band": 1}, 97 | "y": {"scale": "yscale", "field": "y"}, 98 | "y2": {"scale": "yscale", "value": 0} 99 | }, 100 | "update": { 101 | "fill": [ 102 | {"test": "indata('selected', '_id', datum._id)", "value": "steelblue"}, 103 | {"value": "#ccc"} 104 | ] 105 | } 106 | } 107 | } 108 | ] 109 | } -------------------------------------------------------------------------------- /web/spec/stacked-area.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 500, 4 | "height": 200, 5 | "padding": 5, 6 | 7 | "data": [ 8 | { 9 | "name": "table", 10 | "values": [ 11 | {"x": 0, "y": 28, "c":0}, {"x": 0, "y": 55, "c":1}, 12 | {"x": 1, "y": 43, "c":0}, {"x": 1, "y": 91, "c":1}, 13 | {"x": 2, "y": 81, "c":0}, {"x": 2, "y": 53, "c":1}, 14 | {"x": 3, "y": 19, "c":0}, {"x": 3, "y": 87, "c":1}, 15 | {"x": 4, "y": 52, "c":0}, {"x": 4, "y": 48, "c":1}, 16 | {"x": 5, "y": 24, "c":0}, {"x": 5, "y": 49, "c":1}, 17 | {"x": 6, "y": 87, "c":0}, {"x": 6, "y": 66, "c":1}, 18 | {"x": 7, "y": 17, "c":0}, {"x": 7, "y": 27, "c":1}, 19 | {"x": 8, "y": 68, "c":0}, {"x": 8, "y": 16, "c":1}, 20 | {"x": 9, "y": 49, "c":0}, {"x": 9, "y": 15, "c":1} 21 | ], 22 | "transform": [ 23 | { 24 | "type": "stack", 25 | "groupby": ["x"], 26 | "sort": {"field": "c"}, 27 | "field": "y" 28 | } 29 | ] 30 | }, 31 | { 32 | "name": "stats", 33 | "source": "table", 34 | "transform": [ 35 | { 36 | "type": "aggregate", 37 | "groupby": ["x"], "fields": ["y"], "ops": ["sum"] 38 | } 39 | ] 40 | } 41 | ], 42 | 43 | "scales": [ 44 | { 45 | "name": "x", 46 | "type": "point", 47 | "range": "width", 48 | "domain": {"data": "table", "field": "x"} 49 | }, 50 | { 51 | "name": "y", 52 | "type": "linear", 53 | "range": "height", 54 | "nice": true, "zero": true, 55 | "domain": {"data": "stats", "field": "sum_y"} 56 | }, 57 | { 58 | "name": "color", 59 | "type": "ordinal", 60 | "scheme": "category10", 61 | "domain": {"data": "table", "field": "c"} 62 | } 63 | ], 64 | 65 | "axes": [ 66 | {"orient": "bottom", "scale": "x", "zindex": 1}, 67 | {"orient": "left", "scale": "y", "zindex": 1} 68 | ], 69 | 70 | "marks": [ 71 | { 72 | "type": "group", 73 | "from": { 74 | "facet": { 75 | "name": "series", 76 | "data": "table", 77 | "groupby": "c" 78 | } 79 | }, 80 | "marks": [ 81 | { 82 | "type": "area", 83 | "from": {"data": "series"}, 84 | "encode": { 85 | "enter": { 86 | "interpolate": {"value": "monotone"}, 87 | "x": {"scale": "x", "field": "x"}, 88 | "y": {"scale": "y", "field": "y0"}, 89 | "y2": {"scale": "y", "field": "y1"}, 90 | "fill": {"scale": "color", "field": "c"} 91 | }, 92 | "update": { 93 | "fillOpacity": {"value": 1} 94 | }, 95 | "hover": { 96 | "fillOpacity": {"value": 0.5} 97 | } 98 | } 99 | } 100 | ] 101 | } 102 | ] 103 | } -------------------------------------------------------------------------------- /web/spec/stacked-bar.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 500, 4 | "height": 200, 5 | "padding": 5, 6 | 7 | "data": [ 8 | { 9 | "name": "table", 10 | "values": [ 11 | {"x": 0, "y": 28, "c":0}, {"x": 0, "y": 55, "c":1}, 12 | {"x": 1, "y": 43, "c":0}, {"x": 1, "y": 91, "c":1}, 13 | {"x": 2, "y": 81, "c":0}, {"x": 2, "y": 53, "c":1}, 14 | {"x": 3, "y": 19, "c":0}, {"x": 3, "y": 87, "c":1}, 15 | {"x": 4, "y": 52, "c":0}, {"x": 4, "y": 48, "c":1}, 16 | {"x": 5, "y": 24, "c":0}, {"x": 5, "y": 49, "c":1}, 17 | {"x": 6, "y": 87, "c":0}, {"x": 6, "y": 66, "c":1}, 18 | {"x": 7, "y": 17, "c":0}, {"x": 7, "y": 27, "c":1}, 19 | {"x": 8, "y": 68, "c":0}, {"x": 8, "y": 16, "c":1}, 20 | {"x": 9, "y": 49, "c":0}, {"x": 9, "y": 15, "c":1} 21 | ], 22 | "transform": [ 23 | { 24 | "type": "stack", 25 | "groupby": ["x"], 26 | "sort": {"field": "c"}, 27 | "field": "y" 28 | } 29 | ] 30 | }, 31 | { 32 | "name": "stats", 33 | "source": "table", 34 | "transform": [ 35 | { 36 | "type": "aggregate", 37 | "groupby": ["x"], "fields": ["y"], "ops": ["sum"] 38 | } 39 | ] 40 | } 41 | ], 42 | 43 | "scales": [ 44 | { 45 | "name": "x", 46 | "type": "band", 47 | "range": "width", 48 | "domain": {"data": "table", "field": "x"} 49 | }, 50 | { 51 | "name": "y", 52 | "type": "linear", 53 | "range": "height", 54 | "nice": true, "zero": true, 55 | "domain": {"data": "stats", "field": "sum_y"} 56 | }, 57 | { 58 | "name": "color", 59 | "type": "ordinal", 60 | "scheme": "category10", 61 | "domain": {"data": "table", "field": "c"} 62 | } 63 | ], 64 | 65 | "axes": [ 66 | {"orient": "bottom", "scale": "x", "zindex": 1}, 67 | {"orient": "left", "scale": "y", "zindex": 1} 68 | ], 69 | 70 | "marks": [ 71 | { 72 | "type": "rect", 73 | "from": {"data": "table"}, 74 | "encode": { 75 | "enter": { 76 | "x": {"scale": "x", "field": "x"}, 77 | "width": {"scale": "x", "band": 1, "offset": -1}, 78 | "y": {"scale": "y", "field": "y0"}, 79 | "y2": {"scale": "y", "field": "y1"}, 80 | "fill": {"scale": "color", "field": "c"} 81 | }, 82 | "update": { 83 | "fillOpacity": {"value": 1} 84 | }, 85 | "hover": { 86 | "fillOpacity": {"value": 0.5} 87 | } 88 | } 89 | } 90 | ] 91 | } -------------------------------------------------------------------------------- /web/spec/tree-radial.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 810, 4 | "height": 810, 5 | "padding": 20, 6 | 7 | "signals": [ 8 | { 9 | "name": "labels", "value": true, 10 | "bind": {"type": "checkbox"} 11 | }, 12 | { 13 | "name": "radius", "value": 330, 14 | "bind": {"type": "range", "min": 20, "max": 600} 15 | }, 16 | { 17 | "name": "angle", "value": 360, 18 | "bind": {"type": "range", "min": 0, "max": 360, "step": 1} 19 | }, 20 | { 21 | "name": "layout", "value": "tidy", 22 | "bind": {"type": "radio", "options": ["tidy", "cluster"]} 23 | }, 24 | { 25 | "name": "links", "value": "line", 26 | "bind": { 27 | "type": "radio", 28 | "options": ["line", "curve", "diagonal", "orthogonal"] 29 | } 30 | }, 31 | { "name": "originX", "update": "width / 2" }, 32 | { "name": "originY", "update": "height / 2" } 33 | ], 34 | 35 | "data": [ 36 | { 37 | "name": "tree", 38 | "url": "data/flare.json", 39 | "transform": [ 40 | { 41 | "type": "stratify", 42 | "key": "id", 43 | "parentKey": "parent" 44 | }, 45 | { 46 | "type": "tree", 47 | "method": {"signal": "layout"}, 48 | "size": [{"signal": "angle"}, {"signal": "radius"}], 49 | "as": ["degrees", "radius", "depth", "children"] 50 | }, 51 | { 52 | "type": "formula", 53 | "expr": "PI * (datum.degrees / 180 - 0.5)", 54 | "as": "angle" 55 | } 56 | ] 57 | }, 58 | { 59 | "name": "links", 60 | "source": "tree", 61 | "transform": [ 62 | { "type": "treelinks" }, 63 | { 64 | "type": "linkpath", 65 | "shape": {"signal": "links"}, "orient": "radial", 66 | "sourceX": "source.angle", "sourceY": "source.radius", 67 | "targetX": "target.angle", "targetY": "target.radius" 68 | } 69 | ] 70 | } 71 | ], 72 | 73 | "scales": [ 74 | { 75 | "name": "color", 76 | "type": "sequential", "scheme": "magma", 77 | "domain": {"data": "tree", "field": "depth"}, 78 | "zero": true 79 | } 80 | ], 81 | 82 | "marks": [ 83 | { 84 | "type": "path", 85 | "from": {"data": "links"}, 86 | "encode": { 87 | "update": { 88 | "x": {"signal": "originX"}, 89 | "y": {"signal": "originY"}, 90 | "path": {"field": "path"}, 91 | "stroke": {"value": "#ccc"} 92 | } 93 | } 94 | }, 95 | { 96 | "type": "symbol", 97 | "from": {"data": "tree"}, 98 | "encode": { 99 | "update": { 100 | "x": {"signal": "originX + datum.radius * cos(datum.angle)"}, 101 | "y": {"signal": "originY + datum.radius * sin(datum.angle)"}, 102 | "size": {"value": 100}, 103 | "stroke": {"value": "#fff"}, 104 | "fill": {"scale": "color", "field": "depth"} 105 | } 106 | } 107 | }, 108 | { 109 | "type": "text", 110 | "from": {"data": "tree"}, 111 | "encode": { 112 | "update": { 113 | "x": {"signal": "originX + datum.radius * cos(datum.angle)"}, 114 | "y": {"signal": "originY + datum.radius * sin(datum.angle)"}, 115 | "dx": {"signal": "(datum.degrees >= 180 ? -1 : 1) * 6"}, 116 | "text": {"field": "name"}, 117 | "fontSize": {"value": 9}, 118 | "angle": {"signal": "datum.degrees >= 180 ? datum.degrees - 270 : datum.degrees - 90"}, 119 | "align": {"signal": "datum.degrees >= 180 ? 'right' : 'left'"}, 120 | "baseline": {"value": "middle"}, 121 | "opacity": {"signal": "labels ? 1 : 0"} 122 | } 123 | } 124 | } 125 | ] 126 | } -------------------------------------------------------------------------------- /web/spec/treemap.vg.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": {"language": "vega", "version": "3.0.0"}, 3 | "width": 960, 4 | "height": 500, 5 | "padding": 2.5, 6 | "autosize": "none", 7 | 8 | "data": [ 9 | { 10 | "name": "tree", 11 | "url": "data/flare.json", 12 | "transform": [ 13 | { 14 | "type": "stratify", 15 | "key": "id", 16 | "parentKey": "parent" 17 | }, 18 | { 19 | "type": "treemap", 20 | "field": "size", 21 | "sort": {"field": "value"}, 22 | "round": true, 23 | "size": [{"signal": "width"}, {"signal": "height"}] 24 | } 25 | ] 26 | }, 27 | { 28 | "name": "nodes", 29 | "source": "tree", 30 | "transform": [{ "type": "filter", "expr": "datum.children" }] 31 | }, 32 | { 33 | "name": "leaves", 34 | "source": "tree", 35 | "transform": [{ "type": "filter", "expr": "!datum.children" }] 36 | } 37 | ], 38 | 39 | "scales": [ 40 | { 41 | "name": "color", 42 | "type": "ordinal", 43 | "range": [ 44 | "#3182bd", "#6baed6", "#9ecae1", "#c6dbef", "#e6550d", 45 | "#fd8d3c", "#fdae6b", "#fdd0a2", "#31a354", "#74c476", 46 | "#a1d99b", "#c7e9c0", "#756bb1", "#9e9ac8", "#bcbddc", 47 | "#dadaeb", "#636363", "#969696", "#bdbdbd", "#d9d9d9" 48 | ] 49 | }, 50 | { 51 | "name": "size", 52 | "type": "ordinal", 53 | "domain": [0, 1, 2, 3], 54 | "range": [256, 28, 20, 14] 55 | }, 56 | { 57 | "name": "opacity", 58 | "type": "ordinal", 59 | "domain": [0, 1, 2, 3], 60 | "range": [0.15, 0.5, 0.8, 1.0] 61 | } 62 | ], 63 | 64 | "marks": [ 65 | { 66 | "type": "rect", 67 | "from": {"data": "nodes"}, 68 | "interactive": false, 69 | "encode": { 70 | "enter": { 71 | "x": {"field": "x0"}, 72 | "y": {"field": "y0"}, 73 | "x2": {"field": "x1"}, 74 | "y2": {"field": "y1"}, 75 | "fill": {"scale": "color", "field": "name"} 76 | } 77 | } 78 | }, 79 | { 80 | "type": "rect", 81 | "from": {"data": "leaves"}, 82 | "encode": { 83 | "enter": { 84 | "x": {"field": "x0"}, 85 | "y": {"field": "y0"}, 86 | "x2": {"field": "x1"}, 87 | "y2": {"field": "y1"}, 88 | "stroke": {"value": "#fff"} 89 | }, 90 | "update": { 91 | "fill": {"value": "transparent"} 92 | }, 93 | "hover": { 94 | "fill": {"value": "red"} 95 | } 96 | } 97 | }, 98 | { 99 | "type": "text", 100 | "from": {"data": "nodes"}, 101 | "interactive": false, 102 | "encode": { 103 | "enter": { 104 | "x": {"signal": "0.5 * (datum.x0 + datum.x1)"}, 105 | "y": {"signal": "0.5 * (datum.y0 + datum.y1)"}, 106 | "font": {"value": "Helvetica Neue"}, 107 | "align": {"value": "center"}, 108 | "baseline": {"value": "middle"}, 109 | "fill": {"value": "#000"}, 110 | "text": {"field": "name"}, 111 | "fontSize": {"scale": "size", "field": "depth"}, 112 | "fillOpacity": {"scale": "opacity", "field": "depth"} 113 | } 114 | } 115 | } 116 | ] 117 | } 118 | -------------------------------------------------------------------------------- /web/specs.json: -------------------------------------------------------------------------------- 1 | [ 2 | "airports", 3 | "arc", 4 | "area", 5 | "bandsize", 6 | "bar", 7 | "bar-hover-label", 8 | "barley", 9 | "budget-forecasts", 10 | "chart", 11 | "choropleth", 12 | "crossfilter", 13 | "crossfilter-multi", 14 | "density", 15 | "dimpvis", 16 | "driving", 17 | "error", 18 | "falkensee", 19 | "force-network", 20 | "force-beeswarm", 21 | "gradient", 22 | "grouped-bar", 23 | "heatmap", 24 | "heatmap-lines", 25 | "histogram", 26 | "horizon", 27 | "images", 28 | "jobs", 29 | "legends", 30 | "lifelines", 31 | "map", 32 | "map-bind", 33 | "matrix-reorder", 34 | "movies-sort", 35 | "nested", 36 | "overview-detail", 37 | "panzoom", 38 | "parallel-coords", 39 | "playfair", 40 | "population", 41 | "shift-select", 42 | "splom-inner", 43 | "splom-outer", 44 | "stacked-area", 45 | "stacked-bar", 46 | "stocks-index", 47 | "tree-radial", 48 | "treemap", 49 | "violin-plot", 50 | "weather", 51 | "wordcloud" 52 | ] --------------------------------------------------------------------------------