42 lines
5.1 KiB
HTML
42 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
#vis.vega-embed {
|
|
width: 100%;
|
|
display: flex;
|
|
}
|
|
|
|
#vis.vega-embed details,
|
|
#vis.vega-embed details summary {
|
|
position: relative;
|
|
}
|
|
</style>
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega@6"></script>
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega-lite@6.1.0"></script>
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega-embed@7"></script>
|
|
</head>
|
|
<body>
|
|
<div id="vis"></div>
|
|
<script>
|
|
(function(vegaEmbed) {
|
|
var spec = {"usermeta": {"embedOptions": {"theme": "dark"}}, "config": {"view": {"continuousWidth": 300, "continuousHeight": 300}, "axis": {"grid": true, "labelFont": "Segoe UI Variable", "labelFontSize": 16, "labelFontWeight": 400, "titleFont": "Segoe UI Variable", "titleFontSize": 18, "titleFontWeight": 600}, "title": {"anchor": "middle", "font": "Segoe UI Variable", "fontSize": 20, "fontWeight": 600}}, "data": {"name": "data-c399e6589132909c5df1d6122ea515c8"}, "mark": {"type": "bar", "cornerRadius": 6, "width": 35}, "background": "#00000000", "encoding": {"color": {"field": "\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0430\u043a\u0430\u0437\u043e\u0432_str", "legend": null, "type": "nominal"}, "tooltip": [{"field": "\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0430\u043a\u0430\u0437\u043e\u0432_str", "type": "nominal"}, {"field": "\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432", "type": "quantitative"}], "x": {"field": "\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0430\u043a\u0430\u0437\u043e\u0432_str", "sort": null, "title": "\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0430\u043a\u0430\u0437\u043e\u0432", "type": "nominal"}, "y": {"field": "\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432", "title": "\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432", "type": "quantitative"}}, "height": 400, "padding": 50, "title": "\u0420\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043f\u043e \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438: TRANSPORT", "width": 600, "$schema": "https://vega.github.io/schema/vega-lite/v6.1.0.json", "datasets": {"data-c399e6589132909c5df1d6122ea515c8": [{"\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0430\u043a\u0430\u0437\u043e\u0432": 0, "\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432": 112318, "\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0430\u043a\u0430\u0437\u043e\u0432_str": "0"}, {"\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0430\u043a\u0430\u0437\u043e\u0432": 1, "\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432": 5516, "\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0430\u043a\u0430\u0437\u043e\u0432_str": "1"}, {"\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0430\u043a\u0430\u0437\u043e\u0432": 2, "\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432": 311, "\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0430\u043a\u0430\u0437\u043e\u0432_str": "2"}, {"\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0430\u043a\u0430\u0437\u043e\u0432": 3, "\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432": 35, "\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0430\u043a\u0430\u0437\u043e\u0432_str": "3"}, {"\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0430\u043a\u0430\u0437\u043e\u0432": 4, "\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432": 8, "\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0430\u043a\u0430\u0437\u043e\u0432_str": "4"}, {"\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0430\u043a\u0430\u0437\u043e\u0432": 5, "\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432": 1, "\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0430\u043a\u0430\u0437\u043e\u0432_str": "5"}]}};
|
|
var embedOpt = {"mode": "vega-lite"};
|
|
|
|
function showError(el, error){
|
|
el.innerHTML = ('<div style="color:red;">'
|
|
+ '<p>JavaScript Error: ' + error.message + '</p>'
|
|
+ "<p>This usually means there's a typo in your chart specification. "
|
|
+ "See the javascript console for the full traceback.</p>"
|
|
+ '</div>');
|
|
throw error;
|
|
}
|
|
const el = document.getElementById('vis');
|
|
vegaEmbed("#vis", spec, embedOpt)
|
|
.catch(error => showError(el, error));
|
|
})(vegaEmbed);
|
|
|
|
</script>
|
|
</body>
|
|
</html> |