fix: dominican republic issue, add speed to bar, fix cartogram

Author: johannayara

data/data_date_nat.py

@@ -35,6 +35,7 @@
 
 def find_match(nationality, country_names):
     nationality_lower = nationality.lower().strip()
+    country_names.sort(key = len, reverse = True)
     for name in country_names:
         if nationality_lower in name.lower() or name.lower() in nationality_lower:
             return name
@@ -64,7 +65,6 @@ def find_match(nationality, country_names):
     lambda n: find_match(n, all_names)
 )
 
-# Merge country metadata (without population columns — those are in pop_long)
 country_meta = all_countries[["name", "country-code", "alpha-2"]].copy()
 merged = pd.merge(
     grouped,
@@ -75,11 +75,16 @@ def find_match(nationality, country_names):
 )
 merged = merged.rename(columns={"country-code": "ID", "alpha-2":"alpha2"})
 
+def exceptions(series):
+    if series.iloc[0] == "Scotland":
+        return "United Kingdom"
+    return series.iloc[0]
+
 merged_agg = (
     merged
     .groupby(["ID", "alpha2", "year"], dropna=False)
     .agg(
-        nationality=("nationality", "first"),
+        nationality=("nationality", exceptions),
         counts=("counts", "sum"),
     )
     .reset_index()

data/data_nationality.py

@@ -28,7 +28,6 @@ def find_match(nationality, country_names):
         return aliases[nationality]
     return None
 
-# TODO: figure out how to map scotland
 nationalities["nationality"] = nationalities["nationality"].apply(lambda n: re.findall(r"[\w'\s]+", str(n))).explode("nationality")
 nationalities["nationality"] = nationalities["nationality"].str.lstrip()
 nationalities = nationalities.groupby(['nationality']).size().reset_index(name='counts')

data/datasets/population.csv

@@ -36,7 +36,7 @@ fingerprintAlgorithm = "sha256"
   recentLimit = 5
 
 [article]
-  showDate = true
+  showDate = false
   showDateUpdated = false
   showAuthor = true
   showBreadcrumbs = true
@@ -47,8 +47,8 @@ fingerprintAlgorithm = "sha256"
   showHeadingAnchors = true
   showPagination = true
   invertPagination = false
-  showReadingTime = true
-  showTableOfContents = true
+  showReadingTime = false
+  showTableOfContents = false
   showTaxonomies = false
   showWordCount = false
   showComments = false

website/config/_default/params.toml

@@ -5,7 +5,16 @@ description: "Bar race representing books published by each author nationality o
 tags: ["d3", "visualization"]
 layout: "simple"
 ---
-Toggle the button to see the race with data scaled by inhabitants. Please wait for the race to end to scale the data :)
+This vizualisation represents the amount of authors from a country over time. There is also the possibility to scale it per million of inhabitants. The data spans from 2013 to 2022, that is because these are the ranges available in the international bestsellers dataset.
+We have chosen to only show the first 10 countries.
+
+This allows us to see that even though the United States publish more books, they do not have the biggest ratio of authors per million of inhabitants. Using the scaled view allows us to see tha Iceland has about 32 authors per million inhabitants in 2022, which by far the country with the most authors overall.
+It is good to see the top 3 of countries change, when scaled it is Iceland, Norway and Spain otherwise it is the United States, France and Spain. Spain seems to have a high enough amount of authors that even when scaled it remains in the top 3.
+
+
+
+
+*Toggle the button to see the race with data scaled by inhabitants. Please note that the toggle is disabled while the race is running :)*
 <!-- prettier-ignore-start -->
 {{< d3 >}}
 const n = 10;
@@ -15,17 +24,21 @@ const margin = { top: 20, right: 6, bottom: 6, left: 50 };
 const width = container.clientWidth - margin.left - margin.right;
 const height = margin.top + barSize * n + margin.bottom;
 
+
 const svg = d3.select(container).append("svg")
   .attr("width", width + margin.left + margin.right)
   .attr("height", height + margin.top + margin.bottom)
   .append("g")
   .attr("transform", `translate(${margin.left},${margin.top})`);
 
+d3.select(container).style("position", "relative");
+
 const isDark = document.documentElement.classList.contains("dark");
 const labelColor = isDark ? congoColors.neutral100 : congoColors.neutral700;
 
 // --- Toggle ---
 let useScaled = false;
+let animDuration = 250;
 
 const toggleWrapper = d3.select(container).insert("div", "svg")
   .style("margin-bottom", "10px")
@@ -74,6 +87,43 @@ toggleWrapper.append("span")
   .style("font-size", "15px")
   .style("color", congoColors.neutral700);
 
+toggleWrapper.append("span")
+  .text("Speed:")
+  .style("font-size", "15px")
+  .style("color", congoColors.neutral700)
+  .style("margin-left", "20px");
+
+
+const speedSlider = toggleWrapper.append("input")
+  .attr("type", "range")
+  .attr("min", 50)
+  .attr("max", 1000)
+  .attr("value", 250)
+  .attr("step", 50)
+  .style("accent-color", congoColors.primary300)
+  .style("cursor", "pointer");
+
+
+const speedLabel = toggleWrapper.append("span")
+  .text("1x")
+  .style("font-size", "15px")
+  .style("min-width", "35px")
+  .style("color", congoColors.neutral700);
+
+
+// --- Toggle ---
+const tooltip = d3.select(container).append("div")
+  .style("position", "absolute")
+  .style("background", isDark ? "#333" : "#fff")
+  .style("color", isDark ? "#fff" : "#333")
+  .style("border", "1px solid #ccc")
+  .style("border-radius", "6px")
+  .style("padding", "4px 10px")
+  .style("font-size", "13px")
+  .style("pointer-events", "none")
+  .style("opacity", 0)
+  .style("transition", "opacity 0.15s");
+
 function toFlag(alpha2) {
   if (!alpha2 || alpha2.length !== 2) return "🏳";
   return String.fromCodePoint(
@@ -111,6 +161,16 @@ d3.csv("{{< asset-url "data/nat_date.csv" >}}").then(data => {
     .rangeRound([margin.top, margin.top + barSize * (n + 1 + 0.1)])
     .padding(0.1);
 
+  speedSlider.on("input", function(event) {
+    animDuration = 1050 - +event.target.value;
+    // Invert so higher slider = faster, display as multiplier
+    const mult = (250 / animDuration).toFixed(1);
+    speedLabel.text(`${mult}x`);
+
+    svg.selectAll("*").interrupt();
+    run(keyframes);
+  });
+
   function rank(valueFn) {
     const arr = Array.from(nationalities, nationality => ({
       nationality,
@@ -170,7 +230,17 @@ d3.csv("{{< asset-url "data/nat_date.csv" >}}").then(data => {
           .attr("height", y.bandwidth())
           .attr("x", x(0))
           .attr("y", d => y((prev.get(d) || d).rank))
-          .attr("width", d => Math.max(0, x((prev.get(d) || d).counts) - x(0))),
+          .attr("width", d => Math.max(0, x((prev.get(d) || d).counts) - x(0)))
+          .on("mouseover", (event, d) => {
+            tooltip.style("opacity", 1).text(d.nationality);
+          })
+          .on("mousemove", (event) => {
+            const [x, y] = d3.pointer(event, container);
+            tooltip
+              .style("left", `${x + 12}px`)
+              .style("top", `${y - 28}px`);
+          })
+          .on("mouseout", () => tooltip.style("opacity", 0)),
         update => update,
         exit => exit.transition(transition).remove()
           .attr("y", d => y((next.get(d) || d).rank))
@@ -195,11 +265,21 @@ d3.csv("{{< asset-url "data/nat_date.csv" >}}").then(data => {
           .attr("dy", "0.35em")
           .attr("text-anchor", "end")
           .attr("opacity", 0)
-          .text(d => natToFlag.get(d.nationality) ?? "🏳"),
-        update => update,
-        exit => exit.transition(transition).remove()
-          .attr("y", d => y((next.get(d) || d).rank) + y.bandwidth() / 2)
-          .attr("opacity", 0)
+          .text(d => natToFlag.get(d.nationality) ?? "🏳")
+          .on("mouseover", (event, d) => {
+            tooltip.style("opacity", 1).text(d.nationality);
+          })
+          .on("mousemove", (event) => {
+            const rect = container.getBoundingClientRect();
+            tooltip
+              .style("left", (event.clientX - rect.left + 12) + "px")
+              .style("top",  (event.clientY - rect.top  - 28) + "px");
+          })
+          .on("mouseout", () => tooltip.style("opacity", 0)),
+          update => update,
+          exit => exit.transition(transition).remove()
+            .attr("y", d => y((next.get(d) || d).rank) + y.bandwidth() / 2)
+            .attr("opacity", 0)
       )
       .call(flag => flag.transition(transition)
         .attr("y", d => y(d.rank) + y.bandwidth() / 2)
@@ -278,23 +358,23 @@ d3.csv("{{< asset-url "data/nat_date.csv" >}}").then(data => {
     };
   }
 
-  let running = false;
+  let runId = 0;
+
+async function run(kf) {
+  const myId = ++runId;  // claim a unique ID for this run
 
-  async function run(kf) {
-    if (running) return;
-    running = true;
-    checkbox.attr("disabled", true).style("opacity", "0.4");
-    toggleWrapper.style("opacity", "0.4").style("pointer-events", "none");
-    svg.selectAll("*").remove();
+  svg.selectAll("*").remove();
 
-    const updateBars      = bars(svg);
-    const updateFlags     = flags(svg);
-    const updateValueTags = valueTags(svg);
-    const updateAxis      = axis(svg);
-    const updateTicker    = ticker(svg);
+  const updateBars      = bars(svg);
+  const updateFlags     = flags(svg);
+  const updateValueTags = valueTags(svg);
+  const updateAxis      = axis(svg);
+  const updateTicker    = ticker(svg);
 
+  try {
     for (const keyframe of kf) {
-      const transition = svg.transition().duration(250).ease(d3.easeLinear);
+      if (runId !== myId) break;
+      const transition = svg.transition().duration(animDuration).ease(d3.easeLinear);
       x.domain([0, d3.max(keyframe[1], d => d.counts)]);
       updateAxis(keyframe, transition);
       updateBars(keyframe, transition);
@@ -303,21 +383,22 @@ d3.csv("{{< asset-url "data/nat_date.csv" >}}").then(data => {
       updateTicker(keyframe, transition);
       await transition.end();
     }
-    running = false;
-    checkbox.attr("disabled", null).style("opacity", "1");
-    toggleWrapper.style("opacity", "1").style("pointer-events", "auto");
+  } catch {
   }
+}
 
-  run(keyframes);
+  run(keyframes)
 
-  checkbox.on("change", function() {
-    useScaled = this.checked;
+  checkbox.on("change", function(event) {
+    useScaled = event.target.checked;
     knob.style("background-color", useScaled ? congoColors.primary500 : congoColors.primary300);
     knob.select(".knob-inner").style("transform", useScaled ? "translateX(22px)" : "translateX(0)");
 
     formatNumber = useScaled ? formatScaled : formatRaw;
     keyframes = buildKeyframes(useScaled ? "counts" : "counts_raw");
     ({ prev, next } = getPrevNext(keyframes));
+
+    svg.selectAll("*").interrupt();
     run(keyframes);
   });
 });

website/content/festivities.svg

@@ -5,7 +5,9 @@ description: "Map that scales countries by the number of books published by auth
 tags: ["d3", "visualization"]
 layout: "simple"
 ---
-Toggle the button to discover the scaled map ! 
+This map explores the voices amplified by the publishing industry, by scaling the countries on the map by the number of the authors from these countries. This deformed map, called a cartogram, shows us that as expected most published authors come from European and North America. The United States, Italy and France are some of the countries with the most published authors from our dataset. It should be mentionned that this vizualisation was made with the international bestsellers dataset. This means that it might be skewed towards books published by bigger countries with more reach. We tried finding other datasets with author origin but this one was the best we found. Sadly,  our dataset covered few African, Central American and Central Asian authors.
+
+*Toggle the button to discover the scaled map !*
 <!-- prettier-ignore-start -->
 <script src="https://unpkg.com/topojson@3/dist/topojson.min.js"></script>
 <script src="{{< asset-url "js/cartogram.js" >}}"></script>
@@ -172,12 +174,12 @@ Promise.all([
     .on("mousemove", onMousemove)
     .on("mouseout", onMouseout);
 
-  // Draw cartogram countries
+  // Draw normal map first
   const paths = svg.selectAll(".carto-country")
     .data(cartoFeatures)
     .enter().append("path")
     .attr("class", "carto-country")
-    .attr("d", carto.path)
+    .attr("d", (d, i) => staticPath(normalFeatures[i]))  // ← use staticPath initially
     .attr("fill", color)
     .attr("stroke", congoColors.neutral100)
     .attr("stroke-width", 0.5)

website/content/visualizations/bar-race/index.md

@@ -117,8 +117,8 @@ ID,alpha2,year,nationality,counts,counts_raw
 208,DK,2019,Denmark,0.344,2
 208,DK,2021,Denmark,0.8537,5
 208,DK,2022,Denmark,0.1694,1
-212,DM,2018,Dominican Republic,14.6683,1
-212,DM,2019,Dominican Republic,58.9275,4
+214,DO,2018,Dominican Republic,0.0927,1
+214,DO,2019,Dominican Republic,0.3672,4
 233,EE,2020,Estonia,0.7522,1
 246,FI,2014,Finland,0.1831,1
 246,FI,2015,Finland,0.73,4
@@ -180,15 +180,6 @@ ID,alpha2,year,nationality,counts,counts_raw
 364,IR,2016,Iran,0.0119,1
 364,IR,2021,Iran,0.0113,1
 368,IQ,2016,Iraq,0.026,1
-372,IE,2014,Ireland,1.9323,9
-372,IE,2015,Ireland,1.2761,6
-372,IE,2016,Ireland,1.0498,5
-372,IE,2017,Ireland,0.4143,2
-372,IE,2018,Ireland,0.6125,3
-372,IE,2019,Ireland,0.4019,2
-372,IE,2020,Ireland,1.1905,6
-372,IE,2021,Ireland,0.9784,5
-372,IE,2022,Ireland,1.151,6
 376,IL,2014,Israel,0.4869,4
 376,IL,2015,Israel,0.4773,4
 376,IL,2016,Israel,0.117,1
@@ -251,9 +242,6 @@ ID,alpha2,year,nationality,counts,counts_raw
 508,MZ,2015,Mozambique,0.0377,1
 508,MZ,2016,Mozambique,0.0366,1
 508,MZ,2017,Mozambique,0.0355,1
-512,OM,2020,Romania,0.2211,1
-512,OM,2021,Romania,0.6666,3
-512,OM,2022,Romania,0.2114,1
 528,NL,2013,Netherlands,0.2975,5
 528,NL,2015,Netherlands,0.2361,4
 528,NL,2016,Netherlands,0.2349,4
@@ -267,8 +255,8 @@ ID,alpha2,year,nationality,counts,counts_raw
 554,NZ,2020,New Zealand,0.3943,2
 554,NZ,2021,New Zealand,0.1967,1
 554,NZ,2022,New Zealand,0.1968,1
-562,NE,2015,Nigeria,0.0502,1
-562,NE,2018,Nigeria,0.1803,4
+566,NG,2015,Nigeria,0.0052,1
+566,NG,2018,Nigeria,0.0195,4
 578,NO,2013,Norway,1.3781,7
 578,NO,2014,Norway,1.1679,6
 578,NO,2015,Norway,0.9636,5
@@ -301,6 +289,9 @@ ID,alpha2,year,nationality,counts,counts_raw
 620,PT,2020,Portugal,0.0971,1
 620,PT,2021,Portugal,0.0965,1
 620,PT,2022,Portugal,0.0958,1
+642,RO,2020,Romania,0.0519,1
+642,RO,2021,Romania,0.1569,3
+642,RO,2022,Romania,0.0525,1
 643,RU,2013,Russia,0.0626,9
 643,RU,2014,Russia,0.0416,6
 643,RU,2018,Russia,0.0275,4
@@ -379,15 +370,15 @@ ID,alpha2,year,nationality,counts,counts_raw
 818,EG,2020,Egypt,0.0091,1
 818,EG,2022,Egypt,0.0444,5
 826,GB,2013,United Kingdom,0.3118,20
-826,GB,2014,United Kingdom,0.6964,45
-826,GB,2015,Scotland,0.5685,37
-826,GB,2016,Scotland,0.5182,34
-826,GB,2017,United Kingdom,0.5761,38
-826,GB,2018,United Kingdom,0.4073,27
-826,GB,2019,United Kingdom,0.5853,39
-826,GB,2020,United Kingdom,0.5544,37
-826,GB,2021,United Kingdom,0.4628,31
-826,GB,2022,United Kingdom,0.429,29
+826,GB,2014,Ireland,0.8357,54
+826,GB,2015,Ireland,0.6606,43
+826,GB,2016,Ireland,0.5944,39
+826,GB,2017,Ireland,0.6064,40
+826,GB,2018,Ireland,0.4526,30
+826,GB,2019,Ireland,0.6153,41
+826,GB,2020,Ireland,0.6443,43
+826,GB,2021,Ireland,0.5374,36
+826,GB,2022,Ireland,0.5177,35
 834,TZ,2021,Tanzania,0.0159,1
 840,US,2013,United States,0.2684,85
 840,US,2014,United States,0.4385,140