展开
拓展 关闭
订阅号推广码
GitHub
视频
公告栏 关闭

Vega-Lite使用

用法
  • 链接
  • 新建html文件,复制如下
<!doctype html>
<html>
  <head>
    <title>Embedding Vega-Lite</title>
    <script src="https://cdn.jsdelivr.net/npm/vega@5.25.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.16.3"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.22.2"></script>
  </head>
  <body>
    <div id="vis"></div>

    <script type="text/javascript">
      var yourVlSpec = {
        $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
        description: 'A simple bar chart with embedded data.',
        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'}
        }
      };
      vegaEmbed('#vis', yourVlSpec);
    </script>
  </body>
</html>
  • 效果
教程
  • 链接
  • 新建html,复制如下
<!doctype html>
<html>
  <head>
    <title>Vega-Lite Bar Chart</title>
    <meta charset="utf-8" />

    <script src="https://cdn.jsdelivr.net/npm/vega@5.25.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.16.3"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.22.2"></script>

    <style media="screen">
      /* Add space between Vega-Embed links  */
      .vega-actions a {
        margin-right: 5px;
      }
    </style>
  </head>
  <body>
    <!-- <h1>Template for Embedding Vega-Lite Visualization</h1> -->
    <!-- Container for the visualization -->
    <div id="vis"></div>

    <script>
      // Assign the specification to a local variable vlSpec.
      var vlSpec = {
        $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
        data: {
          values: [
            {a: 'C', b: 2},
            {a: 'C', b: 7},
            {a: 'C', b: 4},
            {a: 'D', b: 1},
            {a: 'D', b: 2},
            {a: 'D', b: 6},
            {a: 'E', b: 8},
            {a: 'E', b: 4},
            {a: 'E', b: 7}
          ]
        },
        mark: 'bar',
        encoding: {
          y: {field: 'a', type: 'nominal'},
          x: {
            aggregate: 'average',
            field: 'b',
            type: 'quantitative',
            axis: {
              title: 'Average of b'
            }
          }
        }
      };

      // Embed the visualization in the container with id `vis`
      vegaEmbed('#vis', vlSpec);
    </script>
  </body>
</html>
  • 效果
例子
<!doctype html>
<html>
  <head>
    <title>Embedding Vega-Lite</title>
    <script src="https://cdn.jsdelivr.net/npm/vega@5.25.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.16.3"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.22.2"></script>
  </head>
  <body>
    <div id="vis"></div>

    <script type="text/javascript">
      var yourVlSpec = {
        "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
        "description": "A vertical box plot showing median, min, and max body mass of penguins.",
        "data": {
            // "url": "data/penguins.json"
            // 去vega-datasets中找对应的json文件
            values: [
                {
                    "Species": "Adelie",
                    "Island": "Torgersen",
                    "Beak Length (mm)": 39.1,
                    "Beak Depth (mm)": 18.7,
                    "Flipper Length (mm)": 181,
                    "Body Mass (g)": 3750,
                    "Sex": "MALE"
                },
                {
                    "Species": "Adelie",
                    "Island": "Dream",
                    "Beak Length (mm)": 51.7,
                    "Beak Depth (mm)": 20.3,
                    "Flipper Length (mm)": 194,
                    "Body Mass (g)": 3775,
                    "Sex": "MALE"
                },
                {
                    "Species": "Adelie",
                    "Island": "Biscoe",
                    "Beak Length (mm)": 49.3,
                    "Beak Depth (mm)": 15.7,
                    "Flipper Length (mm)": 217,
                    "Body Mass (g)": 5850,
                    "Sex": "MALE"
                }
            ]
        },
        "mark": {
            "type": "boxplot",
            "extent": "min-max"
        },
        "encoding": {
            "x": {"field": "Species", "type": "nominal"},
            "color": {"field": "Species", "type": "nominal", "legend": null},
            "y": {
            "field": "Body Mass (g)",
            "type": "quantitative",
            "scale": {"zero": false}
            }
        }
      };
      vegaEmbed('#vis', yourVlSpec);
    </script>
  </body>
</html>
  • 效果图
文档
posted @ 2024-01-07 11:52  DogLeftover  阅读(137)  评论(0编辑  收藏  举报