Merge pull request #13 from com-480-data-visualization/8-gender-and-publishers

paulti viz description

Author: paultisaw

website/content/visualizations/languages/index.md

@@ -4,6 +4,10 @@ date: 2026-04-13
 description: "Guide to D3.js usage in Congo"
 layout: "simple"
 ---
+This chart shows the distribution of the languages of the published books in the goodreads dataset.
+
+Initially, one could think that goodreads contains a large panel of the books published over the world, but the large predominance of English suggests that there is very likely a bias. It might be because books with an english translation are marked as english, or because goodreads userbase mostly resides in North America and Europe.
+
 {{< rawhtml >}}
 <div class="waffle-page">
   <style>

website/content/visualizations/library/index.md

@@ -1,9 +1,17 @@
 ---
-title: "Library"
+title: "Women's bookshop"
 date: 2026-04-13
-description: "Guide to D3.js usage in Congo"
+description: "browse and filter books on an interactive shelf"
 layout: "simple"
 ---
+## Welcome to our bookshop ! 
+
+Press the button to discover books written exclusively by women from all over the world :)
+
+One cover raises your interest ? Click on it to read the synopsis !
+
+Or, if nothing looks interesting, just draw again or change the filters 🎲
+
 {{< rawhtml >}}
 <style>
     .max-w-prose:has(> .bookshelf-body) {
@@ -479,16 +487,6 @@ layout: "simple"
         <div class="controls-container">
             <h2 class="filter-title">Filters</h2>
             <div id="badges-container" class="badges-container">
-                <div class="badges-group">
-                    <div class="badges-group-label">Rating ⭐</div>
-                    <div class="rating-buttons">
-                        <button class="rating-btn" data-rating="0">All</button>
-                        <button class="rating-btn" data-rating="3">3+</button>
-                        <button class="rating-btn" data-rating="3.5">3.5+</button>
-                        <button class="rating-btn" data-rating="4">4+</button>
-                        <button class="rating-btn" data-rating="4.5">4.5+</button>
-                    </div>
-                </div>
                 <div class="badges-group">
                     <div class="badges-group-label">Language</div>
                     <div class="badges-list" id="language-badges"></div>
@@ -501,6 +499,16 @@ layout: "simple"
                     <button id="add-genre-btn" class="add-filter-btn">+ Select genres</button>
                     <div id="genre-dropdown" class="filter-dropdown" style="display: none;"></div>
                 </div>
+                <div class="badges-group">
+                    <div class="badges-group-label">Rating ⭐</div>
+                    <div class="rating-buttons">
+                        <button class="rating-btn" data-rating="0">All</button>
+                        <button class="rating-btn" data-rating="3">3+</button>
+                        <button class="rating-btn" data-rating="3.5">3.5+</button>
+                        <button class="rating-btn" data-rating="4">4+</button>
+                        <button class="rating-btn" data-rating="4.5">4.5+</button>
+                    </div>
+                </div>
             </div>
             <button id="draw-button">Draw new books!</button>
         </div>

website/content/visualizations/publishers/index.md

@@ -1,10 +1,27 @@
 ---
 title: "Publishers"
 date: 2026-04-13
-description: "Guide to D3.js usage in Congo"
+description: "compare gender representation across major publishers"
 layout: "simple"
 ---
+
+This charts explores the relationship betwen publishers and authors' gender.
+
+As we can see, few publishers are close to gender equality.
+
+One factor that seem to impact the ratio quite strongly is the most published book genres, as all publishers with a majority of books published by women have either Romance, Young Adult or both in their top 3. 
+
+On the other hand, publishers focusing on Classics/Literature, Science Fiction and Fantasy seem to be publishing men's books overwhelmingly.
 {{< rawhtml >}}
+<style>
+  #publisher-chart {
+    position: relative;
+    left: 50%;
+    transform: translateX(-50%);
+    width: max-content;
+    max-width: 100%;
+  }
+</style>
 <div>
   <div style="margin-bottom: 16px;">
     <label style="font-size: 12px; color: #666;">Sort by:</label>
@@ -33,7 +50,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
     const rowHeight = 25;
     const innerHeight = data.length * rowHeight;
-    const totalW = Math.min(1400, window.innerWidth - 40);
+    const totalW = Math.min(1250, window.innerWidth - 40);
     const width = totalW - margin.left - margin.right - 270;
     const height = innerHeight + margin.top + margin.bottom;