Ecco una serie di esempi di utilizzo di VegaChart. Puoi trovare molti altri esempi di Vega ed esempi di Vega-Lite che possono essere utilizzati con VegaChart.
Esempi di VegaChart con Vega
Esempio di mappa termica
VegaChart può disegnare una mappa termica utilizzando semplici segni rect per ogni cella.
(Esempio originale)
In questo esempio, i dati sulla temperatura vengono caricati da un file CSV utilizzando la seguente specifica "Dati".
"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>
Esempio di contorno del vulcano
VegaChart può disegnare un grafico di contorno del vulcano utilizzando la trasformazione icocontour.
(Esempio originale)
In questo esempio, i dati del vulcano vengono caricati da un file json, utilizzando la seguente specifica "Dati".
"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>
Esempio di BeeSwarm
VegaChart può disegnare un grafico BeeSwarm utilizzando la trasformazione force.
(Esempio originale)
<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>
Esempio di grafico radar
VegaChart può essere utilizzato per disegnare tre piccoli grafici radar. (Esempio originale di grafico radar simile)
<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>
Esempi di VegaChart con Vega-Lite
Esempio di mappa termica con istogrammi marginali
VegaChart può disegnare una mappa termica con istogrammi lungo ciascun asse. (Esempio originale: istogrammi marginali)
<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>
Esempio di generatore di sequenze
VegaChart può generare dati con un generatore di sequenze. (Esempio originale: disegnare curve sinusoidali e coseno con il generatore di sequenze)
<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>
Esempio di grafico radiale
VegaChart può utilizzare l'estensione angolare e radiale per trasmettere più dimensioni di dati in un grafico radiale. (Esempio originale: grafico radiale)
<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>