| | <!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//vega-lite@4.17.0"></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> |
