Files

39 lines
12 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<style>
.vega-actions a {
margin-right: 12px;
color: #757575;
font-weight: normal;
font-size: 13px;
}
.error {
color: red;
}
</style>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega@4"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-lite@2.6.0"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-embed@3"></script>
</head>
<body>
<div id="vis"></div>
<script>
var spec = {"config": {"view": {"width": 400, "height": 300}}, "data": {"name": "data-bbf2cb0c908444d1a42a5ccf4ed6ae6a"}, "mark": "bar", "encoding": {"color": {"type": "nominal", "field": "type", "legend": null, "scale": {"domain": [1, 2, 3, 4, 5], "range": ["#c30d24", "#f3a583", "#cccccc", "#94c6da", "#1770ab"]}}, "x": {"type": "quantitative", "field": "percentage_start", "scale": {"domain": [-100, 100]}}, "x2": {"type": "quantitative", "field": "percentage_end"}, "y": {"type": "nominal", "axis": {"domain": false, "minExtent": 60, "offset": 5, "ticks": false, "title": ""}, "field": "question", "sort": ["Programming in general", "Object-oriented programming", "Feature Modelling", "Ruby programming language", "Context-oriented programming", "Our feature context approach"]}}, "$schema": "https://vega.github.io/schema/vega-lite/v2.6.0.json", "datasets": {"data-bbf2cb0c908444d1a42a5ccf4ed6ae6a": [{"percentage": 0.0, "percentage_end": 0.0, "percentage_start": 0.0, "question": "Je comprends les t\u00e2ches", "type": 1, "value": 0.0}, {"percentage": 0.0, "percentage_end": 0.0, "percentage_start": 0.0, "question": "Je comprends les t\u00e2ches", "type": 2, "value": 0.0}, {"percentage": 0.0, "percentage_end": 0.0, "percentage_start": 0.0, "question": "Je comprends les t\u00e2ches", "type": 3, "value": 0.0}, {"percentage": 60.0, "percentage_end": 60.0, "percentage_start": 0.0, "question": "Je comprends les t\u00e2ches", "type": 4, "value": 12.0}, {"percentage": 40.0, "percentage_end": 100.0, "percentage_start": 60.0, "question": "Je comprends les t\u00e2ches", "type": 5, "value": 8.0}, {"percentage": 0.0, "percentage_end": 0.0, "percentage_start": 0.0, "question": "Je comprends le contexte", "type": 1, "value": 0.0}, {"percentage": 5.0, "percentage_end": -7.5, "percentage_start": -2.5, "question": "Je comprends le contexte", "type": 2, "value": 1.0}, {"percentage": 5.0, "percentage_end": 2.5, "percentage_start": -2.5, "question": "Je comprends le contexte", "type": 3, "value": 1.0}, {"percentage": 40.0, "percentage_end": 42.5, "percentage_start": 2.5, "question": "Je comprends le contexte", "type": 4, "value": 8.0}, {"percentage": 50.0, "percentage_end": 92.5, "percentage_start": 42.5, "question": "Je comprends le contexte", "type": 5, "value": 10.0}, {"percentage": 0.0, "percentage_end": 0.0, "percentage_start": 0.0, "question": "Je comprends l'utilit\u00e9", "type": 1, "value": 0.0}, {"percentage": 5.0, "percentage_end": -7.5, "percentage_start": -2.5, "question": "Je comprends l'utilit\u00e9", "type": 2, "value": 1.0}, {"percentage": 5.0, "percentage_end": 2.5, "percentage_start": -2.5, "question": "Je comprends l'utilit\u00e9", "type": 3, "value": 1.0}, {"percentage": 35.0, "percentage_end": 37.5, "percentage_start": 2.5, "question": "Je comprends l'utilit\u00e9", "type": 4, "value": 7.0}, {"percentage": 55.0, "percentage_end": 92.5, "percentage_start": 37.5, "question": "Je comprends l'utilit\u00e9", "type": 5, "value": 11.0}, {"percentage": 0.0, "percentage_end": 0.0, "percentage_start": 0.0, "question": "Je comprends les contr\u00f4les", "type": 1, "value": 0.0}, {"percentage": 5.0, "percentage_end": 0.0, "percentage_start": -5.0, "question": "Je comprends les contr\u00f4les", "type": 2, "value": 1.0}, {"percentage": 0.0, "percentage_end": 0.0, "percentage_start": 0.0, "question": "Je comprends les contr\u00f4les", "type": 3, "value": 0.0}, {"percentage": 85.0, "percentage_end": 85.0, "percentage_start": 0.0, "question": "Je comprends les contr\u00f4les", "type": 4, "value": 17.0}, {"percentage": 10.0, "percentage_end": 95.0, "percentage_start": 85.0, "question": "Je comprends les contr\u00f4les", "type": 5, "value": 2.0}, {"percentage": 0.0, "percentage_end": 0.0, "percentage_start": 0.0, "question": "Je sais o\u00f9 cliquer", "type": 1, "value": 0.0}, {"percentage": 10.0, "percentage_end": -20.0, "percentage_start": -30.0, "question": "Je sais o\u00f9 cliquer", "type": 2, "value": 2.0}, {"percentage": 40.0, "percentage_end": 20.0, "percentage_start": -20.0, "question": "Je sais o\u00f9 cliquer", "type": 3, "value": 8.0}, {"percentage": 40.0, "percentage_end": 70.0, "percentage_start": 20.0, "question": "Je sais o\u00f9 cliquer", "type": 4, "value": 8.0}, {"percentage": 10.0, "percentage_end": 80.0, "percentage_start": 70.0, "question": "Je sais o\u00f9 cliquer", "type": 5, "value": 2.0}, {"percentage": 0.0, "percentage_end": 0.0, "percentage_start": 0.0, "question": "Je peux r\u00e9aliser les t\u00e2ches facilement", "type": 1, "value": 0.0}, {"percentage": 0.0, "percentage_end": -0.0, "percentage_start": -0.0, "question": "Je peux r\u00e9aliser les t\u00e2ches facilement", "type": 2, "value": 0.0}, {"percentage": 30.0, "percentage_end": 15.0, "percentage_start": -15.0, "question": "Je peux r\u00e9aliser les t\u00e2ches facilement", "type": 3, "value": 6.0}, {"percentage": 50.0, "percentage_end": 65.0, "percentage_start": 15.0, "question": "Je peux r\u00e9aliser les t\u00e2ches facilement", "type": 4, "value": 10.0}, {"percentage": 20.0, "percentage_end": 85.0, "percentage_start": 65.0, "question": "Je peux r\u00e9aliser les t\u00e2ches facilement", "type": 5, "value": 4.0}, {"percentage": 0.0, "percentage_end": 0.0, "percentage_start": 0.0, "question": "Je peux r\u00e9aliser les t\u00e2ches rapidement", "type": 1, "value": 0.0}, {"percentage": 5.0, "percentage_end": -12.5, "percentage_start": -17.5, "question": "Je peux r\u00e9aliser les t\u00e2ches rapidement", "type": 2, "value": 1.0}, {"percentage": 25.0, "percentage_end": 12.5, "percentage_start": -12.5, "question": "Je peux r\u00e9aliser les t\u00e2ches rapidement", "type": 3, "value": 5.0}, {"percentage": 60.0, "percentage_end": 62.5, "percentage_start": 12.5, "question": "Je peux r\u00e9aliser les t\u00e2ches rapidement", "type": 4, "value": 12.0}, {"percentage": 10.0, "percentage_end": 72.5, "percentage_start": 62.5, "question": "Je peux r\u00e9aliser les t\u00e2ches rapidement", "type": 5, "value": 2.0}, {"percentage": 0.0, "percentage_end": 0.0, "percentage_start": 0.0, "question": "Je comprends les donn\u00e9es", "type": 1, "value": 0.0}, {"percentage": 5.0, "percentage_end": -2.5, "percentage_start": -7.5, "question": "Je comprends les donn\u00e9es", "type": 2, "value": 1.0}, {"percentage": 5.0, "percentage_end": 2.5, "percentage_start": -2.5, "question": "Je comprends les donn\u00e9es", "type": 3, "value": 1.0}, {"percentage": 45.0, "percentage_end": 47.5, "percentage_start": 2.5, "question": "Je comprends les donn\u00e9es", "type": 4, "value": 9.0}, {"percentage": 45.0, "percentage_end": 92.5, "percentage_start": 47.5, "question": "Je comprends les donn\u00e9es", "type": 5, "value": 9.0}, {"percentage": 0.0, "percentage_end": 0.0, "percentage_start": 0.0, "question": "L'interface est adapt\u00e9e", "type": 1, "value": 0.0}, {"percentage": 0.0, "percentage_end": -15.0, "percentage_start": -30.0, "question": "L'interface est adapt\u00e9e", "type": 2, "value": 3.0}, {"percentage": 0.0, "percentage_end": 15.0, "percentage_start": -15.0, "question": "L'interface est adapt\u00e9e", "type": 3, "value": 6.0}, {"percentage": 0.0, "percentage_end": 55.0, "percentage_start": 15.0, "question": "L'interface est adapt\u00e9e", "type": 4, "value": 8.0}, {"percentage": 0.0, "percentage_end": 70.0, "percentage_start": 55.0, "question": "L'interface est adapt\u00e9e", "type": 5, "value": 3.0}, {"percentage": 0.0, "percentage_end": 0.0, "percentage_start": 0.0, "question": "Je me rep\u00e8re facilement", "type": 1, "value": 0.0}, {"percentage": 0.0, "percentage_end": -5.5555, "percentage_start": -38.8888, "question": "Je me rep\u00e8re facilement", "type": 2, "value": 0.0}, {"percentage": 0.0, "percentage_end": 5.5555, "percentage_start": -5.5555, "question": "Je me rep\u00e8re facilement", "type": 3, "value": 0.0}, {"percentage": 0.0, "percentage_end": 49.9999, "percentage_start": 5.5555, "question": "Je me rep\u00e8re facilement", "type": 4, "value": 5.0}, {"percentage": 0.0, "percentage_end": 61.1111, "percentage_start": 49.9999, "question": "Je me rep\u00e8re facilement", "type": 5, "value": 3.0}, {"percentage": 0.0, "percentage_end": 0.0, "percentage_start": 0.0, "question": "J'aime les couleurs", "type": 1, "value": 0.0}, {"percentage": 0.0, "percentage_end": 0.0, "percentage_start": 0.0, "question": "J'aime les couleurs", "type": 2, "value": 0.0}, {"percentage": 0.0, "percentage_end": 12.5, "percentage_start": -12.5, "question": "J'aime les couleurs", "type": 3, "value": 5.0}, {"percentage": 0.0, "percentage_end": 57.5, "percentage_start": 12.5, "question": "J'aime les couleurs", "type": 4, "value": 7.0}, {"percentage": 0.0, "percentage_end": 97.5, "percentage_start": 57.5, "question": "J'aime les couleurs", "type": 5, "value": 8.0}, {"percentage": 0.0, "percentage_end": 0.0, "percentage_start": 0.0, "question": "J'aime les images", "type": 1, "value": 0.0}, {"percentage": 0.0, "percentage_end": 0.0, "percentage_start": 0.0, "question": "J'aime les images", "type": 2, "value": 0.0}, {"percentage": 0.0, "percentage_end": 22.5, "percentage_start": -22.5, "question": "J'aime les images", "type": 3, "value": 9.0}, {"percentage": 0.0, "percentage_end": 62.5, "percentage_start": 22.5, "question": "J'aime les images", "type": 4, "value": 8.0}, {"percentage": 0.0, "percentage_end": 77.5, "percentage_start": 62.5, "question": "J'aime les images", "type": 5, "value": 3.0}, {"percentage": 0.0, "percentage_end": -20.0, "percentage_start": -25.0, "question": "L'agencement me convient", "type": 1, "value": 1.0}, {"percentage": 0.0, "percentage_end": -10.0, "percentage_start": -20.0, "question": "L'agencement me convient", "type": 2, "value": 2.0}, {"percentage": 0.0, "percentage_end": 10.0, "percentage_start": -10.0, "question": "L'agencement me convient", "type": 3, "value": 4.0}, {"percentage": 0.0, "percentage_end": 60.0, "percentage_start": 10.0, "question": "L'agencement me convient", "type": 4, "value": 10.0}, {"percentage": 0.0, "percentage_end": 75.0, "percentage_start": 60.0, "question": "L'agencement me convient", "type": 5, "value": 3.0}, {"percentage": 0.0, "percentage_end": 0.0, "percentage_start": 0.0, "question": "L'esth\u00e9tique g\u00e9n\u00e9rale me convient", "type": 1, "value": 0.0}, {"percentage": 0.0, "percentage_end": 0.0, "percentage_start": 0.0, "question": "L'esth\u00e9tique g\u00e9n\u00e9rale me convient", "type": 2, "value": 0.0}, {"percentage": 0.0, "percentage_end": 10.0, "percentage_start": -10.0, "question": "L'esth\u00e9tique g\u00e9n\u00e9rale me convient", "type": 3, "value": 4.0}, {"percentage": 0.0, "percentage_end": 65.0, "percentage_start": 10.0, "question": "L'esth\u00e9tique g\u00e9n\u00e9rale me convient", "type": 4, "value": 11.0}, {"percentage": 0.0, "percentage_end": 90.0, "percentage_start": 65.0, "question": "L'esth\u00e9tique g\u00e9n\u00e9rale me convient", "type": 5, "value": 5.0}]}};
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));
</script>
</body>
</html>