Commit 3ab3776b authored by Pierre Boudes's avatar Pierre Boudes 💬
Browse files

légende et changement de collège pour le graphique

parent a1a2a53c
......@@ -9,56 +9,48 @@ var chart = d3.bullet()
d3.json("resultats_tous.json", function(error, data) {
if (error) throw error;
var graph = d3.select(".synthese")
function update(data) {
var svg = graph.selectAll("svg")
.data(data)
.enter().append("svg")
.attr("class", "bullet")
.attr("width", width + margin.left + margin.right)
var svg = d3.select(".synthese").selectAll("svg")
.data(data)
.enter().append("svg")
.attr("class", "bullet")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(chart);
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(chart);
var title = svg.append("g")
.style("text-anchor", "end")
.attr("transform", "translate(-6," + height / 2 + ")");
var title = svg.append("g")
.style("text-anchor", "end")
.attr("transform", "translate(-6," + height / 2 + ")");
title.append("text")
.attr("class", "title")
.text(function(d) { return d.title; });
title.append("text")
.attr("class", "title")
.text(function(d) { return d.title; });
title.append("text")
.attr("class", "subtitle")
.attr("dy", "1em")
.text(function(d) { return d.subtitle; });
}
title.append("text")
.attr("class", "subtitle")
.attr("dy", "1em")
.text(function(d) { return d.subtitle; });
update(data);
d3.selectAll(".button_tous").on("click", function() {
d3.json("resultats_tous.json", function(error, data) {
d3.selectAll(".button_staff").on("click", function() {
d3.json("resultats_staff.json", function(error, data) {
if (error) throw error;
update(data,1500);
//.call(chart.duration(1000));
svg.data(d => data).call(chart.duration(1000));
});
});
d3.selectAll(".button_staff").on("click", function() {
d3.json("resultats_staff.json", function(error, data) {
d3.selectAll(".button_tous").on("click", function() {
d3.json("resultats_tous.json", function(error, data) {
if (error) throw error;
update(data);
console.log("button_staff")
//.call(chart.duration(1000));
svg.data(d => data).call(chart.duration(1000));
});
});
d3.selectAll(".button_students").on("click", function() {
d3.json("resultats_students.json", function(error, data) {
if (error) throw error;
update(data);
//.call(chart.duration(1000));
svg.data(d => data).call(chart.duration(1000));
});
});
})
......@@ -58,8 +58,45 @@ p { text-align: left; }
.bullet .measure.s0 { fill: orange; }
.bullet .measure.s1 { fill: limegreen; }
.bullet .measure.s2 { fill: darkgreen; }
.legende { font-size: 14px; }
.legende .s0 { background: orange; }
.legende .s1 { background: limegreen; }
.legende .s2 { background: darkgreen; color: white; }
.bullet .title { font-size: 14px; font-weight: bold; }
.bullet .subtitle { fill: #999; }
.synthese_cartouche {
display: flex;
justify-content: space-between;
}
.legende {
display: flex;
// justify-content: space-between;
flex-direction: column;
// justify-content: flex-start;
align-items: flex-start;
}
.synthese_cartouche button {
color: #0099CC;
background: transparent;
border: 2px solid #0099CC;
border-radius: 3px;
padding: 4px 8px;
text-align: center;
display: inline-block;
font-size: 14px;
margin: 2px 1px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
text-decoration: none;
text-transform: uppercase;
}
/*button on hover*/
.synthese_cartouche button:hover {
background-color: #008CBA;
color: white;
}
</style>
<script src="bullet.js"></script>
<script src="graph_resultat.js"></script>
......@@ -71,9 +108,21 @@ p { text-align: left; }
<b>Sorbonne Paris Nord</b> (USPN) est le meilleur choix, avec la mention majoritaire <i>me convient bien</i>
</p>
<button class="button_tous">Tous</button><button class="button_students">Étudiant·es</button><button class="button_staff">Personnels</button>
<div class="synthese"></div>
<div class="bullet synthese_cartouche">
<div class="legende">
<div><span class="s2">&nbsp;&nbsp;&nbsp;&nbsp;</span> convient bien</div>
<div><span class="s1">&nbsp;&nbsp;&nbsp;&nbsp;</span> convient</div>
<div><span class="s0">&nbsp;&nbsp;&nbsp;&nbsp;</span> convient modérément</div>
</div>
<div>
<button class="button_tous">Ensemble</button>
<button class="button_students">Étudiant·es</button>
<button class="button_staff">Personnels</button>
</div>
</div>
<p>
<i>Poursuivre la lecture sur l'écran suivant 👉</i>
</p>
......@@ -81,8 +130,8 @@ p { text-align: left; }
</section>
</section>
<section>
<section id="slide-orgec09189">
<h3 id="orgec09189">Contexte</h3>
<section id="slide-org93f93af">
<h3 id="org93f93af">Contexte</h3>
<p>
Du 17 au 30 septembre 2019, notre communauté universitaire a été consultée pour un changement de nom de l'université. Les trois noms proposés étaient :
</p>
......@@ -96,8 +145,8 @@ Du 17 au 30 septembre 2019, notre communauté universitaire a été consultée p
</section>
</section>
<section>
<section id="slide-org8f8bf45">
<h3 id="org8f8bf45">Organisation du scrutin</h3>
<section id="slide-org8a6017b">
<h3 id="org8a6017b">Organisation du scrutin</h3>
<ul>
<li>Le scrutin a pris la forme de quatre votes électroniques, à l'aide du logiciel <a href="http://www.belenios.org/">Belenios</a> sur un serveur de la DSI</li>
<li>Le scrutin a été dépouillé au <a href="https://fr.wikipedia.org/wiki/Jugement_majoritaire">jugement majoritaire</a></li>
......@@ -108,8 +157,8 @@ Du 17 au 30 septembre 2019, notre communauté universitaire a été consultée p
</ul>
</section>
<section id="slide-orgabcf57c">
<h4 id="orgabcf57c">Jugement majoritaire</h4>
<section id="slide-orgd11a8fc">
<h4 id="orgd11a8fc">Jugement majoritaire</h4>
<ul>
<li>Le jugement majoritaire est un mode de scrutin où l'on exprime son avis sur chacune des propositions, selon une échelle de mentions choisie en fonction de la question. Ainsi, <b>on exprime ce qu'on pense plutôt que d'être enclin à un calcul stratégique.</b></li>
<li>Le dépouillement se fait en attribuant à chaque proposition sa mention médiane, et en sélectionnant la meilleure. Cela signifie que <b>le jugement majoritaire favorise les propositions qui satisfont au mieux plus de 50% des personnes</b>.</li>
......@@ -118,8 +167,8 @@ Du 17 au 30 septembre 2019, notre communauté universitaire a été consultée p
</section>
<section id="slide-orgcda4572">
<h4 id="orgcda4572">Détails des votes électroniques</h4>
<section id="slide-org730bcb5">
<h4 id="org730bcb5">Détails des votes électroniques</h4>
<ul>
<li><a href="https://dsi.univ-paris13.fr/belenios/elections/LET3k48Jyr7BLX/">Premier vote</a> du 17 sept. au 30 sept. auprès des personnels, codes de vote gérés par le serveur, authentification ENT (CAS), 544 bulletins.</li>
<li><a href="https://dsi.univ-paris13.fr/belenios/elections/efu75xHe5jDvEn/">Second vote</a> du 20 sept. au 30 sept. auprès des étudiant·es inscrit·es ou pré-inscrit·es pour l'année 2019-2020, codes de vote manuels et CAS, 2294 bulletins.</li>
......@@ -128,8 +177,8 @@ Du 17 au 30 septembre 2019, notre communauté universitaire a été consultée p
</ul>
</section>
<section id="slide-orgd6e7ace">
<h4 id="orgd6e7ace">Questions posées</h4>
<section id="slide-org380fb00">
<h4 id="org380fb00">Questions posées</h4>
<p>
Pour chacun des trois noms, il était demandé à chaque personne si le nom :
</p>
......@@ -145,8 +194,8 @@ Il était précisé que cette dernière mention (4) serait la plus négative au
</p>
</section>
<section id="slide-orgafb860c">
<h4 id="orgafb860c">Déroulement du vote</h4>
<section id="slide-org6a33f68">
<h4 id="org6a33f68">Déroulement du vote</h4>
<ul>
<li>Durant le scrutin, 4 personnes se sont retrouvées sans solution pour voter (code non reçu, autre erreur inconnue), soit 0,13% des votes exprimés.</li>
<li>Le dépouillement des votes a été effectué le mardi 1er octobre par le DPO et le VPSI. Le serveur a ensuite été arrêté pour laisser le temps de communiquer sur les résultats.</li>
......@@ -155,8 +204,8 @@ Il était précisé que cette dernière mention (4) serait la plus négative au
</ul>
</section>
<section id="slide-orgea9fef8">
<h4 id="orgea9fef8">Dépouillement</h4>
<section id="slide-org798e791">
<h4 id="org798e791">Dépouillement</h4>
<ul>
<li>Le dépouillement a eu lieu selon les règles du <a href="https://fr.wikipedia.org/wiki/Jugement_majoritaire">jugement majoritaire</a>, il n'a pas été nécessaire de départager des ex-aequo.</li>
<li>Les bulletins des personnels ont étés pondérés de façon à ce que l'ensemble des bulletins des personnels compte autant que ceux des étudiants, plus nombreux. Le facteur de pondération de 4,3 a été choisi comme une approximation du ratio de votes exprimés entre les deux collèges. Ainsi chaque bulletin de personnel a compté 4,3 fois plus qu'un bulletin étudiant.</li>
......@@ -165,8 +214,8 @@ Il était précisé que cette dernière mention (4) serait la plus négative au
</section>
</section>
<section>
<section id="slide-orgb384df5">
<h3 id="orgb384df5">Résultats</h3>
<section id="slide-orgb0342df">
<h3 id="orgb0342df">Résultats</h3>
<ul>
<li>Le résultat du dépouillement donne <b>université Sorbonne Paris Nord</b> en tête avec la mention majoritaire <i>convient bien</i>. Cette proposition recueille 68% de satisfaction (convient bien et convient).</li>
<li>En seconde position vient « université de Paris Nord », avec la mention majoritaire <i>convient modérément</i> et satisfaisant 43% des votant·es.</li>
......@@ -176,8 +225,8 @@ Il était précisé que cette dernière mention (4) serait la plus négative au
</ul>
</section>
<section id="slide-org8afc241">
<h4 id="org8afc241">Vote des personnels</h4>
<section id="slide-org6cbe3d7">
<h4 id="org6cbe3d7">Vote des personnels</h4>
<table border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">
......@@ -283,8 +332,8 @@ En pourcentages :
</table>
</section>
<section id="slide-org611e948">
<h4 id="org611e948">Vote des étudiant·es</h4>
<section id="slide-orga1c304a">
<h4 id="orga1c304a">Vote des étudiant·es</h4>
<table border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">
......@@ -389,8 +438,8 @@ En pourcentages :
</table>
</section>
<section id="slide-orga614b7c">
<h4 id="orga614b7c">Totaux</h4>
<section id="slide-org15cc19f">
<h4 id="org15cc19f">Totaux</h4>
<ul>
<li>Le total des votes (avec pondération de 4.3 pour les personnels) donne en pourcentages les résultats suivants :</li>
......@@ -453,8 +502,8 @@ En pourcentages :
</section>
<section id="slide-orgf48bb25">
<h4 id="orgf48bb25">Départage des ex-aequo pour la seconde place</h4>
<section id="slide-org5d67d31">
<h4 id="org5d67d31">Départage des ex-aequo pour la seconde place</h4>
<ul>
<li>En second choix derrière <i>Sorbonne Paris Nord</i> vient <i>de Paris Nord</i> qui est le plus près de changer de mention (distance de 7%) pour passer à <i>convient</i>, une mention plus positive. Le tableau suivant montre la distance à la médiane des changements de mentions (le signe +/- dénote le côté du changement).</li>
......@@ -500,8 +549,8 @@ En pourcentages :
</section>
</section>
<section>
<section id="slide-org9b4eff4">
<h2 id="org9b4eff4">Référencement</h2>
<section id="slide-org30e9c68">
<h2 id="org30e9c68">Référencement</h2>
<ul>
<li>Actuellement une recherche sur les termes<a href="https://www.qwant.com/?q=universit%C3%A9%20Sorbonne%20Paris%20Nord&amp;t=web"> université Sorbonne Paris Nord</a> sur Qwant, donne en premier des pages institutionnelles de notre université.</li>
......
......@@ -68,8 +68,45 @@ p { text-align: left; }
.bullet .measure.s0 { fill: orange; }
.bullet .measure.s1 { fill: limegreen; }
.bullet .measure.s2 { fill: darkgreen; }
.legende { font-size: 14px; }
.legende .s0 { background: orange; }
.legende .s1 { background: limegreen; }
.legende .s2 { background: darkgreen; color: white; }
.bullet .title { font-size: 14px; font-weight: bold; }
.bullet .subtitle { fill: #999; }
.synthese_cartouche {
display: flex;
justify-content: space-between;
}
.legende {
display: flex;
// justify-content: space-between;
flex-direction: column;
// justify-content: flex-start;
align-items: flex-start;
}
.synthese_cartouche button {
color: #0099CC;
background: transparent;
border: 2px solid #0099CC;
border-radius: 3px;
padding: 4px 8px;
text-align: center;
display: inline-block;
font-size: 14px;
margin: 2px 1px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
text-decoration: none;
text-transform: uppercase;
}
/*button on hover*/
.synthese_cartouche button:hover {
background-color: #008CBA;
color: white;
}
</style>
<script src="bullet.js"></script>
<script src="graph_resultat.js"></script>
......@@ -84,8 +121,22 @@ p { text-align: left; }
*Sorbonne Paris Nord* (USPN) est le meilleur choix, avec la mention majoritaire /me convient bien/
#+REVEAL_HTML: <button class="button_tous">Tous</button><button class="button_students">Étudiant·es</button><button class="button_staff">Personnels</button>
#+REVEAL_HTML: <div class="synthese"></div>
#+begin_export html
<div class="synthese"></div>
<div class="bullet synthese_cartouche">
<div class="legende">
<div><span class="s2">&nbsp;&nbsp;&nbsp;&nbsp;</span> convient bien</div>
<div><span class="s1">&nbsp;&nbsp;&nbsp;&nbsp;</span> convient</div>
<div><span class="s0">&nbsp;&nbsp;&nbsp;&nbsp;</span> convient modérément</div>
</div>
<div>
<button class="button_tous">Ensemble</button>
<button class="button_students">Étudiant·es</button>
<button class="button_staff">Personnels</button>
</div>
</div>
#+end_export
/Poursuivre la lecture sur l'écran suivant 👉/
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment