tykayn/scripts
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

template programme pirate

Browse Source
This commit is contained in:
Tykayn 2024-06-11 09:50:09 +02:00 committed by tykayn
parent 8192387c1f
commit 37a86d4297
3 changed files with 135 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -7,3 +7,6 @@
/coverage/ /coverage/
/coverage/ /coverage/
~ ~
/export_emails_filter/mon_filtre_selection/
/export_emails_filter/emails_filtered__with*
/export_emails_filter/list_emails_filtered.json

119
pirate_program/index.html
View File

@ -74,39 +74,14 @@
color: darkslateblue; color: darkslateblue;
} }
.tags-menu { /* Nouveaux styles pour le nuage de tags */
.tag-cloud {
width: 300px;
height: 300px;
position: fixed; position: fixed;
top: 20px; top: 20px;
left: 20px; right: 20px;
background-color: #fff;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
} }
.tags-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.tags-menu li {
display: inline-block;
margin-right: 10px;
}
.tags-menu a {
color: #333;
text-decoration: none;
padding: 5px 10px;
border-radius: 5px;
background-color: #f5f5f5;
}
.tags-menu a:hover {
background-color: #e5e5e5;
}
</style> </style>
</head> </head>
<body id="main"> <body id="main">
@ -115,6 +90,11 @@
<h1>Programme du <h1>Programme du
<a href="https://partipirate.org/index.php/">Parti Pirate</a> <a href="https://partipirate.org/index.php/">Parti Pirate</a>
</h1> </h1>
<section class="nuage">
<h2>nuage de mots:</h2>
<div class="word-cloud"></div>
</section>
<div class="article"> <div class="article">
<h2> <h2>
@ -16525,32 +16505,65 @@ Une taxation étant déjà en place sur le CO2 et le Parti Pirate ne désirant p
</div> </div>
</div> </div>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script> <script>
document.addEventListener('DOMContentLoaded', function () { // Fonction pour créer le nuage de mots
var tagsMenu = document.querySelector('.tags-menu') function createWordCloud(texts) {
var tags = document.querySelectorAll('.tags-menu a') // Extraire les mots de plus de 4 lettres
var articles = document.querySelectorAll('.article') var words = [];
texts.forEach(function(text) {
tagsMenu.addEventListener('click', function (e) { var matches = text.match(/\b\w{5,}\b/g);
if (e.target && e.target.matches('a')) { if (matches) {
var tag = e.target.getAttribute('data-tag') words = words.concat(matches);
articles.forEach(function (article) {
if (article.getAttribute('data-tags').includes(tag)) {
article.style.display = 'block'
} else {
article.style.display = 'none'
}
})
} }
}) });
// Ajouter un événement de clic sur le premier tag pour afficher tous les articles // Calculer la fréquence de chaque mot
tags[0].addEventListener('click', function () { var wordFrequency = {};
articles.forEach(function (article) { words.forEach(function(word) {
article.style.display = 'block' if (wordFrequency[word]) {
}) wordFrequency[word]++;
}) } else {
}) wordFrequency[word] = 1;
}
});
// Trier les mots par fréquence décroissante
var sortedWords = Object.keys(wordFrequency).sort(function(a, b) {
return wordFrequency[b] - wordFrequency[a];
});
// Créer le nuage de mots avec d3.js
var wordCloud = d3.select(".word-cloud")
.append("svg")
.attr("width", 600)
.attr("height", 600);
// Définir une échelle de couleur allant du blanc au violet
var colorScale = d3.scaleSequential(d3.interpolateViridis)
.domain([0, d3.max(Object.values(wordFrequency))]);
// Ajouter les mots au nuage
var maxFrequency = d3.max(Object.values(wordFrequency));
wordCloud.selectAll("text")
.data(sortedWords.splice(0,20))
.enter()
.append("text")
.text(function(d) { return d; })
.attr("x", function(d, i) { return 10 + (i % 10) * 50; })
.attr("y", function(d, i) { return 10 + Math.floor(i / 10) * 20; })
.attr("font-size", function(d) { return Math.sqrt(wordFrequency[d] / maxFrequency) * 20 + "px"; })
.style("fill", function(d) { return colorScale(wordFrequency[d]); })
.style("cursor", "pointer");
}
// Récupérer les textes des articles
var texts = Array.from(document.querySelectorAll(".article .content")).map(function(div) {
return div.textContent;
});
// Appeler la fonction pour créer le nuage de mots
createWordCloud(texts);
</script> </script>
</body> </body>
</html> </html>

119
pirate_program/templates/index.html
View File

@ -74,39 +74,14 @@
color: darkslateblue; color: darkslateblue;
} }
.tags-menu { /* Nouveaux styles pour le nuage de tags */
.tag-cloud {
width: 300px;
height: 300px;
position: fixed; position: fixed;
top: 20px; top: 20px;
left: 20px; right: 20px;
background-color: #fff;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
} }
.tags-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.tags-menu li {
display: inline-block;
margin-right: 10px;
}
.tags-menu a {
color: #333;
text-decoration: none;
padding: 5px 10px;
border-radius: 5px;
background-color: #f5f5f5;
}
.tags-menu a:hover {
background-color: #e5e5e5;
}
</style> </style>
</head> </head>
<body id="main"> <body id="main">
@ -115,6 +90,11 @@
<h1>Programme du <h1>Programme du
<a href="https://partipirate.org/index.php/">Parti Pirate</a> <a href="https://partipirate.org/index.php/">Parti Pirate</a>
</h1> </h1>
<section class="nuage">
<h2>nuage de mots:</h2>
<div class="word-cloud"></div>
</section>
{% for page in pages %} {% for page in pages %}
<div class="article"> <div class="article">
<h2> <h2>
@ -134,32 +114,65 @@
</div> </div>
</div> </div>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script> <script>
document.addEventListener('DOMContentLoaded', function () { // Fonction pour créer le nuage de mots
var tagsMenu = document.querySelector('.tags-menu') function createWordCloud(texts) {
var tags = document.querySelectorAll('.tags-menu a') // Extraire les mots de plus de 4 lettres
var articles = document.querySelectorAll('.article') var words = [];
texts.forEach(function(text) {
tagsMenu.addEventListener('click', function (e) { var matches = text.match(/\b\w{5,}\b/g);
if (e.target && e.target.matches('a')) { if (matches) {
var tag = e.target.getAttribute('data-tag') words = words.concat(matches);
articles.forEach(function (article) {
if (article.getAttribute('data-tags').includes(tag)) {
article.style.display = 'block'
} else {
article.style.display = 'none'
}
})
} }
}) });
// Ajouter un événement de clic sur le premier tag pour afficher tous les articles // Calculer la fréquence de chaque mot
tags[0].addEventListener('click', function () { var wordFrequency = {};
articles.forEach(function (article) { words.forEach(function(word) {
article.style.display = 'block' if (wordFrequency[word]) {
}) wordFrequency[word]++;
}) } else {
}) wordFrequency[word] = 1;
}
});
// Trier les mots par fréquence décroissante
var sortedWords = Object.keys(wordFrequency).sort(function(a, b) {
return wordFrequency[b] - wordFrequency[a];
});
// Créer le nuage de mots avec d3.js
var wordCloud = d3.select(".word-cloud")
.append("svg")
.attr("width", 600)
.attr("height", 600);
// Définir une échelle de couleur allant du blanc au violet
var colorScale = d3.scaleSequential(d3.interpolateViridis)
.domain([0, d3.max(Object.values(wordFrequency))]);
// Ajouter les mots au nuage
var maxFrequency = d3.max(Object.values(wordFrequency));
wordCloud.selectAll("text")
.data(sortedWords.splice(0,20))
.enter()
.append("text")
.text(function(d) { return d; })
.attr("x", function(d, i) { return 10 + (i % 10) * 50; })
.attr("y", function(d, i) { return 10 + Math.floor(i / 10) * 20; })
.attr("font-size", function(d) { return Math.sqrt(wordFrequency[d] / maxFrequency) * 20 + "px"; })
.style("fill", function(d) { return colorScale(wordFrequency[d]); })
.style("cursor", "pointer");
}
// Récupérer les textes des articles
var texts = Array.from(document.querySelectorAll(".article .content")).map(function(div) {
return div.textContent;
});
// Appeler la fonction pour créer le nuage de mots
createWordCloud(texts);
</script> </script>
</body> </body>
</html> </html>