Este es un conjunto de ejemplos del uso de VegaChart. Puedes encontrar muchos más ejemplos de Vega y ejemplos de Vega-Lite que se pueden usar con VegaChart.
Ejemplos de VegaChart con Vega
Ejemplo de mapa de calor
VegaChart puede dibujar un mapa de calor con marcas rect simples para cada celda.
(Ejemplo original)
En este ejemplo, los datos de temperatura se cargan desde un archivo CSV, con la siguiente especificación “datos”.
"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>
Ejemplo del contorno del volcán
VegaChart puede dibujar un gráfico de contorno del volcán con la transformación icocontour.
(Ejemplo original)
En este ejemplo, los datos del volcán se cargan desde un archivo JSON, con la siguiente especificación “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>
Ejemplo de BeeSwarm
VegaChart puede dibujar un gráfico de BeeSwarm con la transformación force.
(Ejemplo original)
<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>
Ejemplo de gráfico radial
VegaChart se puede usar para dibujar tres gráficos radiales pequeños. (Ejemplo original de un gráfico radial similar).
<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>
Ejemplos de VegaChart con Vega-Lite
Ejemplo de mapa de calor con histogramas marginales
VegaChart puede dibujar un mapa de calor con histogramas en cada eje. (Ejemplo original: Histogramas marginales)
<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>
Ejemplo de generador de secuencias
VegaChart puede generar datos con un generador de secuencias. (Ejemplo original: Cómo dibujar curvas sinuso y coseno con el generador de secuencias)
<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>
Ejemplo de gráfico radial
VegaChart puede usar la extensión angular y radial para transmitir varias dimensiones de datos en un diagrama radial. (Ejemplo original: Trama radial).
<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>