https://github.com/observablehq/vega

Convenience methods for using Vega and Vega-Lite in Observable.
https://github.com/observablehq/vega

Last synced: about 2 months ago
JSON representation

Convenience methods for using Vega and Vega-Lite in Observable.

• Host: GitHub
• URL: https://github.com/observablehq/vega
• Owner: observablehq
• Created: 2017-12-06T17:49:10.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2020-04-16T04:08:13.000Z (over 4 years ago)
• Last Synced: 2024-07-27T02:21:12.807Z (about 2 months ago)
• Language: JavaScript
• Homepage: https://observablehq.com
• Size: 6.84 KB
• Stars: 42
• Watchers: 6
• Forks: 7
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-starred - observablehq/vega - Convenience methods for using Vega and Vega-Lite in Observable. (others)

README

        
# @observablehq/vega

Convenience methods for using [Vega](https://github.com/vega/vega) and [Vega-Lite](https://github.com/vega/vega-lite) in [Observable](https://observablehq.com). See this notebook for examples:

https://beta.observablehq.com/@mbostock/exploring-data-with-vega-lite

To load Vega-Lite:

```js

vegalite = require("@observablehq/[email protected]")

```

To display a happy little chart:

```js

vegalite({

  data: {

    values: [

      {a: "A", b: 28}, {a: "B", b: 55}, {a: "C", b: 43},

      {a: "D", b: 91}, {a: "E", b: 81}, {a: "F", b: 53},

      {a: "G", b: 19}, {a: "H", b: 87}, {a: "I", b: 52}

    ]

  },

  mark: "bar",

  encoding: {

    x: {field: "a", type: "ordinal"},

    y: {field: "b", type: "quantitative"}

  }

})

```

Or to load data with D3 and then display with Vega-Lite:

```js

d3 = require("d3-fetch@1")

```

```js

data = d3.csv("https://vega.github.io/vega-lite/data/seattle-weather.csv")

```

```js

vegalite({

  data: {values: data},

  mark: "tick",

  encoding: {

    x: {field: "precipitation", type: "quantitative"}

  }

})

```