هذه مجموعة من الأمثلة لاستخدام VegaChart. يمكنك العثور على المزيد من أمثلة Vega و Vega-Lite الأمثلة التي يمكن استخدامها مع VegaChart.
أمثلة على VegaChart مع Vega
مثال على التمثيل اللوني
يمكن أن ترسم 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 رسم مخطط BeeSwarm باستخدام تحويل force
.
(مثال أصلي)
<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>
أمثلة على VegaChart مع Vega-Lite
خريطة التمثيل اللوني مع المدرّجات التكرارية الهامشية مثال
يمكن أن ترسم 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>