Bu, VegaChart'ın kullanıldığı bir örnek grubudur. VegaChart'la kullanılabilen çok sayıda Vega Örneği ve Vega-Lite Örneği bulabilirsiniz.
Vega ile VegaChart Örnekleri
Heatmap Örneği
VegaChart, her hücre için basit rect
işaretleri kullanarak Isı Haritası çizebilir.
(Orijinal örnek)
Bu örnekteki sıcaklık verileri, bir csv dosyasından aşağıdaki "veriler" spesifikasyonu kullanılarak yüklenir.
"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>
Volkano Kontur Örneği
VegaChart, icocontour
dönüşümünü kullanarak bir Yanardağ Kontur grafiği çizebilir.
(Orijinal örnek)
Yanardağ verileri, bir "json" dosyasından aşağıdaki "data" (veriler) spesifikasyonu kullanılarak yüklenir.
"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 Örneği
VegaChart, force
dönüştürmesini kullanarak BeeSwarm grafiği çizebilir.
(Orijinal örnek)
<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>
Radar Grafik Örneği
VegaChart, üç küçük Radar Grafik çizmek için kullanılabilir. (Benzer bir radar grafiğin orijinal örneği)
<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 ile VegaChart Örnekleri
Heatmap with Marginal Histogramları Örnek
VegaChart, her eksende histogramları içeren bir Isı haritası çizebilir. (Orijinal örnek: Marjinal Histogramlar)
<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>
Dizi Oluşturma Aracı Örneği
VegaChart bir dizi oluşturma aracıyla veri oluşturabilir. (Orijinal örnek: Dizi Oluşturma Aracı ile Sinüs ve Kosinüs Eğrileri Çizme)
<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>
Dairesel Alan Örnek
VegaChart, radyal bir çizgide verilerin birden çok boyutunu aktarmak için açısal ve radyal kapsam kullanabilir. (Orijinal örnek: Radyal Grafik)
<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>