TwitterAccounts / templates /charts /handle_sentiment_breakdown.html
aus10powell's picture
Upload handle_sentiment_breakdown.html
f263510
raw
history blame
4.03 kB
<!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-700e84ebfeae2b5e3ed0135928f5414d"}, "facet": {"field": "handle", "type": "nominal"}, "spec": {"layer": [{"mark": "bar", "encoding": {"color": {"field": "max_sentiment", "title": "Twitter Handle", "type": "nominal"}, "order": {"field": "max_sentiment", "sort": "ascending", "type": "nominal"}, "x": {"field": "max_sentiment", "title": "Max Sentiment", "type": "nominal"}, "y": {"axis": {"format": "%"}, "field": "percentage", "title": "Percentage", "type": "quantitative"}}, "height": 150, "title": "Percentage of Max Sentiments by Twitter Handle", "width": 150}, {"mark": {"type": "text", "color": "black", "dx": 0, "dy": 5}, "encoding": {"text": {"field": "count", "type": "quantitative"}, "x": {"field": "max_sentiment", "type": "nominal"}, "y": {"axis": {"format": "%"}, "field": "percentage", "type": "quantitative"}}}]}, "columns": 3, "$schema": "https://vega.github.io/schema/vega-lite/v4.17.0.json", "datasets": {"data-700e84ebfeae2b5e3ed0135928f5414d": [{"handle": "BarackObama", "max_sentiment": "negative", "count": 225, "percentage": 0.07723995880535531}, {"handle": "BarackObama", "max_sentiment": "neutral", "count": 1056, "percentage": 0.36251287332646753}, {"handle": "BarackObama", "max_sentiment": "positive", "count": 1632, "percentage": 0.5602471678681772}, {"handle": "alikarimi_ak8", "max_sentiment": "negative", "count": 49, "percentage": 0.34507042253521125}, {"handle": "alikarimi_ak8", "max_sentiment": "neutral", "count": 66, "percentage": 0.4647887323943662}, {"handle": "alikarimi_ak8", "max_sentiment": "positive", "count": 27, "percentage": 0.19014084507042253}, {"handle": "cathiedwood", "max_sentiment": "negative", "count": 216, "percentage": 0.14555256064690028}, {"handle": "cathiedwood", "max_sentiment": "neutral", "count": 537, "percentage": 0.3618598382749326}, {"handle": "cathiedwood", "max_sentiment": "positive", "count": 731, "percentage": 0.4925876010781671}, {"handle": "elonmusk", "max_sentiment": "negative", "count": 453, "percentage": 0.2560768795929904}, {"handle": "elonmusk", "max_sentiment": "neutral", "count": 852, "percentage": 0.4816280384397965}, {"handle": "elonmusk", "max_sentiment": "positive", "count": 464, "percentage": 0.26229508196721313}, {"handle": "taylorlorenz", "max_sentiment": "negative", "count": 7, "percentage": 0.30434782608695654}, {"handle": "taylorlorenz", "max_sentiment": "neutral", "count": 7, "percentage": 0.30434782608695654}, {"handle": "taylorlorenz", "max_sentiment": "positive", "count": 9, "percentage": 0.391304347826087}, {"handle": "ylecun", "max_sentiment": "negative", "count": 710, "percentage": 0.28826634185952094}, {"handle": "ylecun", "max_sentiment": "neutral", "count": 1407, "percentage": 0.5712545676004872}, {"handle": "ylecun", "max_sentiment": "positive", "count": 346, "percentage": 0.14047909053999189}]}};
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>