Giter VIP home page Giter VIP logo

editor's Introduction

Vega Editor Build Status Deploy to Pages

The Vega editor is a web application for authoring and testing Vega and Vega-Lite visualizations. It includes a number of example specifications that showcase both the visual encodings and interaction techniques. It is deployed at https://vega.github.io/editor/.

We integrated a back-end service at https://vega-editor-backend.vercel.app/ which lets a user log in through GitHub so that they can access his/her personal gists. The code for the backend is at https://github.com/vega/editor-backend.

Editor is stuck

You can reset the Vega Editor by going to https://vega.github.io/editor/#/reset and clicking the reset button. This will reset the saved editor state.

Usage Instructions

To run the editor locally, you must first install the dependencies and then launch a local web server. We assume you have yarn installed.

  1. Install the dependencies:
$ yarn
  1. Start the server:
$ yarn start
  1. The local web server will be accessible from http://localhost:8080.

Local Testing & Debugging

The editor is useful for testing if you are involved in Vega and Vega-Lite development. To use Vega, Vega-Lite, or Vega Datasets from another directory on your computer, you need to link it. For this, run yarn link in the directory of the library that you want to link. Then, in this directory run yarn link <name of library>, e.g. yarn link vega or yarn link vega-lite.

For example, to link Vega, run

cd VEGA_DIR
yarn link

cd VEGA_LITE_DIR
yarn link

cd VEGA_EDITOR_DIR
yarn link vega
yarn link vega-lite

The Vega editor supports React Developer Tools and Redux DevTools.

Building preview images

Build images with yarn generate-example-images.

Contributing guidelines

We welcome contributions and promptly review pull requests. For instructions about how to contribute, please follow the Vega-Lite contributing guidelines.

Creating a release on gh-pages

Run the publish action at https://github.com/vega/editor/actions/workflows/publish.yml.

editor's People

Contributors

algomaster99 avatar andrewshawcare avatar apollonian avatar arexjambusarwala avatar arvind avatar ashu8912 avatar bryik avatar dependabot-preview[bot] avatar dependabot[bot] avatar domoritz avatar donghaoren avatar floribon avatar ganeshpatro321 avatar greenkeeper[bot] avatar hungngo97 avatar jheer avatar jhoffswell avatar kanitw avatar lsh avatar mathisonian avatar punitlodha avatar rav1kantsingh avatar risinggeek avatar russellsprouts avatar saurabh0402 avatar shakti97 avatar siddhant1 avatar starry97 avatar tianyiii avatar ydlamba avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

editor's Issues

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.

No validation of 'add by gist' form

Submitting the 'add by gist' form with empty field causes this error
1
Also, there's no validation on it currently to check whether the submitted data is actually an URL.

Remove typings

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

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.

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!

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?

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

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.

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?

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.

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

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.)

image

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".

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.

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.