https://github.com/shixiongfei/vega-plot
Display the vega-lite charts in the window.
https://github.com/shixiongfei/vega-plot
charts plot vega vega-lite
Last synced: 6 months ago
JSON representation
Display the vega-lite charts in the window.
- Host: GitHub
- URL: https://github.com/shixiongfei/vega-plot
- Owner: shixiongfei
- License: apache-2.0
- Created: 2023-11-09T14:28:15.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-08-13T15:55:29.000Z (about 1 year ago)
- Last Synced: 2025-03-20T21:38:49.890Z (7 months ago)
- Topics: charts, plot, vega, vega-lite
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/vega-plot
- Size: 490 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vega-plot
[](https://www.npmjs.com/package/vega-plot)
Display the vega-lite charts in the window.
### Example
```javascript
import { plot } from "vega-plot";
plot({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
description: "A simple bar chart with embedded data.",
width: 400,
height: 300,
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" },
tooltip: [
{ field: "a", type: "ordinal" },
{ field: "b", type: "quantitative" },
],
},
});
plot({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
description: "Plots two functions using a generated sequence.",
width: 300,
height: 150,
data: {
sequence: {
start: 0,
stop: 12.7,
step: 0.1,
as: "x",
},
},
transform: [
{ calculate: "sin(datum.x)", as: "sin(x)" },
{ calculate: "cos(datum.x)", as: "cos(x)" },
{ fold: ["sin(x)", "cos(x)"] },
],
mark: "line",
encoding: {
x: { type: "quantitative", field: "x" },
y: { field: "value", type: "quantitative" },
color: { field: "key", type: "nominal", title: null },
},
});
```