update to v6

sgratzl · Aug 27, 2020 · 16c9df8 · 16c9df8
1 parent 7fabb1f
commit 16c9df8
Show file tree

Hide file tree

Showing 13 changed files with 51 additions and 40 deletions.
diff --git a/README.md b/README.md
@@ -243,9 +243,7 @@ Most important selectors explained in an example
     </style>
   </head>
   <body>
-    <div class="header">
-      D3 Test
-    </div>
+    <div class="header">D3 Test</div>
     <div id="main">
       <p class="header">Lorem Impsum Header</p>
       <p>Lorem Impsum</p>
@@ -724,7 +722,7 @@ Adding linear and ordinal scale: [barchart04_scale.html](examples/barchart04_sca
 
 ## Interactivity
 
-Interactivity is event-driven as in the usual DOM. However, you have easy access to the currently bound data-item. The raw DOM event is hidden but can be accessed using `d3.event`. This is useful for stopping the event propagation (bubbling) `d3.event.stopPropagation()` or preventing the default behavior `d3.event.preventDefault()`. Moreover, the current context of the function `this` is the current DOM element.
+Interactivity is event-driven as in the usual DOM. However, you have easy access to the currently bound data-item as the second argument to the event listener. The first argument is the DOM event itself, which is useful for stopping the event propagation (bubbling) or preventing the default behavior. Moreover, the current context of the function `this` is the current DOM element.
 
 ```js
 const data = [1, 2, 3];
@@ -738,8 +736,8 @@ const circles = d3
       .attr("r", 10)
       .attr("cy", 40)
       .attr("cx", (d, i) => 30 + i * 30)
-      .on("click", function (d, i) {
-        console.log(`clicked on: ${d} (${i})`);
+      .on("click", function (event, d) {
+        console.log(`clicked on: ${d}`);
         const circle = d3.select(this); // can't use arrow scoping
         circle.style("stroke", "orange");
       })

diff --git a/examples/barchart07_final_ts.ts b/examples/barchart07_final_ts.ts
@@ -14,7 +14,7 @@ const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.t
 g.append("g").attr("class", "x axis");
 g.append("g").attr("class", "y axis");
 
-// delcare the Data Element Type for proper typing
+// declare the data element type for proper typing
 interface IElem {
   temperature: number;
   location: {
@@ -36,7 +36,7 @@ const yaxis = d3.axisLeft(yscale);
 
 /////////////////////////
 
-d3.json("weather.json").then((json: IElem[]) => {
+d3.json<IElem[]>("weather.json").then((json: IElem[]) => {
   data = json;
 
   update(data);
@@ -48,13 +48,13 @@ function update(new_data: IElem[]) {
   xscale.domain([0, d3.max(new_data, (d) => d.temperature)!]);
   yscale.domain(new_data.map((d) => d.location.city));
   //render the axis
-  // specify the generic argument to enforce being a SVGGEelement
+  // specify the generic argument to enforce being a SVGGElement
   g.select<SVGGElement>(".x.axis").transition().call(xaxis);
   g.select<SVGGElement>(".y.axis").transition().call(yaxis);
 
   // Render the chart with new data
 
-  // DATA JOIN use the key argument for ensurign that the same DOM element is bound to the same data-item
+  // DATA JOIN use the key argument for ensuring that the same DOM element is bound to the same data-item
   const rect = g
     .selectAll("rect")
     .data(new_data, (d) => (d as IElem).location.city) // key argument cannot be properly typed
@@ -85,7 +85,7 @@ function update(new_data: IElem[]) {
   rect.select("title").text((d) => d.location.city);
 }
 
-//interactivity
+// interactivity
 d3.select<HTMLInputElement, unknown>("#filter-us-only").on("change", function () {
   // This will be triggered when the user selects or unselects the checkbox
   // since we typed the select such that this is a HTMLInputElement we can just use the this context and have proper autocompletion

diff --git a/examples/choropleth.html b/examples/choropleth.html
@@ -47,7 +47,7 @@ <h1>US Choropleth Map</h1>
       const path = d3.geoPath(projection);
       const color = d3.scaleSequential(d3.interpolateBlues);
 
-      d3.json('https://cdn.jsdelivr.net/npm/us-atlas/states-10m.json').then((us) => {
+      d3.json("https://cdn.jsdelivr.net/npm/us-atlas/states-10m.json").then((us) => {
         const states = topojson.feature(us, us.objects.states).features;
         const nation = topojson.feature(us, us.objects.nation).features[0];
 
@@ -57,22 +57,24 @@ <h1>US Choropleth Map</h1>
         const data = states.map((feature) => ({
           feature: feature,
           name: feature.properties.name,
-          value: Math.random() // random value
+          value: Math.random(), // random value
         }));
 
-        const paths = svg.selectAll('path').data(data)
+        const paths = svg
+          .selectAll("path")
+          .data(data)
           .join((enter) => {
-            const p = enter.append('path');
-            p.on('mouseenter', function() { 
+            const p = enter.append("path");
+            p.on("mouseenter", function () {
               // move the SVG element after all other elements to be on the top
               d3.select(this).raise();
             });
-            p.append('title');
+            p.append("title");
             return p;
           })
-          .attr('d', (d) => path(d.feature))
-          .style('fill', (d) => color(d.value));
-        paths.select('title').text((d) => d.name);
+          .attr("d", (d) => path(d.feature))
+          .style("fill", (d) => color(d.value));
+        paths.select("title").text((d) => d.name);
       });
     </script>
   </body>

diff --git a/examples/css_example.html b/examples/css_example.html
@@ -41,9 +41,7 @@
     </style>
   </head>
   <body>
-    <div class="header">
-      D3 Test
-    </div>
+    <div class="header">D3 Test</div>
     <div id="main">
       <p class="header">Lorem Impsum Header</p>
       <p>Lorem Impsum</p>

diff --git a/examples/mcv01_initial.html b/examples/mcv01_initial.html
@@ -163,7 +163,7 @@ <h3>Age Histogram</h3>
 
       function wrangleData(filtered) {
         const ageHistogram = d3
-          .histogram()
+          .bin()
           .domain([0, 100])
           .thresholds(10)
           .value((d) => d.age);

diff --git a/examples/mcv02_piechart.html b/examples/mcv02_piechart.html
@@ -192,7 +192,7 @@ <h3>Age Histogram</h3>
 
       function wrangleData(filtered) {
         const ageHistogram = d3
-          .histogram()
+          .bin()
           .domain([0, 100])
           .thresholds(10)
           .value((d) => d.age);

diff --git a/examples/mcv03_interaction.html b/examples/mcv03_interaction.html
@@ -226,7 +226,7 @@ <h3>Age Histogram</h3>
 
       function wrangleData(filtered) {
         const ageHistogram = d3
-          .histogram()
+          .bin()
           .domain([0, 100])
           .thresholds(10)
           .value((d) => d.age);

diff --git a/examples/mcv04_morevisses.html b/examples/mcv04_morevisses.html
@@ -197,7 +197,7 @@ <h3>Age Histogram</h3>
                 const path_enter = enter.append("path");
                 // TODO register click handler to change selected sex in state and call updateApp()
                 path_enter.append("title");
-                path_enter.on("click", (d) => {
+                path_enter.on("click", (e, d) => {
                   if (state.selectedSex === d.data.key) {
                     state.selectedSex = null;
                   } else {
@@ -243,7 +243,7 @@ <h3>Age Histogram</h3>
 
       function wrangleData(filtered) {
         const ageHistogram = d3
-          .histogram()
+          .bin()
           .domain([0, 100])
           .thresholds(10)
           .value((d) => d.age);

diff --git a/examples/mcv05_transitions.html b/examples/mcv05_transitions.html
@@ -206,7 +206,7 @@ <h3>Survived Distribution</h3>
                 const path_enter = enter.append("path");
                 // TODO register click handler to change selected sex in state and call updateApp()
                 path_enter.append("title");
-                path_enter.on("click", (d) => {
+                path_enter.on("click", (e, d) => {
                   if (state.selectedSex === d.data.key) {
                     state.selectedSex = null;
                   } else {
@@ -255,7 +255,7 @@ <h3>Survived Distribution</h3>
 
       function wrangleData(filtered) {
         const ageHistogram = d3
-          .histogram()
+          .bin()
           .domain([0, 100])
           .thresholds(10)
           .value((d) => d.age);
@@ -269,7 +269,7 @@ <h3>Survived Distribution</h3>
         }));
 
         const fareHistogram = d3
-          .histogram()
+          .bin()
           .domain([0, d3.max(filtered, (d) => d.fare)])
           .value((d) => d.fare);
 

diff --git a/examples/mcv06_final.html b/examples/mcv06_final.html
@@ -218,7 +218,7 @@ <h3>Survived Distribution</h3>
                 const path_enter = enter
                   .append("path")
                   .attr("d", (d, i) => arc(noSlice[i]))
-                  .on("click", (d) => {
+                  .on("click", (e, d) => {
                     if (state[stateAttr] === d.data.key) {
                       state[stateAttr] = null;
                     } else {
@@ -270,7 +270,7 @@ <h3>Survived Distribution</h3>
 
       function wrangleData(filtered) {
         const ageHistogram = d3
-          .histogram()
+          .bin()
           .domain([0, 100])
           .thresholds(10)
           .value((d) => d.age);
@@ -284,7 +284,7 @@ <h3>Survived Distribution</h3>
         }));
 
         const fareHistogram = d3
-          .histogram()
+          .bin()
           .domain([0, d3.max(filtered, (d) => d.fare)])
           .value((d) => d.fare);
 

diff --git a/examples/mcv06_final_ts.ts b/examples/mcv06_final_ts.ts
@@ -1,3 +1,6 @@
+/// <reference types="d3" />
+/// <reference path="../tsd.d.ts" />
+
 declare type Sex = "female" | "male";
 declare type Survival = "0" | "1";
 
@@ -168,11 +171,12 @@ function createPieChart(
           const path_enter = enter
             .append("path")
             .attr("d", (_d, i) => arc(noSlice[i]))
-            .on("click", (d) => {
-              if (state[stateAttr] === d.data.key) {
+            .on("click", (_e, d) => {
+              // note: because of missing D3 v6 typings
+              if (state[stateAttr] === ((d as unknown) as d3.PieArcDatum<IPersonGroup>).data.key) {
                 state[stateAttr] = null;
               } else {
-                state[stateAttr] = d.data.key as any;
+                state[stateAttr] = ((d as unknown) as d3.PieArcDatum<IPersonGroup>).data.key as any;
               }
               updateApp();
             });
@@ -220,7 +224,7 @@ function filterData() {
 
 function wrangleData(filtered: IPerson[]) {
   const ageHistogram = d3
-    .histogram<IPerson, number>()
+    .bin<IPerson, number>()
     .domain([0, 100])
     .thresholds(10)
     .value((d) => d.age);
@@ -234,7 +238,7 @@ function wrangleData(filtered: IPerson[]) {
   }));
 
   const fareHistogram = d3
-    .histogram<IPerson, number>()
+    .bin<IPerson, number>()
     .domain([0, d3.max(filtered, (d) => d.fare)!])
     .value((d) => d.fare);
 

diff --git a/tsconfig.json b/tsconfig.json
@@ -68,6 +68,7 @@
   },
 
   "include": [
-    "examples/*.ts"
+    "examples/*.ts",
+    "tsd.d.ts"
   ]
 }
diff --git a/tsd.d.ts b/tsd.d.ts
@@ -0,0 +1,8 @@
+/// <reference types="d3" />
+
+// d3 v6 typing patch
+declare namespace d3 {
+    export function bin(): d3.HistogramGeneratorNumber<number, number>;
+    export function bin<Datum, Value extends number | undefined>(): d3.HistogramGeneratorNumber<Datum, Value>;
+    export function bin<Datum, Value extends Date | undefined>(): d3.HistogramGeneratorDate<Datum, Value>;
+}