- Vega-Lite
https://vega.github.io/vega-lite/tutorials/getting_started.html
可以直接HTML
<!DOCTYPE html>
<html>
<head>
<title>Vega-Lite Bar Chart</title>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vega@5.17.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@4.17.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.12.2"></script>
<style media="screen">
/* Add space between Vega-Embed links */
.vega-actions a {
margin-right: 5px;
}
</style>
</head>
<body>
<h1>Template for Embedding Vega-Lite Visualization</h1>
<!-- Container for the visualization -->
<div id="vis"></div>
<script>
// Assign the specification to a local variable vlSpec.
var vlSpec = {
$schema: 'https://vega.github.io/schema/vega-lite/v4.json',
data: {
values: [
{a: 'C', b: 2},
{a: 'C', b: 7},
{a: 'C', b: 4},
{a: 'D', b: 1},
{a: 'D', b: 2},
{a: 'D', b: 6},
{a: 'E', b: 8},
{a: 'E', b: 4},
{a: 'E', b: 7}
]
},
mark: 'bar',
encoding: {
y: {field: 'a', type: 'nominal'},
x: {
aggregate: 'average',
field: 'b',
type: 'quantitative',
axis: {
title: 'Average of b'
}
}
}
};
// Embed the visualization in the container with id `vis`
vegaEmbed('#vis', vlSpec);
</script>
</body>
</html>
- altair
https://altair-viz.github.io/getting_started/overview.html
需要结合python
import altair as alt
from vega_datasets import data
chart = alt.Chart(data.cars.url).mark_point().encode(
x='Horsepower:Q',
y='Miles_per_Gallon:Q',
color='Origin:N'
)
# chart.save('chart.json')
chart.save('chart.png')