VegaChart 예시

다음은 VegaChart를 사용하는 예시입니다. VegaChart와 함께 사용할 수 있는 더 많은 Vega 예시와 Vega-Lite 예시가 있습니다.

Vega를 사용한 VegaChart의 예

히트맵 예

VegaChart는 각 셀에 간단한 rect 표시를 사용하여 히트맵을 그릴 수 있습니다. (원본 예시)

이 예에서 온도 데이터는 다음 '데이터' 사양을 사용하여 csv 파일에서 로드됩니다.

  "data": [
    {
      "name": "temperature",
      "url": "https://vega.github.io/editor/data/seattle-temps.csv"
      ...
    }
  ]


<html>
  <head>
    <script src='https://www.gstatic.com/charts/loader.js'></script>
    <script>
      google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart);

      function drawChart() {
        // A DataTable is required, but it can be empty.
        const dataTable = new google.visualization.DataTable();

        const options = {
          'vega': {
            "$schema": "https://vega.github.io/schema/vega/v5.json",
            "width": 500,
            "height": 500,
            "padding": 5,

            "title": {
              "text": "Seattle Annual Temperatures",
              "anchor": "middle",
              "fontSize": 16,
              "frame": "group",
              "offset": 4
            },

            "data": [
              {
                "name": "temperature",
                "url": "https://vega.github.io/vega/data/seattle-weather-hourly-normals.csv",
                "format": {"type": "csv", "parse": {"temperature": "number", "date": "date"}},
                "transform": [
                  {
                    "type": "formula", "as": "hour",
                    "expr": "hours(datum.date)"
                  },
                  {
                    "type": "formula", "as": "day",
                    "expr": "datetime(year(datum.date), month(datum.date), date(datum.date))"
                  }
                ]
              }
            ],

            "scales": [
              {
                "name": "x",
                "type": "time",
                "domain": {"data": "temperature", "field": "day"},
                "range": "width"
              },
              {
                "name": "y",
                "type": "band",
                "domain": [
                  6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
                  0, 1, 2, 3, 4, 5
                ],
                "range": "height"
              },
              {
                "name": "color",
                "type": "linear",
                "range": {"scheme": "redyellowblue"},
                "domain": {"data": "temperature", "field": "temperature"},
                "reverse": true,
                "zero": false, "nice": true
              }
            ],

            "axes": [
              {"orient": "bottom", "scale": "x", "domain": false, "title": "Month", "format": "%b"},
              {
                "orient": "left", "scale": "y", "domain": false, "title": "Hour",
                "encode": {
                  "labels": {
                    "update": {
                      "text": {
                        "signal": "datum.value === 0 ? 'Midnight' : datum.value === 12 ? 'Noon' : datum.value < 12 ? datum.value + ':00 am' : (datum.value - 12) + ':00 pm'"
                      }
                    }
                  }
                }
              }
            ],

            "legends": [
              {
                "fill": "color",
                "type": "gradient",
                "title": "Avg. Temp (°F)",
                "titleFontSize": 12,
                "titlePadding": 4,
                "gradientLength": {"signal": "height - 16"}
              }
            ],

            "marks": [
              {
                "type": "rect",
                "from": {"data": "temperature"},
                "encode": {
                  "enter": {
                    "x": {"scale": "x", "field": "day"},
                    "y": {"scale": "y", "field": "hour"},
                    "width": {"value": 5},
                    "height": {"scale": "y", "band": 1},
                    "tooltip": {
                      "signal":
                        "timeFormat(datum.date, '%b %d %I:00 %p') + ': ' + datum.temperature + '°'"
                    }
                  },
                  "update": {
                    "fill": {"scale": "color", "field": "temperature"}
                  }
                }
              }
            ]
          }
        };

        const chart = new google.visualization.VegaChart(document.getElementById('chart-div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>

  <body>
    <div id="chart-div" style="width: 500px; height: 500px;"></div>
  </body>

</html>

화산 윤곽 예

VegaChart는 icocontour 변환을 사용하여 화산 윤곽 차트를 그릴 수 있습니다. (원본 예시)

이 예시에서 화산 데이터는 다음 '데이터' 사양을 사용하여 json 파일에서 로드됩니다.

  "data": [
    {
      "name": "volcano",
      "url": "https://vega.github.io/editor/data/volcano.json"
    }
  ]


<html>
  <head>
    <script src='https://www.gstatic.com/charts/loader.js'></script>
    <script>
      google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart);

      function drawChart() {
        const dataTable = new google.visualization.DataTable();
        const options = {
          'vega': {
            "$schema": "https://vega.github.io/schema/vega/v5.json",
            "width": 600,
            "autosize": "none",

            "signals": [
              {
                "name": "grid",
                "init": "data('volcano')[0]"
              },
              {
                "name": "height",
                "update": "round(grid.height * width / grid.width)"
              },
              {
                "name": "smooth", "value": true,
                "bind": {"input": "radio", "options": [true, false]}
              }
            ],

            "data": [
              {
                "name": "volcano",
                "url": "https://vega.github.io/editor/data/volcano.json"
              },
              {
                "name": "contours",
                "source": "volcano",
                "transform": [
                  {
                    "type": "isocontour",
                    "scale": {"expr": "width / datum.width"},
                    "smooth": {"signal": "smooth"},
                    "thresholds": {"signal": "sequence(90, 195, 5)"}
                  }
                ]
              }
            ],

            "scales": [
              {
                "name": "color",
                "type": "linear",
                "domain": [90, 190],
                "range": {"scheme": "blueorange"}
              }
            ],

            "marks": [
              {
                "type": "path",
                "from": {"data": "contours"},
                "encode": {
                  "enter": {
                    "stroke": {"value": "#ccc"},
                    "strokeWidth": {"value": 1},
                    "fill": {"scale": "color", "field": "contour.value"}
                  }
                },
                "transform": [
                  {
                    "type": "geopath",
                    "field": "datum.contour"
                  }
                ]
              }
            ]
          }
      };

        const chart = new google.visualization.VegaChart(document.getElementById('chart-div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>

  <body>
    <div id="chart-div" style="width: 500px; height: 500px;"></div>
  </body>

</html>

BeeSwarm 예

VegaChart는 force 변환을 사용하여 BeeSwarm 차트를 그릴 수 있습니다. (원본 예시)


 
<html>
  <head>
    <script src='https://www.gstatic.com/charts/loader.js'></script>
    <script>
      google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart);

      function drawChart() {
        const dataTable = new google.visualization.DataTable();
        const options = {
          'vega': {
            "$schema": "https://vega.github.io/schema/vega/v5.json",
            "width": 600,
            "height": 100,
            "padding": {"left": 5, "right": 5, "top": 0, "bottom": 20},
            "autosize": "none",

            "signals": [
              { "name": "cx", "update": "width / 2" },
              { "name": "cy", "update": "height / 2" },
              { "name": "radius", "value": 8, "bind": {"input": "range", "min": 2, "max": 15, "step": 1} },
              { "name": "collide", "value": 1, "bind": {"input": "range", "min": 1, "max": 10, "step": 1} },
              { "name": "gravityX", "value": 0.2, "bind": {"input": "range", "min": 0, "max": 1} },
              { "name": "gravityY", "value": 0.1, "bind": {"input": "range", "min": 0, "max": 1} },
              { "name": "static", "value": true, "bind": {"input": "checkbox"} }
            ],

            "data": [
              {
                "name": "people",
                "url": "https://vega.github.io/editor/data/miserables.json",
                "format": {"type": "json", "property": "nodes"}
              }
            ],

            "scales": [
              {
                "name": "xscale",
                "type": "band",
                "domain": {
                  "data": "people",
                  "field": "group",
                  "sort": true
                },
                "range": "width"
              },
              {
                "name": "color",
                "type": "ordinal",
                "domain": {"data": "people", "field": "group"},
                "range": {"scheme": "category20c"}
              }
            ],

            "axes": [
              { "orient": "bottom", "scale": "xscale" }
            ],

            "marks": [
              {
                "name": "nodes",
                "type": "symbol",
                "from": {"data": "people"},
                "encode": {
                  "enter": {
                    "fill": {"scale": "color", "field": "group"},
                    "xfocus": {"scale": "xscale", "field": "group", "band": 0.5},
                    "yfocus": {"signal": "cy"}
                  },
                  "update": {
                    "size": {"signal": "pow(2 * radius, 2)"},
                    "stroke": {"value": "white"},
                    "strokeWidth": {"value": 1},
                    "zindex": {"value": 0}
                  },
                  "hover": {
                    "stroke": {"value": "purple"},
                    "strokeWidth": {"value": 3},
                    "zindex": {"value": 1}
                  }
                },
                "transform": [
                  {
                    "type": "force",
                    "iterations": 300,
                    "static": {"signal": "static"},
                    "forces": [
                      {"force": "collide", "iterations": {"signal": "collide"}, "radius": {"signal": "radius"}},
                      {"force": "x", "x": "xfocus", "strength": {"signal": "gravityX"}},
                      {"force": "y", "y": "yfocus", "strength": {"signal": "gravityY"}}
                    ]
                  }
                ]
              }
            ]
          }
        };

        const chart = new google.visualization.VegaChart(document.getElementById('chart-div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>

  <body>
    <div id="chart-div" style="width: 700px; height: 250px;"></div>
  </body>

</html>

방사형 차트의 예

VegaChart를 사용해 세 개의 작은 방사형 차트를 그릴 수 있습니다. (유사한 방사형 차트의 원본 예)


 
<html>
  <head>
    <title>Radar Chart Small Multiples</title>
    <script src='https://www.gstatic.com/charts/loader.js'></script>
    <script>
      google.charts.load('upcoming', {'packages': ['vegachart']}).then(loadCharts);

      const lasagna = [
        ["Protein",0.1308,"Lasagna, cheese, frozen, prepared"],
        ["Carbohydrates",0.05032727272727273,"Lasagna, cheese, frozen, prepared"],
        ["Vitamin C",0.228,"Lasagna, cheese, frozen, prepared"],
        ["Calcium",0.08538461538461538,"Lasagna, cheese, frozen, prepared"],
        ["Zinc",0.11375,"Lasagna, cheese, frozen, prepared"],
        ["Sodium",0.18933333333333333,"Lasagna, cheese, frozen, prepared"]
      ];

      const pork = [
        ["Protein",0.2638,"Pulled pork in barbecue sauce"],
        ["Carbohydrates",0.06814545454545454,"Pulled pork in barbecue sauce"],
        ["Vitamin C",0.002666666666666667,"Pulled pork in barbecue sauce"],
        ["Calcium",0.033846153846153845,"Pulled pork in barbecue sauce"],
        ["Zinc",0.23125,"Pulled pork in barbecue sauce"],
        ["Sodium",0.444,"Pulled pork in barbecue sauce"]
      ];

      const melon = [
        ["Protein",0.0168,"Melons, cantaloupe, raw"],
        ["Carbohydrates",0.029672727272727274,"Melons, cantaloupe, raw"],
        ["Vitamin C",0.4893333333333334,"Melons, cantaloupe, raw"],
        ["Calcium",0.006923076923076923,"Melons, cantaloupe, raw"],
        ["Zinc",0.0225,"Melons, cantaloupe, raw"],
        ["Sodium",0.010666666666666666,"Melons, cantaloupe, raw"]
      ];

      function loadCharts() {
        addChart(lasagna[0][2], lasagna, "#B82E2E");
        addChart(pork[0][2], pork, "#6633CC");
        addChart(melon[0][2], melon, "#109618");
      };

      function addChart(title, data, color) {
        const dataTable = new google.visualization.DataTable();
        dataTable.addColumn({type: 'string', 'id': 'key'});
        dataTable.addColumn({type: 'number', 'id': 'value'});
        dataTable.addColumn({type: 'string', 'id': 'category'});
        dataTable.addRows(data);

        const options = {
          'vega': {
            "$schema": "https://vega.github.io/schema/vega/v5.json",
            "width": 250,
            "height": 300,
            "autosize": "none",
            "title": {
              "text": title,
              "anchor": "middle",
              "fontSize": 14,
              "dy": -8,
              "dx": {"signal": "-width/4"},
              "subtitle": "RDI per 100g"
            },
            "signals": [
              {"name": "radius", "update": "90"}
            ],
            "data": [
              {
                "name": "table",
                "source": "datatable",
              },
              {
                "name": "keys",
                "source": "table",
                "transform": [
                  {
                    "type": "aggregate",
                    "groupby": ["key"]
                  }
                ]
              }
            ],
            "scales": [
              {
                "name": "angular",
                "type": "point",
                "range": {"signal": "[-PI, PI]"},
                "padding": 0.5,
                "domain": {"data": "table", "field": "key"}
              },
              {
                "name": "radial",
                "type": "linear",
                "range": {"signal": "[0, radius]"},
                "zero": true,
                "nice": false,
                "domain": [0,0.5],
              }
            ],
            "encode": {
              "enter": {
                "x": {"signal": "width/2"},
                "y": {"signal": "height/2 + 20"}
              }
            },
            "marks": [
              {
                "type": "group",
                "name": "categories",
                "zindex": 1,
                "from": {
                  "facet": {"data": "table", "name": "facet", "groupby": ["category"]}
                },
                "marks": [
                  {
                    "type": "line",
                    "name": "category-line",
                    "from": {"data": "facet"},
                    "encode": {
                      "enter": {
                        "interpolate": {"value": "linear-closed"},
                        "x": {"signal": "scale('radial', datum.value) * cos(scale('angular', datum.key))"},
                        "y": {"signal": "scale('radial', datum.value) * sin(scale('angular', datum.key))"},
                        "stroke": {"value": color},
                        "strokeWidth": {"value": 1.5},
                        "fill": {"value": color},
                        "fillOpacity": {"value": 0.1}
                      }
                    }
                  },
                  {
                    "type": "text",
                    "name": "value-text",
                    "from": {"data": "category-line"},
                    "encode": {
                      "enter": {
                        "x": {"signal": "datum.x + 14 * cos(scale('angular', datum.datum.key))"},
                        "y": {"signal": "datum.y + 14 * sin(scale('angular', datum.datum.key))"},
                        "text": {"signal": "format(datum.datum.value,'.1%')"},
                        "opacity": {"signal": "datum.datum.value > 0.01 ? 1 : 0"},
                        "align": {"value": "center"},
                        "baseline": {"value": "middle"},
                        "fontWeight": {"value": "bold"},
                        "fill": {"value": color},
                      }
                    }
                  }
                ]
              },
              {
                "type": "rule",
                "name": "radial-grid",
                "from": {"data": "keys"},
                "zindex": 0,
                "encode": {
                  "enter": {
                    "x": {"value": 0},
                    "y": {"value": 0},
                    "x2": {"signal": "radius * cos(scale('angular', datum.key))"},
                    "y2": {"signal": "radius * sin(scale('angular', datum.key))"},
                    "stroke": {"value": "lightgray"},
                    "strokeWidth": {"value": 1}
                  }
                }
              },
              {
                "type": "text",
                "name": "key-label",
                "from": {"data": "keys"},
                "zindex": 1,
                "encode": {
                  "enter": {
                    "x": {"signal": "(radius + 11) * cos(scale('angular', datum.key))"},
                    "y": [
                      {
                        "test": "sin(scale('angular', datum.key)) > 0",
                        "signal": "5 + (radius + 11) * sin(scale('angular', datum.key))"
                      },
                      {
                        "test": "sin(scale('angular', datum.key)) < 0",
                        "signal": "-5 + (radius + 11) * sin(scale('angular', datum.key))"
                      },
                      {
                        "signal": "(radius + 11) * sin(scale('angular', datum.key))"
                      }
                    ],
                    "text": {"field": "key"},
                    "align":
                      {
                        "value": "center"
                      },
                    "baseline": [
                      {
                        "test": "scale('angular', datum.key) > 0", "value": "top"
                      },
                      {
                        "test": "scale('angular', datum.key) == 0", "value": "middle"
                      },
                      {
                        "value": "bottom"
                      }
                    ],
                    "fill": {"value": "black"},
                    "fontSize": {"value": 12}
                  }
                }
              },
              {
                "type": "line",
                "name": "twenty-line",
                "from": {"data": "keys"},
                "encode": {
                  "enter": {
                    "interpolate": {"value": "linear-closed"},
                    "x": {"signal": "0.2 * radius * cos(scale('angular', datum.key))"},
                    "y": {"signal": "0.2 * radius * sin(scale('angular', datum.key))"},
                    "stroke": {"value": "lightgray"},
                    "strokeWidth": {"value": 1}
                  }
                }
              },
              {
                "type": "line",
                "name": "fourty-line",
                "from": {"data": "keys"},
                "encode": {
                  "enter": {
                    "interpolate": {"value": "linear-closed"},
                    "x": {"signal": "0.4 * radius * cos(scale('angular', datum.key))"},
                    "y": {"signal": "0.4 * radius * sin(scale('angular', datum.key))"},
                    "stroke": {"value": "lightgray"},
                    "strokeWidth": {"value": 1}
                  }
                }
              },
              {
                "type": "line",
                "name": "sixty-line",
                "from": {"data": "keys"},
                "encode": {
                  "enter": {
                    "interpolate": {"value": "linear-closed"},
                    "x": {"signal": "0.6 * radius * cos(scale('angular', datum.key))"},
                    "y": {"signal": "0.6 * radius * sin(scale('angular', datum.key))"},
                    "stroke": {"value": "lightgray"},
                    "strokeWidth": {"value": 1}
                  }
                }
              },
              {
                "type": "line",
                "name": "eighty-line",
                "from": {"data": "keys"},
                "encode": {
                  "enter": {
                    "interpolate": {"value": "linear-closed"},
                    "x": {"signal": "0.8 * radius * cos(scale('angular', datum.key))"},
                    "y": {"signal": "0.8 * radius * sin(scale('angular', datum.key))"},
                    "stroke": {"value": "lightgray"},
                    "strokeWidth": {"value": 1}
                  }
                }
              },
              {
                "type": "line",
                "name": "outer-line",
                "from": {"data": "radial-grid"},
                "encode": {
                  "enter": {
                    "interpolate": {"value": "linear-closed"},
                    "x": {"field": "x2"},
                    "y": {"field": "y2"},
                    "stroke": {"value": "lightgray"},
                    "strokeWidth": {"value": 1}
                  }
                }
              }
            ]
          }
        };

        const elem = document.createElement("div");
        elem.setAttribute("style", "display: inline-block; width: 250px; height: 300px; padding: 20px;");

        const chart = new google.visualization.VegaChart(elem);
        chart.draw(dataTable, options);

        document.getElementById("chart-area").appendChild(elem);
      }
    </script>
  </head>

  <body>
    <div id="chart-area"></div>
  </body>
</html>

Vega-Lite가 포함된 VegaChart의 예

한계 히스토그램이 있는 히트맵 예

VegaChart는 각 축을 따라 히스토그램이 있는 히스토그램을 그릴 수 있습니다. (원본 예: 경계 히스토그램)


 
<html>
  <head>
    <script src='https://www.gstatic.com/charts/loader.js'></script>
    <script>
      google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart);

      function drawChart() {
        // A DataTable is required, but it can be empty.
        const dataTable = new google.visualization.DataTable();

        const options = {
          'vegaLite': {
            "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
            "data": {"url": "https://vega.github.io/vega/data/movies.json"},
            "spacing": 15,
            "bounds": "flush",
            "vconcat": [{
              "mark": "bar",
              "height": 60,
              "encoding": {
                "x": {
                  "bin": true,
                  "field": "IMDB Rating",
                  "axis": null
                },
                "y": {
                  "aggregate": "count",
                  "scale": {
                    "domain": [0,1000]
                  },
                  "title": ""
                }
              }
            }, {
              "spacing": 15,
              "bounds": "flush",
              "hconcat": [{
                "mark": "rect",
                "encoding": {
                  "x": {"bin": true, "field": "IMDB Rating"},
                  "y": {"bin": true, "field": "Rotten Tomatoes Rating"},
                  "color": {"aggregate": "count"}
                }
              }, {
                "mark": "bar",
                "width": 60,
                "encoding": {
                  "y": {
                    "bin": true,
                    "field": "Rotten Tomatoes Rating",
                    "axis": null
                  },
                  "x": {
                    "aggregate": "count",
                    "scale": {"domain": [0,1000]},
                    "title": ""
                  }
                }
              }]
            }],
            "config": {
              "view": {
                "stroke": "transparent"
              }
            }
          }
        };

        const chart = new google.visualization.VegaChart(document.getElementById('chart-div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>

  <body>
    <div id="chart-div"></div>
  </body>

</html>

시퀀스 생성기 예

VegaChart는 시퀀스 생성기로 데이터를 생성할 수 있습니다. (원본 예: 시퀀스 생성기로 사인 곡선 및 코사인 곡선 그리기)


 
<html>
  <head>
    <script src='https://www.gstatic.com/charts/loader.js'></script>
    <script>
      google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart);

      function drawChart() {
        // A DataTable is required, but it can be empty.
        const dataTable = new google.visualization.DataTable();

        const options = {
          'vegaLite': {
            "$schema": "https://vega.github.io/schema/vega-lite/v4.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
              }
            }
          }
        };


        const chart = new google.visualization.VegaChart(document.getElementById('chart-div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>

  <body>
    <div id="chart-div" style="width: 500px; height: 300px;"></div>
  </body>

</html>

방사형 플롯 예

VegaChart는 각도 및 방사형 범위를 사용하여 방사형 플롯으로 다양한 크기의 데이터를 전달할 수 있습니다. (원본 예: 방사형 도표)


 
<html>
  <head>
    <script src='https://www.gstatic.com/charts/loader.js'></script>
    <script>
      google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart);

      function drawChart() {
        // A DataTable is required, but it can be empty.
        const dataTable = new google.visualization.DataTable();

        const options = {
          'vegaLite': {
            "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
            "description": "A simple radial chart with embedded data.",
            "data": {
              "values": [12, 23, 47, 6, 52, 19]
            },
            "layer": [
              {
                "mark": {"type": "arc", "innerRadius": 20, "stroke": "#fff"}
              },
              {
                "mark": {"type": "text", "radiusOffset": 10},
                "encoding": {
                  "text": {"field": "data", "type": "quantitative"}
                }
              }],
            "encoding": {
              "theta": {"field": "data", "type": "quantitative", "stack": true},
              "radius": {"field": "data", "scale": {"type": "sqrt", "zero": true, "rangeMin": 20}},
              "color": {"field": "data", "type": "nominal", "legend": null}
            },
            "view": {"stroke": null}
          }
        };

        const chart = new google.visualization.VegaChart(document.getElementById('chart-div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>

  <body>
    <div id="chart-div" style="width: 500px; height: 500px;"></div>
  </body>

</html>