histogram post ok

component/ChartWithLink.tsx

@@ -0,0 +1,56 @@
+import { ReactNode, useRef } from 'react';
+import { useDimensions } from '../hook/use-dimensions';
+import { Caption } from './UI/Caption';
+import { buttonVariants } from './UI/button';
+import Link from 'next/link';
+import { cn } from '@/util/utils';
+
+type ChartWithLinkProps = {
+  VizComponent: (props: {
+    width: number;
+    height: number;
+  }) => JSX.Element | null; // A component that calls the viz component (e.g. heatmap) with everything needed except width and height
+  height?: number;
+  maxWidth?: number;
+  caption?: string | ReactNode;
+  link: string;
+};
+
+export const ChartWithLink = ({
+  VizComponent,
+  height = 400,
+  maxWidth = 800,
+  caption,
+  link,
+}: ChartWithLinkProps) => {
+  // the chart / sandbox will fill the available space until maxWidth is reached
+  const chartRef = useRef<HTMLDivElement>(null);
+  const chartSize = useDimensions(chartRef);
+
+  return (
+    // Add a full screen width wrapper with grey background around everything.
+    // It has to be "relative". Note that it goes out of the article container if necessary!
+    <div
+      style={{ marginLeft: '-50vw', left: '50%' }}
+      className="my-4 py-4 w-screen relative"
+    >
+      <div className="flex flex-col items-center justify-center">
+        <div className="bg-gray-100 bg-opacity-50 w-screen flex justify-center z-50 pointer-events-none">
+          <div
+            style={{ height, width: '100%', maxWidth }}
+            ref={chartRef}
+            className="pointer-events-auto"
+          >
+            <VizComponent height={height} width={chartSize.width} />
+          </div>
+        </div>
+        <Caption>{caption}</Caption>
+        <div className="flex justify-center">
+          <Link className={cn(buttonVariants(), 'no-underline')} href={link}>
+            Read code
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};

pages/example/histogram-slider-bin-size.tsx

@@ -8,6 +8,8 @@ import Link from 'next/link';
 import { ArcDiagramVerticalDemo } from 'viz/ArcDiagramVertical/ArcDiagramVerticalDemo';
 import { LinkAsButton } from 'component/LinkAsButton';
 import { HistogramSliderBinSizeDemo } from '@/viz/HistogramSliderBinSize/HistogramSliderBinSizeDemo';
+import { cn } from '@/util/utils';
+import { buttonVariants } from '@/component/UI/button';
 
 const graphDescription = (
   <>
@@ -103,6 +105,38 @@ export default function Home() {
         caption="A histogram with a slider that controls the bin size."
       />
 
+      {/*
+      //
+      // Flash card
+      //
+      */}
+      <h2 id="caveats">Dataviz caveat</h2>
+      <p>
+        A great way to improve your data visualization skills is by learning the
+        most <b>common pitfalls</b> when creating charts.
+      </p>
+      <p>
+        I’ve compiled a{' '}
+        <a href="https://www.data-to-viz.com/caveats.html">large collection</a>{' '}
+        of these mistakes and created flashcards that summarize each one. For
+        example, here’s the card that explains the bin size issue.
+      </p>
+      <p>Explore the full collection when you can!</p>
+      <p>
+        <Link
+          className={cn(buttonVariants(), 'no-underline')}
+          href={'https://www.data-to-viz.com/caveats.html'}
+        >
+          Caveat collection
+        </Link>
+      </p>
+      <p>
+        <br />
+      </p>
+      <img
+        src="https://github.com/holtzy/dataviz-caveat-flashcards/blob/main/4HistogramMindTheBin-01.png?raw=true"
+        alt="a dataviz flashcard explaining that one must always check the optimal bin size when making an histogram"
+      />
       <div className="full-bleed border-t h-0 bg-gray-100 mb-3 mt-24" />
       <ChartFamilySection chartFamily="distribution" />
       <div className="mt-20" />

pages/histogram.tsx

@@ -13,6 +13,9 @@ import { HistogramDatasetTransitionDemo } from '../viz/HistogramDatasetTransitio
 import Link from 'next/link';
 import { Accordion } from 'component/UI/AccordionGrey';
 import GraphGallery from 'component/GraphGallery';
+import { HistogramSliderBinSizeDemo } from '@/viz/HistogramSliderBinSize/HistogramSliderBinSizeDemo';
+import { Button } from '@/component/UI/button';
+import { ChartWithLink } from '@/component/ChartWithLink';
 
 const graphDescription = (
   <>
@@ -368,6 +371,35 @@ export default function Home() {
         newsletter if you want to be notified.
       </p>
 
+      {/*
+      //
+      // Bin size
+      //
+      */}
+      <h2 id="bin-size">Mind the bin size</h2>
+      <p>
+        When creating a{' '}
+        <a href="https://www.data-to-viz.com/graph/histogram.html">histogram</a>
+        , remember that <b>bin size</b> plays a crucial role in shaping the
+        story your data tells.
+      </p>
+      <p>
+        For example, the histogram below displays the finish times of 400,000
+        marathoners. With smaller bins, patterns around 3h, 3:30h, and 4h
+        emerge. However, using larger bins can{' '}
+        <b>obscure these details entirely</b>!
+      </p>
+
+      <ChartWithLink
+        VizComponent={HistogramSliderBinSizeDemo}
+        maxWidth={900}
+        height={600}
+        caption={
+          'A histogram with a slider that controls the bin size. With big bins, the breaks in the distribution are completely hidden.'
+        }
+        link="/example/histogram-slider-bin-size"
+      />
+
       <div className="full-bleed border-t h-0 bg-gray-100 mb-3 mt-24" />
       <ChartFamilySection chartFamily="distribution" />
       <div className="mt-20" />

viz/HistogramSliderBinSize/histogram.module.css

@@ -1,16 +1,14 @@
 .container .rectangle {
-    transition-duration: .3s;
-    transition-property: filter, opacity;
-    opacity: 1;
-    filter: saturate(100%);
+  opacity: 1;
+  filter: saturate(100%);
 }
 
 .container:hover .rectangle {
-    opacity: .4;
-    filter: saturate(50%);
+  opacity: 0.4;
+  filter: saturate(50%);
 }
 
 .container .rectangle:hover {
-    opacity: 1;
-    filter: saturate(100%);
+  opacity: 1;
+  filter: saturate(100%);
 }