Deploy v1.2.2

Leogendra · web-flow · commit 0f5a876c00a0 · 2025-06-23T23:45:35.000+02:00
Develop v1.2.2
diff --git a/README.md b/README.md
@@ -6,9 +6,13 @@ Pixels Visualiser is a client-side web app that allows users to load a JSON file
 
 - Interactive line chart of mood evolution over time
 - Rolling average control for smoothing data
-- Word frequency section based on user notes (with % toggle)
 - Tag analysis
-- Responsive layout for desktop and mobile
+- Weekdays and months distribution
+- Word frequency section based on user notes (with % toggle)
+- Wordcloud visualisation
+- Generate a PNG image of your Pixels
+- Search Pixels by date
+- Responsive layout for mobile (Note: the app is still best used on desktop. On mobile, some tooltips explaining buttons and controls might not be visible.)
 
 ## JSON Data Format
 
diff --git a/index.html b/index.html
@@ -65,8 +65,8 @@ <h1>Pixels Visualiser</h1>
                 <div class="chart-container">
                     <h2>📈 Mood evolution</h2>
                     <div class="options">
-                        <label for="rollingSlider">Rolling average : <span id="rollingValue">1</span> days</label>
-                        <input type="range" id="rollingSlider" class="range-average" min="1" max="60" value="1">
+                        <label for="rollingSlider">Rolling average: <span id="rollingValue">1</span> days</label>
+                        <input type="range" id="rollingSlider" class="range-slider" min="1" max="60" value="1">
 
                         <div class="option-item">
                             <label for="showAverageCheckbox"
@@ -175,6 +175,11 @@ <h2>📝 Most frequent words</h2>
                             <input type="number" id="minCountInput" class="input-nb" min="1" value="10">
                         </div>
 
+                        <div class="option-item">
+                            <label for="minScoreSlider" title="Only count words appearing in a Pixel with a score above the defined threshold">Min score: <span id="minScoreValue">1</span></label>
+                            <input type="range" id="minScoreSlider" class="range-slider" min="10" max="50" value="10">
+                        </div>
+                        
                         <div class="option-item">
                             <label for="searchInput" title='hint: use "*" to search for any word, e.g. "went to *"'>Search words</label>
                             <input type="text" id="searchInput" class="input-nb input-large" placeholder='e.g. "happy", "good day", "been to *"'>
@@ -318,7 +323,7 @@ <h2>📅 Search Pixel by Date</h2>
                 <img src="assets/pixels_memories_logo.png" alt="Pixels Memories">
             </a>
         </div>
-        <div class="version">Version: v1.2.0</div>
+        <div class="version">Version: v1.2.2</div>
         <div class="version">Last update: 2025-06-23</div>
     </footer>
 
diff --git a/scripts/main.js b/scripts/main.js
@@ -26,6 +26,8 @@ const words_percentage_checkbox = document.querySelector("#wordsPercentageCheckb
 const words_order_checkbox = document.querySelector("#wordsOrderCheckbox");
 const words_words_input = document.querySelector("#maxWordsInput");
 const words_count_input = document.querySelector("#minCountInput");
+const min_score_slider = document.querySelector("#minScoreSlider");
+const min_score_slider_text_value = document.querySelector("#minScoreValue");
 const words_search_input = document.querySelector("#searchInput");
 
 const wordcloud_container = document.querySelector("#wordcloudContainer");
@@ -37,6 +39,7 @@ const btn_download_wordcloud = document.querySelector("#btnDownloadWordcloud");
 
 const DEV_MODE = false;
 const DEV_FILE_PATH = "../data/pixels.json"
+const SCROLL_TO = 50;
 const isMobile = window.innerWidth <= 800;
 let initial_data = [];
 let current_data = [];
@@ -65,6 +68,7 @@ let wordcloudPercentage = false;
 let wordcloudOrderCount = false;
 let nbMaxWords = 20;
 let nbMinCount = 10;
+let minScore = 1;
 let searchTerm = "";
 
 let wordcloudSize = 4;
@@ -135,7 +139,7 @@ function filter_pixels(numberOfDays) {
         compute_tag_stats(current_data);
         compute_weekdays_stats(current_data);
         compute_months_stats(current_data);
-        get_word_frequency(current_data, wordcloudOrderCount, searchTerm);
+        get_word_frequency(current_data, wordcloudOrderCount, minScore, searchTerm);
 
         calculate_and_display_stats(current_data);
         create_mood_chart(current_data, averagingValue, showAverage, showYears);
@@ -182,7 +186,7 @@ async function handle_file_upload(file) {
             compute_tag_stats(current_data);
             compute_weekdays_stats(current_data);
             compute_months_stats(current_data);
-            get_word_frequency(current_data, wordcloudOrderCount, searchTerm);
+            get_word_frequency(current_data, wordcloudOrderCount, minScore, searchTerm);
 
             // Graphics
             create_mood_chart(current_data, averagingValue, showAverage, showYears);
@@ -236,7 +240,7 @@ document.addEventListener("DOMContentLoaded", () => {
     if (DEV_MODE) {
         auto_load_data(DEV_FILE_PATH);
         setTimeout(() => {
-            window.scrollTo(0, document.body.scrollHeight - 2000);
+            window.scrollTo(0, SCROLL_TO);
         }, 500);
     }
 
@@ -341,7 +345,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
     words_order_checkbox.addEventListener("change", (e) => {
         wordcloudOrderCount = e.target.checked;
-        get_word_frequency(current_data, wordcloudOrderCount, searchTerm);
+        get_word_frequency(current_data, wordcloudOrderCount, minScore, searchTerm);
         create_word_frequency_section(current_data, nbMaxWords, nbMinCount, wordcloudPercentage, searchTerm);
     });
 
@@ -355,9 +359,16 @@ document.addEventListener("DOMContentLoaded", () => {
         create_word_frequency_section(current_data, nbMaxWords, nbMinCount, wordcloudPercentage, searchTerm);
     });
 
+    min_score_slider.addEventListener("input", (e) => {
+        minScore = (parseInt(e.target.value) / 10).toFixed(1);
+        min_score_slider_text_value.textContent = minScore;
+        get_word_frequency(current_data, wordcloudOrderCount, minScore, searchTerm);
+        create_word_frequency_section(current_data, nbMaxWords, nbMinCount, wordcloudPercentage, searchTerm);
+    });
+
     words_search_input.addEventListener("input", (e) => {
         searchTerm = e.target.value.toLowerCase();
-        get_word_frequency(current_data, wordcloudOrderCount, searchTerm);
+        get_word_frequency(current_data, wordcloudOrderCount, minScore, searchTerm);
         create_word_frequency_section(current_data, nbMaxWords, nbMinCount, wordcloudPercentage, searchTerm);
     });
 
diff --git a/scripts/png.js b/scripts/png.js
@@ -59,6 +59,18 @@ function set_image_settings(settings) {
 }
 
 
+function get_user_colors() {
+    return [
+        setting_color1.value,
+        setting_color2.value,
+        setting_color3.value,
+        setting_color4.value,
+        setting_color5.value,
+        setting_colorEmpty.value
+    ];
+}
+
+
 function get_pixel_color(pixel, scoreType, colorMap) {
     if (!pixel || !Array.isArray(pixel.scores) || pixel.scores.length === 0) {
         return colorMap.empty;
diff --git a/scripts/statistics.js b/scripts/statistics.js
@@ -73,20 +73,71 @@ function calculate_and_display_stats(data) {
     });
 
     stats = [
-        ["Number of Pixels", data.length],
-        ["Average score", average(allScores).toFixed(2)],
-        ["Streaks", `Best: ${streaks.bestStreak} | Latest: ${streaks.latestStreak}`],
+        ["Number of Pixels", `<p>${data.length}</p>`],
+        ["Average score", `<p>${average(allScores).toFixed(2)}</p>`],
+        ["Streaks", `<p>Best: ${streaks.bestStreak} | Latest: ${streaks.latestStreak}</p>`],
+        ["Score distribution", "<canvas id='scoresPieChart' class='pie-chart' width='100' height='100'></canvas>"],
     ];
 
     stats_container.innerHTML = stats.map(([title, value]) => `
         <div class="stat-card">
             <h3>${title}</h3>
-            <p>${value}</p>
+            ${value}
         </div>
-    `).join("")
+    `).join("");
+
+    create_scores_pie_chart();
+}
+
+
+async function create_scores_pie_chart() {
+    const rawScores = current_data.reduce((acc, entry) => {
+        entry.scores.forEach(score => {
+            acc[score] = (acc[score] || 0) + 1;
+        });
+        return acc;
+    }, {});
+
+    const scoresCount = Object.keys(rawScores).map(Number);
+    const values = scoresCount.map(score => rawScores[score] || 0);
+
+    const ctx = document.querySelector("#scoresPieChart").getContext("2d");
+    new Chart(ctx, {
+        type: "pie",
+        data: {
+            labels: scoresCount,
+            datasets: [{
+                label: "Scores",
+                data: values,
+                backgroundColor: get_user_colors(),
+                borderColor: "#000000",
+                borderWidth: 1
+            }]
+        },
+        options: {
+            responsive: false,
+            plugins: {
+                legend: {
+                    display: false
+                },
+                tooltip: {
+                    callbacks: {
+                        label: function (context) {
+                            const value = context.parsed;
+                            const data = context.chart.data.datasets[0].data;
+                            const total = data.reduce((a, b) => a + b, 0);
+                            const percentage = ((value / total) * 100).toFixed(1);
+                            return `${percentage}%`;
+                        }
+                    }
+                }
+            }
+        }
+    });
 }
 
 
+
 function compute_tag_stats(data) {
     const tagCounts = {};
     const tagScores = {};
@@ -152,13 +203,13 @@ function compute_months_stats(data) {
 }
 
 
-function get_word_frequency(data, orderByMood, searchText) {
+function get_word_frequency(data, orderByMood, minScore, searchText) {
     const wordData = {}; // { word: { count: X, scores: [n, n, ...] } }
     const searchTextLower = normalize_string(searchText);
     const searchWords = searchTextLower
-                        .split(/\s+/)
-                        .map(word => normalize_string(word))
-                        .filter(word => word);
+        .split(/\s+/)
+        .map(word => normalize_string(word))
+        .filter(word => word);
 
     let searchPattern = null;
     if (searchTextLower.includes("*")) {
@@ -197,6 +248,7 @@ function get_word_frequency(data, orderByMood, searchText) {
                 (word.replace(/[^a-zA-Z]/g, "").length >= 3) && // Word is at least 3 letters long
                 (!STOP_WORDS.has(word)) && // Word is not a stop word
                 (searchTextLower !== word) && // Word is not the search term (already counted above)
+                (average(entry.scores) >= minScore) && // Word meets min score requirement
                 (
                     (searchWords.length === 0) || // Either no search words or
                     searchWords.some((sw, i) => {
@@ -257,19 +309,19 @@ async function create_word_frequency_section(data, maxWords, minCount, inPercent
     if (words_filtered.length > 0) {
         word_freq_container.innerHTML = `
             ${words_filtered.map(word => {
-                let isWordSearched = false;
-                if (searchText) {
-                    const normalizedSearchText = normalize_string(searchText);
-                    isWordSearched = (normalize_string(word.word) === normalizedSearchText) ||
+            let isWordSearched = false;
+            if (searchText) {
+                const normalizedSearchText = normalize_string(searchText);
+                isWordSearched = (normalize_string(word.word) === normalizedSearchText) ||
                     searchText.split(/\s+/)
-                    .some(term => normalize_string(word.word) === (normalize_string(term)));
-                }
-                return `<div class="word-card ${isWordSearched ? "searched-word" : ""}">
+                        .some(term => normalize_string(word.word) === (normalize_string(term)));
+            }
+            return `<div class="word-card ${isWordSearched ? "searched-word" : ""}">
                 <h4>${capitalize(word.word)}</h4>
                 <p title="Number of apearance">${inPercentage ? (100 * word.count / data.length).toFixed(1) + "%" : word.count}</p>
                 <p title="Average score">${(word.avg_score).toFixed(2)}</p>
                 </div>`
-            }
+        }
         ).join("")}`
     }
     else { word_freq_container.innerHTML = "<p>No word frequency data available</p>"; }
@@ -281,7 +333,7 @@ async function create_word_frequency_section(data, maxWords, minCount, inPercent
 async function update_wordcloud(minCount) {
     const words = full_word_frequency
         .filter(word => word.count >= minCount)
-        .sort((a, b) => { 
+        .sort((a, b) => {
             if (wordcloudOrderCount) { // Global variable
                 return b.avg_score - a.avg_score;
             }
diff --git a/scripts/storage.js b/scripts/storage.js
@@ -19,6 +19,7 @@ async function store_settings() {
         wordcloudOrderCount,
         nbMaxWords,
         nbMinCount,
+        minScore,
 
         wordcloudSize,
         wordcloudSpacing,
@@ -94,6 +95,11 @@ async function load_settings() {
         nbMinCount = settings.nbMinCount;
         words_count_input.value = nbMinCount;
 
+        // Min score
+        minScore = settings.minScore;
+        min_score_slider.value = 10 * minScore;
+        min_score_slider_text_value.textContent = minScore;
+
         // Wordcloud size
         wordcloudSize = settings.wordcloudSize;
         wordcloud_size_input.value = wordcloudSize;
diff --git a/styles/main.css b/styles/main.css
@@ -128,6 +128,10 @@ a:hover {
 
 
 .stat-card {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
     background-color: var(--secondary-bg);
     padding: 0.7rem;
     border-radius: 8px;
@@ -140,10 +144,22 @@ a:hover {
 
     & p {
         font-size: 1.3rem;
+        margin: 0 0 1rem;
         color: var(--text-color);
     }
+
+    .pie-chart {
+        display: none;
+        width: 150px;
+        height: 150px;
+    }
+
+    &:hover .pie-chart {
+        display: block;
+    }
 }
 
+
 .chart-container {
     background-color: var(--secondary-bg);
     padding: 1rem;
diff --git a/styles/options.css b/styles/options.css
@@ -79,11 +79,11 @@ input[type="color"], select {
 }
 
 
-.range-average {
+.range-slider {
     width: 100%;
-    margin-bottom: 1rem;
 }
 
+
 .input-nb {
     width: 60px;
     height: 20px;

Original file line number	Diff line number	Diff line change
`@@ -79,11 +79,11 @@ input[type="color"], select {`
`79`	`79`	`}`
`80`	`80`
`81`	`81`
`82`		`-.range-average {`
	`82`	`+.range-slider {`
`83`	`83`	`width: 100%;`
`84`		`- margin-bottom: 1rem;`
`85`	`84`	`}`
`86`	`85`
	`86`	`+`
`87`	`87`	`.input-nb {`
`88`	`88`	`width: 60px;`
`89`	`89`	`height: 20px;`