This example shows the files required to embed a Vega-Lite graphic in a web page. Further information can be found here: https://vega.github.io/vega-lite/usage/embed.html.
Contains data derived from speedofanimals.com.
license: cc-by-4.0 | |
height: 300 | |
scrolling: no | |
border: yes |
This example shows the files required to embed a Vega-Lite graphic in a web page. Further information can be found here: https://vega.github.io/vega-lite/usage/embed.html.
Contains data derived from speedofanimals.com.
{ | |
"width": 300, | |
"title": {"text": "Top speeds of selected land animals"}, | |
"data": { | |
"values": [ | |
{"animal": "Cheetah", "kph": 120}, | |
{"animal": "Domestic Cat", "kph": 48}, | |
{"animal": "Elephant", "kph": 40}, | |
{"animal": "Giraffe", "kph": 52}, | |
{"animal": "Horse", "kph": 88}, | |
{"animal": "Ostrich", "kph": 70}, | |
{"animal": "Pig", "kph": 17.7}, | |
{"animal": "Polar Bear", "kph": 30}, | |
{"animal": "Rabbit", "kph": 48}, | |
{"animal": "Squirrel", "kph": 20} | |
] | |
}, | |
"transform": [{"calculate": "datum.kph*0.62137", "as": "mph"}], | |
"mark": "bar", | |
"encoding": { | |
"x": { | |
"field": "mph", | |
"type": "quantitative", | |
"axis": {"title": "Speed (mph)"} | |
}, | |
"y": { | |
"field": "animal", | |
"type": "nominal", | |
"sort": {"field": "mph", "op": "average", "order": "descending"}, | |
"axis": {"title": null} | |
}, | |
"color": {"value": "#fc6721"}, | |
"opacity": {"value": 0.7}, | |
"tooltip": [ | |
{"field": "animal", "type": "nominal", "title": "Animal"}, | |
{ | |
"field": "mph", | |
"type": "quantitative", | |
"title": "Speed", | |
"format": ".1f" | |
} | |
] | |
} | |
} |
<!DOCTYPE html> | |
<html> | |
<head> | |
<script src="https://cdn.jsdelivr.net/npm/vega@4.4.0"></script> | |
<script src="https://cdn.jsdelivr.net/npm/vega-lite@2.6.0"></script> | |
<script src="https://cdn.jsdelivr.net/npm/vega-embed@3.24.2"></script> | |
</head> | |
<body> | |
<div id="vis"></div> | |
<script type="text/javascript"> | |
vegaEmbed('#vis', "bar_chart.vl.json", {defaultStyle: true}).catch(console.warn); | |
</script> | |
</body> | |
</html> |