|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<style> |
|
.error { |
|
color: red; |
|
} |
|
</style> |
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega@5"></script> |
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//[email protected]"></script> |
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-embed@6"></script> |
|
</head> |
|
<body> |
|
<div id="vis"></div> |
|
<script> |
|
(function(vegaEmbed) { |
|
var spec = {"config": {"view": {"continuousWidth": 400, "continuousHeight": 300}}, "data": {"name": "data-e58adc7548bdded6fd09c49a28ff71ba"}, "mark": {"type": "circle", "size": 60}, "encoding": {"color": {"field": "cos", "type": "quantitative"}, "x": {"field": "x", "type": "quantitative"}, "y": {"field": "y", "type": "quantitative"}}, "$schema": "https://vega.github.io/schema/vega-lite/v4.17.0.json", "datasets": {"data-e58adc7548bdded6fd09c49a28ff71ba": [{"x": 1, "y": 3, "cos": 0.1}, {"x": 2, "y": 4, "cos": 0.5}]}}; |
|
var embedOpt = {"mode": "vega-lite"}; |
|
|
|
function showError(el, error){ |
|
el.innerHTML = ('<div class="error" 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> |
