זוהי קבוצה של דוגמאות לשימוש ב-VegaChart. תוכלו למצוא עוד דוגמאות ל-Vega ו-Vega-Lite דוגמאות נוספות ל-VegaChart.
דוגמאות של VegaChart עם Vega
דוגמה למפת חום
VegaChart יכול לשרטט מפת חום באמצעות סימני rect
פשוטים לכל תא.
(דוגמה מקורית)
נתוני הטמפרטורה נטענים בדוגמה הזו מקובץ CSV, תוך שימוש במפרט הבא 'data'.
"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' הבא.
"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>