42 lines
12 KiB
HTML
42 lines
12 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, "strokeWidth": 0}, "background": "#00000000", "title": {"anchor": "middle", "font": "Segoe UI Variable", "fontSize": 20, "fontWeight": 600}}, "layer": [{"mark": {"type": "rect", "cornerRadius": 6}, "encoding": {"color": {"field": "correlation", "legend": {"gradientLength": 300, "gradientThickness": 20, "labelFont": "Segoe UI Variable", "labelFontSize": 12, "labelFontWeight": 400, "orient": "right", "title": "\u041a\u043e\u0440\u0440\u0435\u043b\u044f\u0446\u0438\u044f", "titleFont": "Segoe UI Variable", "titleFontSize": 14, "titleFontWeight": 600}, "scale": {"domain": [-1, 0, 1], "range": ["#1B3B72", "#FFFFFF", "#198F51"]}, "type": "quantitative"}, "tooltip": [{"field": "variable1", "title": "\u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f 1", "type": "nominal"}, {"field": "variable2", "title": "\u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f 2", "type": "nominal"}, {"field": "correlation", "format": ".3f", "title": "\u041a\u043e\u0440\u0440\u0435\u043b\u044f\u0446\u0438\u044f", "type": "quantitative"}], "x": {"axis": {"labelAngle": -45, "labelFont": "Segoe UI Variable", "labelFontSize": 14, "labelFontWeight": 400}, "field": "variable2", "title": null, "type": "nominal"}, "y": {"axis": {"labelFont": "Segoe UI Variable", "labelFontSize": 14, "labelFontWeight": 400}, "field": "variable1", "title": null, "type": "nominal"}}}, {"mark": {"type": "text", "font": "Segoe UI Variable", "fontSize": 12, "fontWeight": 500}, "encoding": {"color": {"condition": {"test": "(datum.correlation > 0.6)", "value": "white"}, "value": "#757575"}, "text": {"field": "correlation", "format": ".2f", "type": "quantitative"}, "x": {"axis": {"labelAngle": -45, "labelFont": "Segoe UI Variable", "labelFontSize": 14, "labelFontWeight": 400}, "field": "variable2", "title": null, "type": "nominal"}, "y": {"axis": {"labelFont": "Segoe UI Variable", "labelFontSize": 14, "labelFontWeight": 400}, "field": "variable1", "title": null, "type": "nominal"}}}], "data": {"name": "data-475dfc76d31e744c7a8b7d8a2040d8bf"}, "height": 600, "padding": 60, "title": "\u0410\u0432\u0438\u0430\u0431\u0438\u043b\u0435\u0442\u044b + \u043e\u0442\u0435\u043b\u0438", "width": 600, "$schema": "https://vega.github.io/schema/vega-lite/v6.1.0.json", "datasets": {"data-475dfc76d31e744c7a8b7d8a2040d8bf": [{"variable1": "active_imp_hotel", "variable2": "active_imp_hotel", "correlation": 1.0}, {"variable1": "passive_imp_hotel", "variable2": "active_imp_hotel", "correlation": -0.018}, {"variable1": "active_click_hotel", "variable2": "active_imp_hotel", "correlation": 0.608}, {"variable1": "passive_click_hotel", "variable2": "active_imp_hotel", "correlation": 0.01}, {"variable1": "orders_amt_hotel", "variable2": "active_imp_hotel", "correlation": 0.07}, {"variable1": "active_imp_avia", "variable2": "active_imp_hotel", "correlation": 0.06}, {"variable1": "passive_imp_avia", "variable2": "active_imp_hotel", "correlation": -0.057}, {"variable1": "active_click_avia", "variable2": "active_imp_hotel", "correlation": 0.074}, {"variable1": "passive_click_avia", "variable2": "active_imp_hotel", "correlation": 0.047}, {"variable1": "orders_amt_avia", "variable2": "active_imp_hotel", "correlation": 0.216}, {"variable1": "active_imp_hotel", "variable2": "passive_imp_hotel", "correlation": -0.018}, {"variable1": "passive_imp_hotel", "variable2": "passive_imp_hotel", "correlation": 1.0}, {"variable1": "active_click_hotel", "variable2": "passive_imp_hotel", "correlation": 0.015}, {"variable1": "passive_click_hotel", "variable2": "passive_imp_hotel", "correlation": 0.176}, {"variable1": "orders_amt_hotel", "variable2": "passive_imp_hotel", "correlation": 0.002}, {"variable1": "active_imp_avia", "variable2": "passive_imp_hotel", "correlation": -0.126}, {"variable1": "passive_imp_avia", "variable2": "passive_imp_hotel", "correlation": 0.305}, {"variable1": "active_click_avia", "variable2": "passive_imp_hotel", "correlation": -0.05}, {"variable1": "passive_click_avia", "variable2": "passive_imp_hotel", "correlation": 0.057}, {"variable1": "orders_amt_avia", "variable2": "passive_imp_hotel", "correlation": 0.092}, {"variable1": "active_imp_hotel", "variable2": "active_click_hotel", "correlation": 0.608}, {"variable1": "passive_imp_hotel", "variable2": "active_click_hotel", "correlation": 0.015}, {"variable1": "active_click_hotel", "variable2": "active_click_hotel", "correlation": 1.0}, {"variable1": "passive_click_hotel", "variable2": "active_click_hotel", "correlation": 0.035}, {"variable1": "orders_amt_hotel", "variable2": "active_click_hotel", "correlation": 0.03}, {"variable1": "active_imp_avia", "variable2": "active_click_hotel", "correlation": 0.104}, {"variable1": "passive_imp_avia", "variable2": "active_click_hotel", "correlation": -0.008}, {"variable1": "active_click_avia", "variable2": "active_click_hotel", "correlation": 0.185}, {"variable1": "passive_click_avia", "variable2": "active_click_hotel", "correlation": 0.03}, {"variable1": "orders_amt_avia", "variable2": "active_click_hotel", "correlation": 0.058}, {"variable1": "active_imp_hotel", "variable2": "passive_click_hotel", "correlation": 0.01}, {"variable1": "passive_imp_hotel", "variable2": "passive_click_hotel", "correlation": 0.176}, {"variable1": "active_click_hotel", "variable2": "passive_click_hotel", "correlation": 0.035}, {"variable1": "passive_click_hotel", "variable2": "passive_click_hotel", "correlation": 1.0}, {"variable1": "orders_amt_hotel", "variable2": "passive_click_hotel", "correlation": -0.003}, {"variable1": "active_imp_avia", "variable2": "passive_click_hotel", "correlation": 0.027}, {"variable1": "passive_imp_avia", "variable2": "passive_click_hotel", "correlation": 0.008}, {"variable1": "active_click_avia", "variable2": "passive_click_hotel", "correlation": 0.036}, {"variable1": "passive_click_avia", "variable2": "passive_click_hotel", "correlation": 0.186}, {"variable1": "orders_amt_avia", "variable2": "passive_click_hotel", "correlation": 0.054}, {"variable1": "active_imp_hotel", "variable2": "orders_amt_hotel", "correlation": 0.07}, {"variable1": "passive_imp_hotel", "variable2": "orders_amt_hotel", "correlation": 0.002}, {"variable1": "active_click_hotel", "variable2": "orders_amt_hotel", "correlation": 0.03}, {"variable1": "passive_click_hotel", "variable2": "orders_amt_hotel", "correlation": -0.003}, {"variable1": "orders_amt_hotel", "variable2": "orders_amt_hotel", "correlation": 1.0}, {"variable1": "active_imp_avia", "variable2": "orders_amt_hotel", "correlation": 0.018}, {"variable1": "passive_imp_avia", "variable2": "orders_amt_hotel", "correlation": 0.07}, {"variable1": "active_click_avia", "variable2": "orders_amt_hotel", "correlation": 0.028}, {"variable1": "passive_click_avia", "variable2": "orders_amt_hotel", "correlation": 0.132}, {"variable1": "orders_amt_avia", "variable2": "orders_amt_hotel", "correlation": 0.158}, {"variable1": "active_imp_hotel", "variable2": "active_imp_avia", "correlation": 0.06}, {"variable1": "passive_imp_hotel", "variable2": "active_imp_avia", "correlation": -0.126}, {"variable1": "active_click_hotel", "variable2": "active_imp_avia", "correlation": 0.104}, {"variable1": "passive_click_hotel", "variable2": "active_imp_avia", "correlation": 0.027}, {"variable1": "orders_amt_hotel", "variable2": "active_imp_avia", "correlation": 0.018}, {"variable1": "active_imp_avia", "variable2": "active_imp_avia", "correlation": 1.0}, {"variable1": "passive_imp_avia", "variable2": "active_imp_avia", "correlation": 0.019}, {"variable1": "active_click_avia", "variable2": "active_imp_avia", "correlation": 0.656}, {"variable1": "passive_click_avia", "variable2": "active_imp_avia", "correlation": 0.089}, {"variable1": "orders_amt_avia", "variable2": "active_imp_avia", "correlation": -0.045}, {"variable1": "active_imp_hotel", "variable2": "passive_imp_avia", "correlation": -0.057}, {"variable1": "passive_imp_hotel", "variable2": "passive_imp_avia", "correlation": 0.305}, {"variable1": "active_click_hotel", "variable2": "passive_imp_avia", "correlation": -0.008}, {"variable1": "passive_click_hotel", "variable2": "passive_imp_avia", "correlation": 0.008}, {"variable1": "orders_amt_hotel", "variable2": "passive_imp_avia", "correlation": 0.07}, {"variable1": "active_imp_avia", "variable2": "passive_imp_avia", "correlation": 0.019}, {"variable1": "passive_imp_avia", "variable2": "passive_imp_avia", "correlation": 1.0}, {"variable1": "active_click_avia", "variable2": "passive_imp_avia", "correlation": 0.048}, {"variable1": "passive_click_avia", "variable2": "passive_imp_avia", "correlation": 0.275}, {"variable1": "orders_amt_avia", "variable2": "passive_imp_avia", "correlation": 0.03}, {"variable1": "active_imp_hotel", "variable2": "active_click_avia", "correlation": 0.074}, {"variable1": "passive_imp_hotel", "variable2": "active_click_avia", "correlation": -0.05}, {"variable1": "active_click_hotel", "variable2": "active_click_avia", "correlation": 0.185}, {"variable1": "passive_click_hotel", "variable2": "active_click_avia", "correlation": 0.036}, {"variable1": "orders_amt_hotel", "variable2": "active_click_avia", "correlation": 0.028}, {"variable1": "active_imp_avia", "variable2": "active_click_avia", "correlation": 0.656}, {"variable1": "passive_imp_avia", "variable2": "active_click_avia", "correlation": 0.048}, {"variable1": "active_click_avia", "variable2": "active_click_avia", "correlation": 1.0}, {"variable1": "passive_click_avia", "variable2": "active_click_avia", "correlation": 0.111}, {"variable1": "orders_amt_avia", "variable2": "active_click_avia", "correlation": 0.007}, {"variable1": "active_imp_hotel", "variable2": "passive_click_avia", "correlation": 0.047}, {"variable1": "passive_imp_hotel", "variable2": "passive_click_avia", "correlation": 0.057}, {"variable1": "active_click_hotel", "variable2": "passive_click_avia", "correlation": 0.03}, {"variable1": "passive_click_hotel", "variable2": "passive_click_avia", "correlation": 0.186}, {"variable1": "orders_amt_hotel", "variable2": "passive_click_avia", "correlation": 0.132}, {"variable1": "active_imp_avia", "variable2": "passive_click_avia", "correlation": 0.089}, {"variable1": "passive_imp_avia", "variable2": "passive_click_avia", "correlation": 0.275}, {"variable1": "active_click_avia", "variable2": "passive_click_avia", "correlation": 0.111}, {"variable1": "passive_click_avia", "variable2": "passive_click_avia", "correlation": 1.0}, {"variable1": "orders_amt_avia", "variable2": "passive_click_avia", "correlation": 0.146}, {"variable1": "active_imp_hotel", "variable2": "orders_amt_avia", "correlation": 0.216}, {"variable1": "passive_imp_hotel", "variable2": "orders_amt_avia", "correlation": 0.092}, {"variable1": "active_click_hotel", "variable2": "orders_amt_avia", "correlation": 0.058}, {"variable1": "passive_click_hotel", "variable2": "orders_amt_avia", "correlation": 0.054}, {"variable1": "orders_amt_hotel", "variable2": "orders_amt_avia", "correlation": 0.158}, {"variable1": "active_imp_avia", "variable2": "orders_amt_avia", "correlation": -0.045}, {"variable1": "passive_imp_avia", "variable2": "orders_amt_avia", "correlation": 0.03}, {"variable1": "active_click_avia", "variable2": "orders_amt_avia", "correlation": 0.007}, {"variable1": "passive_click_avia", "variable2": "orders_amt_avia", "correlation": 0.146}, {"variable1": "orders_amt_avia", "variable2": "orders_amt_avia", "correlation": 1.0}]}};
|
|
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> |