fix: typing

packages/visx-demo/src/sandboxes/visx-area/Example.tsx

@@ -127,8 +127,8 @@ export default withTooltip<AreaProps, TooltipData>(
           />
           <AreaClosed<AppleStock>
             data={stock}
-            x={d => dateScale(getDate(d))}
-            y={d => stockValueScale(getStockValue(d))}
+            x={d => dateScale(getDate(d)) ?? 0}
+            y={d => stockValueScale(getStockValue(d)) ?? 0}
             yScale={stockValueScale}
             strokeWidth={1}
             stroke="url(#area-gradient)"

packages/visx-demo/src/sandboxes/visx-bars/Example.tsx

@@ -52,7 +52,7 @@ export default function Example({ width, height, events = false }: BarsProps) {
         {data.map(d => {
           const letter = getLetter(d);
           const barWidth = xScale.bandwidth();
-          const barHeight = yMax - yScale(getLetterFrequency(d));
+          const barHeight = yMax - (yScale(getLetterFrequency(d)) ?? 0);
           const barX = xScale(letter);
           const barY = yMax - barHeight;
           return (

packages/visx-demo/src/sandboxes/visx-curve/Example.tsx

@@ -115,8 +115,8 @@ export default function Example({ width, height, showControls = true }: CurvePro
                 <LinePath<DateValue>
                   curve={allCurves[curveType]}
                   data={lineData}
-                  x={d => xScale(getX(d))}
-                  y={d => yScale(getY(d))}
+                  x={d => xScale(getX(d)) ?? 0}
+                  y={d => yScale(getY(d)) ?? 0}
                   stroke="#333"
                   strokeWidth={even ? 2 : 1}
                   strokeOpacity={even ? 0.6 : 1}

packages/visx-demo/src/sandboxes/visx-dots/Example.tsx

@@ -60,8 +60,8 @@ export default withTooltip<DotsProps, PointsRange>(
     const voronoiLayout = useMemo(
       () =>
         voronoi<PointsRange>({
-          x: d => xScale(x(d)),
-          y: d => yScale(y(d)),
+          x: d => xScale(x(d)) ?? 0,
+          y: d => yScale(y(d)) ?? 0,
           width,
           height,
         })(points),

packages/visx-demo/src/sandboxes/visx-glyph/Example.tsx

@@ -57,8 +57,8 @@ const yScale = scaleLinear<number>({
 });
 
 // positions
-const getX = (d: DateValue) => xScale(date(d));
-const getY = (d: DateValue) => yScale(value(d));
+const getX = (d: DateValue) => xScale(date(d)) ?? 0;
+const getY = (d: DateValue) => yScale(value(d)) ?? 0;
 
 export type GlyphProps = {
   width: number;

packages/visx-demo/src/sandboxes/visx-heatmap/Example.tsx

@@ -83,8 +83,8 @@ export default ({
       <Group top={margin.top} left={margin.left}>
         <HeatmapCircle
           data={binData}
-          xScale={xScale}
-          yScale={yScale}
+          xScale={d => xScale(d) ?? 0}
+          yScale={d => yScale(d) ?? 0}
           colorScale={circleColorScale}
           opacityScale={opacityScale}
           radius={radius}
@@ -115,8 +115,8 @@ export default ({
       <Group top={margin.top} left={xMax + margin.left + separation}>
         <HeatmapRect
           data={binData}
-          xScale={xScale}
-          yScale={yScale}
+          xScale={d => xScale(d) ?? 0}
+          yScale={d => yScale(d) ?? 0}
           colorScale={rectColorScale}
           opacityScale={opacityScale}
           binWidth={binWidth}

packages/visx-demo/src/sandboxes/visx-legend/Example.tsx

@@ -20,32 +20,32 @@ const sizeScale = scaleLinear<number>({
   range: [5, 13],
 });
 
-const sizeColorScale = scaleLinear<string>({
+const sizeColorScale = scaleLinear({
   domain: [0, 10],
   range: ['#75fcfc', '#3236b8'],
 });
 
-const quantileScale = scaleQuantile<string>({
+const quantileScale = scaleQuantile({
   domain: [0, 0.15],
   range: ['#eb4d70', '#f19938', '#6ce18b', '#78f6ef', '#9096f8'],
 });
 
-const linearScale = scaleLinear<string>({
+const linearScale = scaleLinear({
   domain: [0, 10],
   range: ['#ed4fbb', '#e9a039'],
 });
 
-const thresholdScale = scaleThreshold<number, string>({
+const thresholdScale = scaleThreshold({
   domain: [0.01, 0.02, 0.04, 0.06, 0.08],
   range: ['#f2f0f7', '#dadaeb', '#bcbddc', '#9e9ac8', '#756bb1', '#54278f'],
 });
 
-const ordinalColorScale = scaleOrdinal<string, string>({
+const ordinalColorScale = scaleOrdinal({
   domain: ['a', 'b', 'c', 'd'],
   range: ['#66d981', '#71f5ef', '#4899f1', '#7d81f6'],
 });
 
-const ordinalColor2Scale = scaleOrdinal<string, string>({
+const ordinalColor2Scale = scaleOrdinal({
   domain: ['a', 'b', 'c', 'd'],
   range: ['#fae856', '#f29b38', '#e64357', '#8386f7'],
 });
@@ -74,7 +74,7 @@ export default function Example({ events = false }: { events?: boolean }) {
         <LegendSize scale={sizeScale}>
           {labels =>
             labels.map(label => {
-              const size = sizeScale(label.datum);
+              const size = sizeScale(label.datum) ?? 0;
               const color = sizeColorScale(label.datum);
               return (
                 <LegendItem

packages/visx-demo/src/sandboxes/visx-radar/Example.tsx

@@ -73,7 +73,7 @@ export default function Example({ width, height, levels = 5, margin = defaultMar
 
   const webs = genAngles(data.length);
   const points = genPoints(data.length, radius);
-  const polygonPoints = genPolygonPoints(data, yScale, y);
+  const polygonPoints = genPolygonPoints(data, d => yScale(d) ?? 0, y);
   const zeroPoint = new Point({ x: 0, y: 0 });
 
   return width < 10 ? null : (
@@ -84,7 +84,7 @@ export default function Example({ width, height, levels = 5, margin = defaultMar
           <LineRadial
             key={`web-${i}`}
             data={webs}
-            angle={d => radialScale(d.angle)}
+            angle={d => radialScale(d.angle) ?? 0}
             radius={((i + 1) * radius) / levels}
             fill="none"
             stroke={silver}

packages/visx-demo/src/sandboxes/visx-responsive/Lines.tsx

@@ -41,8 +41,8 @@ export default ({ width, height }: Props) => {
           <Group key={`lines-${i}`} top={i * lineHeight}>
             <LinePath<DateValue>
               data={lineData}
-              x={d => xScale(getX(d))}
-              y={d => yScale(getY(d))}
+              x={d => xScale(getX(d)) ?? 0}
+              y={d => yScale(getY(d)) ?? 0}
               stroke="#ffffff"
               strokeWidth={1.5}
               shapeRendering="geometricPrecision"

packages/visx-demo/src/sandboxes/visx-shape-line-radial/Example.tsx

@@ -31,16 +31,16 @@ const date = (d: AppleStock) => new Date(d.date).valueOf();
 const close = (d: AppleStock) => d.close;
 
 // scales
-const xScale = scaleTime<number>({
+const xScale = scaleTime({
   range: [0, Math.PI * 2],
   domain: extent(appleStock, date),
 });
 const yScale = scaleLog<number>({
   domain: extent(appleStock, close),
 });
 
-const angle = (d: AppleStock) => xScale(date(d));
-const radius = (d: AppleStock) => yScale(close(d));
+const angle = (d: AppleStock) => xScale(date(d)) ?? 0;
+const radius = (d: AppleStock) => yScale(close(d)) ?? 0;
 
 const firstPoint = appleStock[0];
 const lastPoint = appleStock[appleStock.length - 1];
@@ -82,7 +82,7 @@ export default ({ width, height, animate = true }: LineRadialProps) => {
     <>
       {animate && (
         <>
-          <button onClick={handlePress} onTouchStart={handlePress}>
+          <button type="button" onClick={handlePress} onTouchStart={handlePress}>
             Animate
           </button>
           <br />
@@ -108,7 +108,7 @@ export default ({ width, height, animate = true }: LineRadialProps) => {
           {yScaleTicks.map((tick, i) => (
             <text
               key={`radial-grid-${i}`}
-              y={-yScale(tick)}
+              y={-(yScale(tick) ?? 0)}
               dy="-.33em"
               fontSize={8}
               fill={blue}
@@ -150,8 +150,8 @@ export default ({ width, height, animate = true }: LineRadialProps) => {
           </LineRadial>
 
           {[firstPoint, lastPoint].map((d, i) => {
-            const cx = (xScale(date(d)) * Math.PI) / 180;
-            const cy = -yScale(close(d));
+            const cx = ((xScale(date(d)) ?? 0) * Math.PI) / 180;
+            const cy = -(yScale(close(d)) ?? 0);
             return <circle key={`line-cap-${i}`} cx={cx} cy={cy} fill={darkgreen} r={3} />;
           })}
         </Group>

packages/visx-demo/src/sandboxes/visx-shape-splitlinepath/Example.tsx

@@ -45,12 +45,12 @@ export default function SplitPath({
 
   const getScaledX = useMemo(() => {
     const xScale = scaleLinear({ range: [0, width], domain: [0, width] });
-    return (d: Point) => xScale(getX(d));
+    return (d: Point) => xScale(getX(d)) ?? 0;
   }, [width]);
 
   const getScaledY = useMemo(() => {
     const yScale = scaleLinear({ range: [0, height], domain: [height, 0] });
-    return (d: Point) => yScale(getY(d));
+    return (d: Point) => yScale(getY(d)) ?? 0;
   }, [height]);
 
   return width < 10 ? null : (

packages/visx-demo/src/sandboxes/visx-stacked-areas/Example.tsx

@@ -52,9 +52,9 @@ export default function Example({
         left={margin.left}
         keys={keys}
         data={data}
-        x={d => xScale(getDate(d.data))}
-        y0={d => yScale(getY0(d))}
-        y1={d => yScale(getY1(d))}
+        x={d => xScale(getDate(d.data)) ?? 0}
+        y0={d => yScale(getY0(d)) ?? 0}
+        y1={d => yScale(getY1(d)) ?? 0}
       >
         {({ stacks, path }) =>
           stacks.map(stack => (

packages/visx-demo/src/sandboxes/visx-stats/Example.tsx

@@ -114,7 +114,7 @@ export default withTooltip<StatsPlotProps, TooltipData>(
                   minProps={{
                     onMouseOver: () => {
                       showTooltip({
-                        tooltipTop: yScale(min(d)) + 40,
+                        tooltipTop: yScale(min(d)) ?? 0 + 40,
                         tooltipLeft: xScale(x(d))! + constrainedWidth + 5,
                         tooltipData: {
                           min: min(d),
@@ -129,7 +129,7 @@ export default withTooltip<StatsPlotProps, TooltipData>(
                   maxProps={{
                     onMouseOver: () => {
                       showTooltip({
-                        tooltipTop: yScale(max(d)) + 40,
+                        tooltipTop: yScale(max(d)) ?? 0 + 40,
                         tooltipLeft: xScale(x(d))! + constrainedWidth + 5,
                         tooltipData: {
                           max: max(d),
@@ -144,7 +144,7 @@ export default withTooltip<StatsPlotProps, TooltipData>(
                   boxProps={{
                     onMouseOver: () => {
                       showTooltip({
-                        tooltipTop: yScale(median(d)) + 40,
+                        tooltipTop: yScale(median(d)) ?? 0 + 40,
                         tooltipLeft: xScale(x(d))! + constrainedWidth + 5,
                         tooltipData: {
                           ...d.boxPlot,
@@ -162,7 +162,7 @@ export default withTooltip<StatsPlotProps, TooltipData>(
                     },
                     onMouseOver: () => {
                       showTooltip({
-                        tooltipTop: yScale(median(d)) + 40,
+                        tooltipTop: yScale(median(d)) ?? 0 + 40,
                         tooltipLeft: xScale(x(d))! + constrainedWidth + 5,
                         tooltipData: {
                           median: median(d),

packages/visx-demo/src/sandboxes/visx-streamgraph/Example.tsx

@@ -43,8 +43,8 @@ const patternScale = scaleOrdinal<number, string>({
 
 // accessors
 type Datum = number[];
-const getY0 = (d: Datum) => yScale(d[0]);
-const getY1 = (d: Datum) => yScale(d[1]);
+const getY0 = (d: Datum) => yScale(d[0]) ?? 0;
+const getY1 = (d: Datum) => yScale(d[1]) ?? 0;
 
 export type StreamGraphProps = {
   width: number;
@@ -94,7 +94,7 @@ export default function Streamgraph({ width, height, animate = true }: StreamGra
           keys={keys}
           offset="wiggle"
           color={colorScale}
-          x={(_, i) => xScale(i)}
+          x={(_, i) => xScale(i) ?? 0}
           y0={getY0}
           y1={getY1}
         >

packages/visx-demo/src/sandboxes/visx-threshold/Example.tsx

@@ -61,9 +61,9 @@ export default function Theshold({ width, height, margin = defaultMargin }: Thre
           <Threshold<CityTemperature>
             id={`${Math.random()}`}
             data={cityTemperature}
-            x={d => timeScale(date(d))}
-            y0={d => temperatureScale(ny(d))}
-            y1={d => temperatureScale(sf(d))}
+            x={d => timeScale(date(d)) ?? 0}
+            y0={d => temperatureScale(ny(d)) ?? 0}
+            y1={d => temperatureScale(sf(d)) ?? 0}
             clipAboveTo={0}
             clipBelowTo={yMax}
             curve={curveBasis}
@@ -79,8 +79,8 @@ export default function Theshold({ width, height, margin = defaultMargin }: Thre
           <LinePath
             data={cityTemperature}
             curve={curveBasis}
-            x={d => timeScale(date(d))}
-            y={d => temperatureScale(sf(d))}
+            x={d => timeScale(date(d)) ?? 0}
+            y={d => temperatureScale(sf(d)) ?? 0}
             stroke="#222"
             strokeWidth={1.5}
             strokeOpacity={0.8}
@@ -89,8 +89,8 @@ export default function Theshold({ width, height, margin = defaultMargin }: Thre
           <LinePath
             data={cityTemperature}
             curve={curveBasis}
-            x={d => timeScale(date(d))}
-            y={d => temperatureScale(ny(d))}
+            x={d => timeScale(date(d)) ?? 0}
+            y={d => temperatureScale(ny(d)) ?? 0}
             stroke="#222"
             strokeWidth={1.5}
           />

packages/visx-demo/src/sandboxes/visx-zoom-i/Example.tsx

@@ -63,7 +63,7 @@ export default function ZoomI({ width, height }: ZoomIProps) {
                       cx={x}
                       cy={y}
                       r={i > 500 ? sizeScale(1000 - i) : sizeScale(i)}
-                      fill={interpolateRainbow(colorScale(i))}
+                      fill={interpolateRainbow(colorScale(i) ?? 0)}
                     />
                   </React.Fragment>
                 ))}
@@ -102,7 +102,7 @@ export default function ZoomI({ width, height }: ZoomIProps) {
                         cx={x}
                         cy={y}
                         r={i > 500 ? sizeScale(1000 - i) : sizeScale(i)}
-                        fill={interpolateRainbow(colorScale(i))}
+                        fill={interpolateRainbow(colorScale(i) ?? 0)}
                       />
                     </React.Fragment>
                   ))}
@@ -120,37 +120,43 @@ export default function ZoomI({ width, height }: ZoomIProps) {
             </svg>
             <div className="controls">
               <button
+                type="button"
                 className="btn btn-zoom"
                 onClick={() => zoom.scale({ scaleX: 1.2, scaleY: 1.2 })}
               >
                 +
               </button>
               <button
+                type="button"
                 className="btn btn-zoom btn-bottom"
                 onClick={() => zoom.scale({ scaleX: 0.8, scaleY: 0.8 })}
               >
                 -
               </button>
-              <button className="btn btn-lg" onClick={zoom.center}>
+              <button type="button" className="btn btn-lg" onClick={zoom.center}>
                 Center
               </button>
-              <button className="btn btn-lg" onClick={zoom.reset}>
+              <button type="button" className="btn btn-lg" onClick={zoom.reset}>
                 Reset
               </button>
-              <button className="btn btn-lg" onClick={zoom.clear}>
+              <button type="button" className="btn btn-lg" onClick={zoom.clear}>
                 Clear
               </button>
             </div>
             <div className="mini-map">
-              <button className="btn btn-lg" onClick={() => setShowMiniMap(!showMiniMap)}>
+              <button
+                type="button"
+                className="btn btn-lg"
+                onClick={() => setShowMiniMap(!showMiniMap)}
+              >
                 {showMiniMap ? 'Hide' : 'Show'} Mini Map
               </button>
             </div>
           </div>
         )}
       </Zoom>
       <div className="description">
-        Based on Mike Bostock's{' '}
+        Based on Mike Bostock&apos;s{' '}
         <a href="https://bl.ocks.org/mbostock/4e3925cdc804db257a86fdef3a032a45">Pan & Zoom III</a>
       </div>
       <style jsx>{`