https://github.com/idyll-lang/idyll-vega-lite

Idyll wrapper component for vega lite
https://github.com/idyll-lang/idyll-vega-lite

Last synced: 14 days ago
JSON representation

Idyll wrapper component for vega lite

• Host: GitHub
• URL: https://github.com/idyll-lang/idyll-vega-lite
• Owner: idyll-lang
• License: mit
• Created: 2017-06-11T22:05:17.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T05:25:24.000Z (over 1 year ago)
• Last Synced: 2024-10-30T00:55:00.624Z (21 days ago)
• Language: JavaScript
• Homepage: https://idyll-lang.github.io/examples/csv/
• Size: 218 KB
• Stars: 7
• Watchers: 4
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# idyll-vega-lite

Idyll wrapper component for vega lite

## Usage

```

$ npm install --save idyll-vega-lite

```

In your Idyll markup,

```

[IdyllVegaLite data:myDataset spec:`{

  mark: "line",

  encoding: {

    x: {

      field: ...,

      type: ...

    },

    y: {

      field: ...,

      type: ...

    }

  }

}` /]

```

To use with a `vega` specification, set the mode to `vega` and do not pass the

data as a separate parameter:

```

[IdyllVegaLite mode:"vega" spec:`{

   ...

   data: { ... },

   ...

}` /]

```

See https://idyll-lang.github.io/examples/csv/ for example usage.

## Troubleshooting & Tips

### Syntax Errors

Depending on your environment, you may see errors when trying to compile an Idyll document

that depends on this library. In this case, you can compile using the `compileLibs` option

to apply all code transformations to the vega dependencies as well, which will make them

compatible with the rest of the build system:

```

$ idyll --compileLibs

```

or specify in `package.json` with:

```

"idyll": {

  "compileLibs": true

}

```

This option will cause the initial compile time to be slower, but after the first run

the results are cached and so it should be quicker on subsequent compilation.

### Aliasing

For more readable code, set an alias for the component name:

```

[Plot

  data:myDataset

  spec:`{

    mark: "line",

    encoding: {

      x: {

        field: ...,

        type: ...

      },

      y: {

        field: ...,

        type: ...

      }

    }

  }`

/]

```

by updating the `idyll.alias` property in `package.json`:

```

"idyll": {

  ...,

  "alias": {

    "Plot": "IdyllVegaLite"

  }

}

```

## Contributors

- Matthew Conlen (https://github.com/mathisonian)

- Dan Marshall (https://github.com/danmarshall)