Infographic Design

// Bad: Visual noise
<rect fill="#f5f5f5" />  {/* Background box */}
{gridLines.map(y => <line stroke="#ddd" />)}  {/* Many gridlines */}
<text>Value</text>  {/* Axis title when axis is obvious */}

// Good: Just data
<path d={linePath} stroke={palette.primary} />  {/* The data */}
<text>{formatNumber(maxValue)}</text>  {/* Key value */}

// Instead of 10 overlapping lines, use a grid
<div className="grid grid-cols-5 gap-4">
  {series.map(s => (
    <SmallChart key={s.name} data={s.data} title={s.name} />
  ))}
</div>

[What happened] + [How much/when/who]

interface InfographicProps {
  headline: string;      // Required: The insight
  subtitle?: string;     // Optional: Context/methodology
  source: string;        // Required: Data attribution
}

<text
  x={margin.left}
  y={32}
  fontSize={32}
  fontWeight={800}
  fill={palette.text}
  style={{ letterSpacing: "-0.02em" }}
>
  {headline}
</text>
{subtitle && (
  <text
    x={margin.left}
    y={56}
    fontSize={14}
    fill={palette.textMuted}
  >
    {subtitle}
  </text>
)}

function suggestAnnotations(data: DataPoint[]): Annotation[] {
  const annotations: Annotation[] = [];

  // Find max
  const max = data.reduce((m, d) => d.value > m.value ? d : m);
  annotations.push({
    type: "callout",
    point: max,
    text: `Peak: ${formatNumber(max.value)}`,
  });

  // Find min (if significantly lower)
  const min = data.reduce((m, d) => d.value < m.value ? d : m);
  if (max.value / min.value > 2) {
    annotations.push({
      type: "label",
      point: min,
      text: `Low: ${formatNumber(min.value)}`,
    });
  }

  // Find trend changes
  const inflections = findInflectionPoints(data);
  inflections.slice(0, 2).forEach(point => {
    annotations.push({
      type: "label",
      point,
      text: `Trend shift`,
    });
  });

  return annotations;
}

function CalloutAnnotation({ point, text, xScale, yScale, palette }) {
  const x = xScale(point.label);
  const y = yScale(point.value);

  return (
    <g>
      {/* Highlight circle */}
      <circle
        cx={x}
        cy={y}
        r={10}
        fill={palette.primary}
        fillOpacity={0.15}
        stroke={palette.primary}
        strokeWidth={2}
      />

      {/* Leader line */}
      <line
        x1={x + 8}
        y1={y - 8}
        x2={x + 40}
        y2={y - 30}
        stroke={palette.textMuted}
        strokeWidth={1}
      />

      {/* Label */}
      <text
        x={x + 44}
        y={y - 30}
        fontSize={14}
        fontWeight={600}
        fill={palette.text}
      >
        {text}
      </text>
    </g>
  );
}

function getLayout(aspect: "16:9" | "1:1" | "9:16") {
  switch (aspect) {
    case "16:9":
      return {
        width: 1200,
        height: 675,
        headlineSize: 48,
        chartHeight: 400,
        margins: { top: 80, right: 48, bottom: 80, left: 48 },
      };
    case "1:1":
      return {
        width: 1080,
        height: 1080,
        headlineSize: 56,
        chartHeight: 600,
        margins: { top: 120, right: 56, bottom: 180, left: 56 },
      };
    case "9:16":
      return {
        width: 1080,
        height: 1920,
        headlineSize: 64,
        chartHeight: 800,
        margins: { top: 200, right: 56, bottom: 400, left: 56 },
      };
  }
}

// Bottom-right, contrast-aware
function Watermark({ width, height, palette }) {
  return (
    <g transform={`translate(${width - 48}, ${height - 24})`}>
      <text
        textAnchor="end"
        fontSize={12}
        fontWeight={500}
        fill={palette.textMuted}
        fillOpacity={0.7}
      >
        OpenData
      </text>
    </g>
  );
}

<text
  x={margin.left}
  y={height - 16}
  fontSize={11}
  fill={palette.textMuted}
>
  Source: {source}
</text>

interface WatermarkConfig {
  position: "bottom-right";
  offset: 48;  // px from edges
  height: {
    twitter: 60,    // px
    instagram: 72,  // px
  };
  opacity: 0.85;
}

function Watermark({ width, height, variant, format }: WatermarkProps) {
  const watermarkHeight = format === "instagram" ? 72 : 60;

  // Contrast-aware: light variant for dark areas
  const fill = variant === "light" ? "#FFFFFF" : "#1A1A1A";

  return (
    <g transform={`translate(${width - 48}, ${height - 48})`}>
      <image
        href={`/watermark-${variant}.svg`}
        width={watermarkHeight * 2}  // Maintain aspect ratio
        height={watermarkHeight}
        x={-watermarkHeight * 2}
        opacity={0.85}
      />
    </g>
  );
}

// Format options
const sourceFormats = {
  opendata: (name: string) => `Data: ${name} via OpenData`,
  external: (name: string) => `Source: ${name}`,
};

function SourceAttribution({ source, isOpenDataset, palette }) {
  const text = isOpenDataset
    ? sourceFormats.opendata(source)
    : sourceFormats.external(source);

  return (
    <text
      x={margin.left}
      y={height - 16}
      fontSize={12}
      fontWeight={400}
      fill="#9CA3AF"
    >
      {text}
    </text>
  );
}

function getLabelStrategy(data: DataPoint[], chartType: string) {
  const count = data.length;

  if (chartType === "time-series") {
    // Label first, last, and max/min only
    return {
      show: [0, count - 1, findMaxIndex(data), findMinIndex(data)],
      strategy: "sparse",
    };
  }

  if (chartType === "bar") {
    if (count <= 8) return { show: "all", strategy: "all" };
    if (count <= 15) return { show: "every-other", strategy: "alternate" };
    return { show: "hover", strategy: "interactive" };
  }

  return { show: "none", strategy: "hover-only" };
}

function TrendWithCallout({ data, headline, callout, palette }) {
  const maxPoint = data.reduce((m, d) => d.value > m.value ? d : m);

  return (
    <svg width={800} height={500}>
      {/* Headline */}
      <text x={48} y={40} fontSize={28} fontWeight={800}>
        {headline}
      </text>

      {/* Chart */}
      <g transform="translate(48, 80)">
        <path d={linePath} stroke={palette.primary} strokeWidth={3} />

        {/* Callout on max */}
        <CalloutAnnotation
          point={maxPoint}
          text={callout || `Peak: ${formatNumber(maxPoint.value)}`}
        />
      </g>

      {/* Source */}
      <text x={48} y={480} fontSize={11} fill={palette.textMuted}>
        Source: {source}
      </text>
    </svg>
  );
}

function ComparisonBars({ data, headline, highlightItem, palette }) {
  return (
    <svg width={800} height={500}>
      <text x={48} y={40} fontSize={28} fontWeight={800}>
        {headline}
      </text>

      <g transform="translate(48, 80)">
        {data.map((d, i) => (
          <g key={d.category} transform={`translate(0, ${i * 48})`}>
            {/* Bar */}
            <rect
              width={xScale(d.value)}
              height={36}
              fill={d.category === highlightItem
                ? palette.primary
                : palette.textMuted}
              fillOpacity={d.category === highlightItem ? 1 : 0.3}
            />

            {/* Label + Value */}
            <text x={-8} y={22} textAnchor="end" fontSize={13}>
              {d.category}
            </text>
            <text
              x={xScale(d.value) + 8}
              y={22}
              fontSize={13}
              fontWeight={600}
            >
              {formatNumber(d.value)}
            </text>
          </g>
        ))}
      </g>
    </svg>
  );
}