Clean up data binding

breviloquia-italica · Jan 24, 2024 · e99332e · e99332e
1 parent 14c312a
commit e99332e
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 39 deletions.
diff --git a/src/controllers/lexicon_controller.ts b/src/controllers/lexicon_controller.ts
@@ -30,21 +30,27 @@ export default class extends Controller {
       (d) => d.word,
     );
 
+    // TODO: improve sorting? Maybe do it on first init by count?
+    const sorted = Array.from(countByWord).sort(([a], [b]) =>
+      a.localeCompare(b),
+    );
+    //const sorted = Array.from(countByWord).sort(([x, a], [y, b]) => b - a);
+
     d3.select(this.selectTarget)
-      .selectAll("option")
-      .data(countByWord)
+      .selectAll<HTMLOptionElement, [string, number]>("option")
+      .data(sorted, ([k]) => k)
       .join(
-        (enter: any) => {
+        (enter) => {
           return enter
             .append("option")
-            .attr("value", ([k, v]: [string, number]) => k)
-            .attr("count", ([k, v]: [string, number]) => v)
-            .text(([k, v]: [string, number]) => k);
+            .attr("value", ([k]) => k)
+            .attr("count", ([, v]) => v)
+            .text(([k]) => k);
         },
-        (update: any) => {
-          return update.attr("count", ([k, v]: [string, number]) => v);
+        (update) => {
+          return update.attr("count", ([, v]) => v);
         },
-        (exit: any) => {
+        (exit) => {
           return exit.attr("count", "0");
         },
       );

diff --git a/src/controllers/map_controller.ts b/src/controllers/map_controller.ts
@@ -32,7 +32,7 @@ export default class extends Controller {
 
   projection!: d3.GeoProjection;
   hexbin!: Hexbin<[number, number]>;
-  svg!: any;
+  svg!: d3.Selection<SVGGElement, unknown, null, undefined>;
   extent!: [[number, number], [number, number]];
 
   facet: FacetRow[] = [];
@@ -70,7 +70,7 @@ export default class extends Controller {
   disconnect() {}
 
   redraw() {
-    const dee = this.facet
+    const dee: [number, number][] = this.facet
       .filter(this.wordFilter)
       .filter(this.timeFilter)
       .map(({ x, y }) => [x, y]);
@@ -82,35 +82,23 @@ export default class extends Controller {
 
     this.svg
       .select("#hexbins")
-      .selectAll("path")
-      .data(this.hexbin(dee))
+      .selectAll<SVGPathElement, Hexbin<[number, number]>[]>("path")
+      .data(this.hexbin(dee)) // TODO: unique indexing of bins so we can gray out empty ones
       .join(
-        (enter: any) => {
+        (enter) => {
           return enter
             .append("path")
             .attr("d", this.hexbin.hexagon())
-            .attr("transform", function (d: any) {
-              return "translate(" + d.x + "," + d.y + ")";
-            })
-            .attr("fill", function (d: any) {
-              return color(d.length);
-            });
+            .attr("transform", ({ x, y }) => `translate(${x},${y})`)
+            .attr("fill", (d) => color(d.length));
         },
-        (update: any) => {
+        (update) => {
           return update
-            .attr("fill", function (d: any) {
-              return color(d.length);
-            })
-            .attr("transform", function (d: any) {
-              return "translate(" + d.x + "," + d.y + ")";
-            });
+            .attr("transform", ({ x, y }) => `translate(${x},${y})`)
+            .attr("fill", (d) => color(d.length));
         },
-        (exit: any) => {
+        (exit) => {
           return exit.remove();
-          // FIXME: this doesn't quite work, as hexbins are not generated in a linear fashion
-          return exit.attr("fill", function (d: any) {
-            return "#BBB";
-          });
         },
       );
   }

diff --git a/src/controllers/timeline_controller.ts b/src/controllers/timeline_controller.ts
@@ -77,13 +77,27 @@ export default class extends Controller {
 
     this.svg
       .select("#bars")
-      .selectAll("rect")
-      .data(this.histogramData)
-      .join("rect")
-      .attr("width", 2) // bandwidth?
-      .attr("height", (d) => this.height - this.yScale(d.count))
-      .attr("y", (d) => this.yScale(d.count))
-      .attr("x", (d) => this.xScale(new Date(d.day)));
+      .selectAll<SVGRectElement, { day: string; count: number }>("rect")
+      .data(this.histogramData, (d) => d.day)
+      .join(
+        (enter) => {
+          return enter
+            .append("rect")
+            .attr("width", 2) // TODO: compute band width
+            .attr("height", (d) => this.height - this.yScale(d.count))
+            .attr("y", (d) => this.yScale(d.count))
+            .attr("x", (d) => this.xScale(new Date(d.day)));
+        },
+        (update) => {
+          return update
+            .attr("height", (d) => this.height - this.yScale(d.count))
+            .attr("y", (d) => this.yScale(d.count))
+            .attr("x", (d) => this.xScale(new Date(d.day)));
+        },
+        (exit) => {
+          return exit.remove();
+        },
+      );
   }
 
   redrawXAxis() {