vega / editor

Editor/IDE for Vega and Vega-Lite

Vega: A Visualization Grammar

Vega is a visualization grammar, a declarative format for creating, saving, and sharing interactive visualization designs. With Vega you can describe data visualizations in a JSON format, and generate interactive views using either HTML5 Canvas or SVG.

For documentation, tutorials, and examples, see the Vega website. For a description of changes between Vega 2 and later versions, please refer to the Vega Porting Guide.

Build Instructions

For a basic setup allowing you to build Vega and run examples:

• Clone https://github.com/vega/vega.
• Run yarn to install dependencies for all packages. If you don't have yarn installed, see https://yarnpkg.com/en/docs/install. We use Yarn workspaces to manage multiple packages within this monorepo.
• Once installation is complete, run yarn test to run test cases, or run yarn build to build output files for all packages.
• After running either yarn test or yarn build, run yarn serve to launch a local web server — your default browser will open and you can browse to the "test" folder to view test specifications.

This repository includes the Vega website and documentation in the docs folder. To launch the website locally, first run bundle install in the docs folder to install the necessary Jekyll libraries. Afterwards, use yarn docs to build the documentation and launch a local webserver. After launching, you can open http://127.0.0.1:4000/vega/ to see the website.

Internet Explorer Support

For backwards compatibility, Vega includes a babel-ified IE-compatible version of the code in the packages/vega/build-es5 directory. Older browser would also require several polyfill libraries:

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/runtime.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/fetch.umd.min.js"></script>

Contributions, Development, and Support

Interested in contributing to Vega? Please see our contribution and development guidelines, subject to our code of conduct.

Looking for support, or interested in sharing examples and tips? Post to the Vega discussion forum or join the Vega slack organization! We also have examples available as Observable notebooks.

If you're curious about system performance, see some in-browser benchmarks. Read about future plans in our roadmap.

editor's Issues

improve code quality

As of now, the codebase doesn't follow any coding style-guide and isn't consistent in writing. I recommend using something like prettier for automatic code formatting. Once in place, it can be integrated with editors for automatic format checks "on save".

No validation of 'add by gist' form

Submitting the 'add by gist' form with empty field causes this error

Also, there's no validation on it currently to check whether the submitted data is actually an URL.

Improve loading from gist

Instead of taking gist type directly from the user, we can get its type from $schema (or any method) then render according to it. I think we should remove gist type.
OR
Let's take gist type input, now if we select different type than the actual gist then it should show error on modal itself.

Looking forward to any suggestions, which one should be implemented?

Hot reloading not working for `webpack-dev-server`

Ideally --hot --inline should work but it's not apparently.

Chart does not update on parse if there was an error before

From https://github.com/vega/vega-editor/issues/215

Editor UI

We could improve the UI based on some inspiration from https://webassembly.studio/.

Made in https://app.moqups.com/[email protected]/lkfmF6icEv/edit/page/aa1276c8b

Format causes error

Set baseurl based on post message

See vega/vega-embed#55

Basically, when we get a spec via post message, we should use try to resolve URLs as a) absolute, b) relative to the editor, c) relative to the caller. This can be implemented by creating a custom vega loader.

Properly use portals for modals

Look at https://github.com/tajo/react-portal. I'd like our modals to close on esc and click outside.

Fix compact stringify library

From vega/vega-lite#1811

This is a very minor issue, but it nevertheless trips me up when I'm reading JSON generated by Vega-Lite: why does the Vega JSON generated by Vega-Lite drop spaces between object attributes? The current scheme causes visual grouping of unrelated things.

Instead of this: {"type": "filter","expr": "datum.year == 2000"}
I would expect output like this: {"type": "filter", "expr": "datum.year == 2000"}

Note that this is a bug in a stringify method that I modified from JSON3 three years ago!

What is the consistent behaviour of creating a new visualisation?

When creating a new viz, the user should be redirected to /custom/:mode and the editor should reset, except if the user is on /edited.

editor/src/components/app.tsx

Lines 54 to 64 in f4c7d44

	public setSpecInUrl(parameter) {
	if (parameter && parameter.mode && this.props.location.pathname.indexOf('/edited') === -1) {
	if (parameter.example_name) {
	this.setExample(parameter);
	} else if (parameter.username && parameter.id) {
	this.setGist(parameter);
	} else if (parameter.mode) {
	this.setEmptySpec(NAME_TO_MODE[parameter.mode]);
	}
	}
	}

However, when the user is on /edited, the editor does not reset but does get redirected. This is inconsistent with the behaviour of creating a new viz.

Should we stop redirecting the user? Thoughts?

Docs integration in the Vega editor

It would be nice to have a searchable tree-structure of the documentation within the Vega editior.

Sometimes wish to have detailed information next to the spec while playing around.

Data loading and import

Weird spacing in firefox

Should not re-format

The editor re-formats specs in some situations. That is not good if the user customized the format.

Probably introduced with #40

Update to webpack 4

When posting from embed with SVG/Canvas, we should use the same renderer

Clean up load from gist

• Don't rely on a service.
• Clean up the validation. The regexes are too complicated and not accurate (suggested by @zhirzh).

Losing interaction states by toggling tooltip

When we toggle Tooltips option vega.View gets re-initialized thus loses interaction states.

P.S: I would like to self-assign this issue.

Cannot find module './package.json'.

[at-loader] ./node_modules/vega-lite/build/src/index.d.ts:26:25
TS2307: Cannot find module './package.json'.

Warn before navigating away

Too often, we accidentally navigate back and lose the work. We should either make sure to not immediately save to local storage or show a warning.

Export Button

From https://github.com/vega/vega-editor/issues/184

tab creates two app containers

Press tab while not focused on the editor:

Add format button

Depends on #36

Convert to TS

Maybe using https://github.com/lyft/react-javascript-to-typescript-transform

We should do this after #2

Try different validator

From https://github.com/vega/vega-editor/issues/191

We would like

• Better error messages
• Links to the editor from an error

Hint users about what they can do in console

Currently, most users won't know how to use the console to debug unless they read https://vega.github.io/vega/docs/api/debugging/.

Providing some affordance that this documentation exists is probably helpful.

Autocomplete does not work in nested specs

Include Vega-Lite normalized spec output (in addition to Vega spec)

Tooltips don't support markdown

This is probably an issue with monaco.

Overlap in console

Deploy script

This could be useful

The project was built assuming it is hosted at /editor/.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
To publish it at http://vega.github.io/editor, run:

  yarn add --dev gh-pages

Add the following script in your package.json.

    // ...
    "scripts": {
      // ...
      "predeploy": "npm run build",
      "deploy": "gh-pages -d build"
    }

Then run:

  yarn run deploy

Find out more about deployment here:

  http://bit.ly/2vY88Kr

Update webpack and react router

Using https://github.com/facebookincubator/create-react-app

Use JSON request service

right now, we hard code which schemas are used for completion. We completely ignore the schema from the spec. This is not good.

To understand this issue, use a specific version of the schema and note how completion doesn't work anymore.

Remove typings

Since Vega 3.2 now ships typings with them. We don't need to import them anymore.

Print mode where only the plot is shown on the screen

This will allow users to easily create high-def graphics by printing a PDF of the page.

Use compact stringify for formatting

@apollonian11

hover not working

This example does not show hover effects (highlighting objects in red):

https://vega.github.io/editor/#/examples/vega/bar-chart

Fix use of examples for custom specs

Current editor bundles outdated Vega modules?

See vega/vega#1192 for a bug report indicating that Vega's pivot transform is not accessible in the current editor. This sounds like an error in which modules may not have been properly updated before creating a deployed bundle.

Update view to use the config which is sent from vega-embed

After vega/vega-embed#66.

Sharing visualizations

See https://docs.google.com/document/d/1YKBzT-aTrKGxA-G6ktzRSIC-ihc3JCWmNW5k7OL85nA/edit#heading=h.h1iauva9hmtp and look at https://twitter.com/mathisonian/status/973628667854123009 for an idea of what this could be like.

@mathisonian might have some suggestions for how we can implement this.

Some errors do not show up in the editor

See vega/vega#1099

SVG export doesn't work in Firefox

See vega/vega-lite#3603

Export to gists

Combine the editor instances

Right now we create new monaco instances when we open the vega spec in vl mode. This prevents undo/redo.

Enable debug source code in editor

From https://github.com/vega/vega-editor/issues/190

It can currently be quite difficult to debug Vega and Vega-Lite because the sources are minified. Even with sourcemaps, it is quite tedious.

Ideally, we minifiy all dependencies except for Vega and Vega-Lite.

Support themes

https://github.com/vega/vega-themes

This error screen makes Vega Editor unusable

It appears whenever there is an error in the console, which sounds like a good idea.

But this means it disrupt my typing flow all the time! (When I'm typing a spec, esp. expression, it would lead to console error all the time.)

Commit related specs or fix build setup

Right now every time I run git pull on this repo, I run into this kind of error:

error: Your local changes to the following files would be overwritten by merge:
	public/data/gapminder-health-income.csv
	public/data/income.json
	public/spec/vega-lite/index.json
	public/spec/vega-lite/interactive_panzoom_vconcat_shared.vl.json
	public/spec/vega-lite/layer_area_ci.vl.json
	public/spec/vega-lite/layer_bar_labels.vl.json
	public/spec/vega-lite/layer_candlestick.vl.json
	public/spec/vega-lite/layer_connected_scatterplot.vl.json
	public/spec/vega-lite/layer_error_bars.vl.json
	public/spec/vega-lite/layer_error_bars_dev.vl.json
	public/spec/vega-lite/layer_falkensee.vl.json
	public/spec/vega-lite/layer_global_mean_dev.vl.json
	public/spec/vega-lite/layer_histogram_global_mean.vl.json
	public/spec/vega-lite/layer_ranged_dot.vl.json
	public/spec/vega-lite/layer_rect_extent.vl.json
	public/spec/vega-lite/layer_text_heatmap.vl.json
	schema/vl.schema.json
Please commit your changes or stash them before you merge.
error: The following untracked working tree files would be overwritten by merge:
	public/spec/vega-lite/bar_aggregate_transform.vl.json
	public/spec/vega-lite/bar_color_disabled_scale.vl.json
	public/spec/vega-lite/bar_custom_sort_full.vl.json
	public/spec/vega-lite/bar_custom_sort_partial.vl.json
	public/spec/vega-lite/circle_natural_disasters.vl.json
	public/spec/vega-lite/geo_choropleth.vl.json
	public/spec/vega-lite/geo_circle.vl.json
	public/spec/vega-lite/geo_layer.vl.json
	public/spec/vega-lite/geo_layer_line_london.vl.json
	public/spec/vega-lite/geo_line.vl.json
	public/spec/vega-lite/geo_point.vl.json
	public/spec/vega-lite/geo_repeat.vl.json
	public/spec/vega-lite/geo_rule.vl.json
	public/spec/vega-lite/geo_text.vl.json
	public/spec/vega-lite/geo_trellis.vl.json
	public/spec/vega-lite/interactive_multi_line_tooltip.vl.json
	public/spec/vega-lite/layer_bar_annotations.vl.json
	public/spec/vega-lite/layer_line_co2_concentration.vl.json
	public/spec/vega-lite/line_inside_domain_using_clip.vl.json
	public/spec/vega-lite/line_inside_domain_using_transform.vl.json
	public/spec/vega-lite/line_outside_domain.vl.json
	public/spec/vega-lite/point_invalid_color.vl.json
Please move or remove them before you merge.
Aborting

and have to manually reset the repo before pulling again.