Vega viewer template manager already loads base templates for vg/vl specs from:

https://github.com/RandomFractals/vscode-vega-viewer/tree/master/templates

Need to add a shortcut command to read and paste them into new json files for quick vega spec starters

arrow data enhancement for #30 and #27

see #34

since that vscode data.preview extension supersedes slimmed down version of vega.preview.data grid and supports arrow data display and export.

see https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-data-preview

to let devs remap it to vscode.open or other extension for viewing raw csv & json data files referenced in vega specs.

this extension already provides jsonSchema validation and intelli-sense code hints for vega json files.

Adding online help docs loading in another preview panel could be next good step to make it even more appealing for devs using vega viz libs or altair for charting and data viz prototyping.

i.e. something as simple as just loading vega examples site in another vscode preview panel to alleviate the need to load vega docs in chrome or other browser window:

https://vega.github.io/vega/examples/contour-plot/

cc @domoritz @kanitw & @jheer: your thoughts on this?

The text in the dropdown is slightly offset on macOS. The dropdown also jump when something is selected.

see webview api doc for implementation details:

https://code.visualstudio.com/api/extension-guides/webview

for exploring more refined Vega examples in vscode via famous FT data viz guide:

https://gramener.github.io/visual-vocabulary-vega/

The css probably needs to be adjusted

see vega/vega-lite-api#9

Vega Viewer alpha v. requires absolute urls via https for data refs in spec.

In order to preview Vega examples, you need to change all example data references

  "data": [
    {
      "name": "source",
      "url": "data/cars.json",
      ...
    }
  ]

to published Vega data sets

  "data": [
    {
      "name": "source",
      "url": "https://vega.github.io/vega-datasets/data/cars.json",
      ...
    }
  ]

Same applies to custom Vega/Lite specs you create.

Solution:

Scan Vega spec for relative data url refs, read them from fs and pass that data along with spec json to the webview and vega embed to load and render with custom vega loader that grabs local data injections from vega viewer webview post message for preview refresh

• map new data preview command to [vega.]data.preview & ctrl+alt+d command shortcut
• use this Observable js notebook & https://github.com/fin-hypergrid/core || better yet https://github.com/finos/perspective for that data grid display:

https://observablehq.com/@randomfractals/vega-datasets

@CompuIves hopefully, it's as easy as adding recommended extensions suggestion to your @codesandbox proj. config via standard vscode extensions.json...

https://code.visualstudio.com/docs/editor/extension-gallery#_workspace-recommended-extensions

see https://vega.github.io/vega-lite/docs/concat.html

in order to preview vega spec renders with different themes.

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

and live demos at: https://observablehq.com/@vega/vega-themes-demo

currently data preview panel is restored as vega chart preview on vscode restart.

need to change preview serializer to restore data previews with data grid display web view instead.

since it's unorthodox for vscode commands & a bit distracting

see updated:

https://github.com/vega/vega/tree/master/docs/examples

https://github.com/vega/vega-lite/tree/master/examples/specs

& prior #18 changes for this code update

it's too short with the latest vscode release update and default fonts

for a quick preview of published vega examples, copy and paste to start new vega spec json dev

see release notes: https://github.com/vega/vega-lite/releases/tag/v3.4.0

Based on https://github.com/vega/logos maybe?

and view spec. compositions (facets, repeats, etc.)

see docs on composing layered & multi-view plots:

https://vega.github.io/vega-lite/docs/composition.html

and geo_choropleth.vl.json transform usage example in Vega Viewer ext. or online:

https://vega.github.io/editor/#/examples/vega-lite/geo_choropleth

just another edge case related to #15

currently this extension provides vg.json and vl.json Previews using embedded Vega v4 and Vega-Lite v3 libraries.

Vega dev team, @jheer and @domoritz have been busy with new Vega v5 updates recently.

I'd like to support latest Vega library updates to Preview vega json files created with new features and changes in v5.x. See Vega repo for more info:

https://github.com/vega/vega/releases

Ultimately and ideally as part of this viewer update, load correct vega, vega-lite or vega-embed version for Preview based on the Vega $schema reference provided in vg.json || vl.json spec for backward compatibility and previews of older vega specs.

see RandomFractals/vscode-data-preview#1 fro the full laundry list, ex charts.

there will be no data preview view charts in this vega viewer ext. get data preview ext. if you want auto-gen charts :)

I just don't want to confuse devs with perspectiveJS lib charts on top of all the vega charts and examples this ext. packs

see: https://code.visualstudio.com/docs/editor/userdefinedsnippets

If I load local data on the top-level of a spec it works fine, but if "data" appears somewhere else it doesn't work.
For example this works

{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "data": {
    "url": "myfile.csv"
    },
    "Rest of specification"
}

While this doesn't

{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "layer": [
    {
      "data": {
      "url": "myfile.csv"
      },
      "Rest of specification"
}

The header moves when I side-scroll a large chart. I think the header should stay in place.

this is already set up in extension.ts workspace.onDidChangeTextDocument event handler, but I disabled it for alpha.

If updating preview on json spec save is not sufficient I can enable this feature in the next viewer release by adding some 1 min or so timer (configurable to your liking) for that whole json parser and render process not to fire on every char change (why I disabled it for now)

After save:

But when I close preview and open it again, it updates:

Currently, vega Preview option is displayed in explorer and editor menus for all .json files.

Desired:

Restrict this to .vega, .vg.json, .vl.json, .vg, and .vl files only to avoid polluting vscode menus for other json files with invalid vega Preview command menu option.

Solution:

Use the following when clause for those menu items:

resourceFilename =~ /.*\\.(vega|vg.json|vl.json|vg|vl)/

or

resourceExtname =~ /.(vega|vg.json|vl.json|vg|vl)/

I am trying to use the data viewer but nothing happens when I select a dataset in the dropdown.

Maybe I'm also misunderstanding this feature.

for testing older vega specs with this extension

literally, the only supported data formats type missing in this ext. for prototying vega charts offline and in code.

I'll add it if devs using Vega Viewer vote on it. I doubt there are many or any using both tech stacks, even tho I like arrow data format a lot!

see this repo for more info: https://github.com/vega/vega-loader-arrow

see release notes: https://github.com/vega/vega-lite/releases/tag/v3.2.0

and updated examples:

vega/vega-lite@v3.1.0...v3.2.0

for devs not using vscode to preview and share vega specs online

Somewhat related: I tried to start a local http server and included
"url": "http://127.0.0.1:8000/myfile.csv"
This also doesn't work, but it doesn't say "myfile.csv not found"

Originally posted by @Corvince in #15 (comment)

gonna wait for some feedback from vega charts devs before I add vega-lite examples.

Originally posted by @RandomFractals in #4 (comment)