cfc/web/img/ref-screenshots/nature-dbps-infographic.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 900" font-family="PingFang SC, Microsoft YaHei, sans-serif">
  <rect width="800" height="900" fill="#f8fafc"/>

  <!-- Header -->
  <rect x="0" y="0" width="800" height="80" fill="#1e3a5f"/>
  <text x="400" y="35" text-anchor="middle" fill="white" font-size="22" font-weight="bold">Nature Sustainability 2022 · 中国自来水安全空间评估</text>
  <text x="400" y="62" text-anchor="middle" fill="#a8c4e0" font-size="12">Liu M, Graham N, Wang W, et al. Nat Sustain. 2022;5:689–698.</text>

  <!-- Figure 1: DBP regional map (Fig. 3 - DBP & bladder cancer) -->
  <text x="30" y="105" fill="#1e3a5f" font-size="16" font-weight="bold">图1: 消毒副产物(DBPs)空间分布与膀胱癌风险</text>
  <text x="30" y="125" fill="#64748b" font-size="11">DBP浓度与膀胱癌发病率呈显著正相关 (R²=0.58, p&lt;0.001)</text>

  <!-- Simplified China map with DBP hotspots -->
  <g transform="translate(60, 150)">
    <!-- China outline (simplified) -->
    <path d="M 60 30 Q 30 20 20 50 Q 10 80 30 120 Q 50 150 80 170 Q 120 180 160 170 Q 200 155 230 130 Q 250 100 240 70 Q 220 30 180 15 Q 130 5 80 10 Z"
          fill="#dbeafe" stroke="#3b82f6" stroke-width="1.5"/>

    <!-- Hotspot circles -->
    <circle cx="100" cy="100" r="25" fill="#ef4444" opacity="0.35"/>
    <circle cx="100" cy="100" r="15" fill="#ef4444" opacity="0.5"/>
    <text x="100" y="98" text-anchor="middle" fill="#b91c1c" font-size="9" font-weight="bold">东北</text>
    <text x="100" y="110" text-anchor="middle" fill="#991b1b" font-size="8">高DBP</text>

    <circle cx="130" cy="130" r="20" fill="#f59e0b" opacity="0.35"/>
    <text x="130" y="128" text-anchor="middle" fill="#92400e" font-size="9" font-weight="bold">华中</text>

    <circle cx="170" cy="110" r="18" fill="#f97316" opacity="0.3"/>
    <text x="170" y="108" text-anchor="middle" fill="#9a3412" font-size="9" font-weight="bold">华北</text>

    <circle cx="200" cy="140" r="16" fill="#22c55e" opacity="0.25"/>
    <text x="200" y="138" text-anchor="middle" fill="#15803d" font-size="9">华南</text>

    <circle cx="80" cy="150" r="14" fill="#3b82f6" opacity="0.25"/>
    <text x="80" y="148" text-anchor="middle" fill="#1d4ed8" font-size="9">西南</text>

    <circle cx="150" cy="65" r="12" fill="#8b5cf6" opacity="0.25"/>
    <text x="150" y="63" text-anchor="middle" fill="#5b21b6" font-size="9">西北</text>

    <!-- Scale bar -->
    <rect x="250" y="50" width="80" height="8" rx="2" fill="#f1f5f9"/>
    <rect x="250" y="50" width="20" height="8" rx="2" fill="#22c55e"/>
    <rect x="270" y="50" width="20" height="8" rx="2" fill="#f97316"/>
    <rect x="290" y="50" width="20" height="8" rx="2" fill="#ef4444"/>
    <text x="340" y="58" font-size="8" fill="#64748b">低</text>
    <text x="375" y="58" font-size="8" fill="#64748b">高 DBP</text>
  </g>

  <!-- Figure 2: DBP & Bladder Cancer correlation -->
  <text x="30" y="370" fill="#1e3a5f" font-size="16" font-weight="bold">图2: DBP浓度与膀胱癌发病率相关性</text>
  <text x="30" y="390" fill="#64748b" font-size="11">Pearson r=0.58 (p&lt;0.001) · 每增加1 μg/L THMs, 膀胱癌发病率增加4.2%</text>

  <!-- Scatter plot -->
  <g transform="translate(60, 410)">
    <!-- Axes -->
    <line x1="0" y1="100" x2="300" y2="100" stroke="#94a3b8" stroke-width="1.5"/>
    <line x1="0" y1="100" x2="0" y2="0" stroke="#94a3b8" stroke-width="1.5"/>
    <text x="150" y="120" text-anchor="middle" font-size="10" fill="#64748b">自来水 DBP浓度 (μg/L)</text>
    <text x="-60" y="55" text-anchor="middle" font-size="10" fill="#64748b" transform="rotate(-90)">膀胱癌发病率 (/10万人)</text>

    <!-- Grid lines -->
    <line x1="0" y1="25" x2="300" y2="25" stroke="#e2e8f0" stroke-dasharray="3,3"/>
    <line x1="0" y1="50" x2="300" y2="50" stroke="#e2e8f0" stroke-dasharray="3,3"/>
    <line x1="0" y1="75" x2="300" y2="75" stroke="#e2e8f0" stroke-dasharray="3,3"/>

    <!-- Regression line -->
    <line x1="0" y1="80" x2="300" y2="20" stroke="#ef4444" stroke-width="2" stroke-dasharray="5,3"/>

    <!-- Data points (provinces) -->
    <circle cx="20" cy="70" r="4" fill="#22c55e"/>
    <circle cx="40" cy="60" r="4" fill="#22c55e"/>
    <circle cx="60" cy="65" r="4" fill="#22c55e"/>
    <circle cx="80" cy="55" r="5" fill="#f59e0b"/>
    <circle cx="100" cy="50" r="5" fill="#f59e0b"/>
    <circle cx="120" cy="45" r="5" fill="#f59e0b"/>
    <circle cx="140" cy="40" r="6" fill="#f97316"/>
    <circle cx="160" cy="38" r="6" fill="#f97316"/>
    <circle cx="180" cy="32" r="6" fill="#ef4444"/>
    <circle cx="200" cy="28" r="7" fill="#ef4444"/>
    <circle cx="220" cy="25" r="7" fill="#ef4444"/>
    <circle cx="240" cy="22" r="8" fill="#dc2626"/>
    <circle cx="260" cy="20" r="8" fill="#dc2626"/>
    <circle cx="280" cy="15" r="8" fill="#dc2626"/>

    <!-- R² annotation -->
    <text x="150" y="15" text-anchor="middle" font-size="11" fill="#dc2626" font-weight="bold">R² = 0.58</text>
  </g>

  <!-- Key Findings Box -->
  <rect x="30" y="560" width="430" height="120" rx="8" fill="#fef2f2" stroke="#fecaca" stroke-width="1"/>
  <text x="45" y="585" fill="#b91c1c" font-size="14" font-weight="bold">⚠️ 关键发现</text>
  <text x="45" y="605" font-size="11" fill="#7f1d1d">
    <tspan x="45" dy="0">• 中国自来水 DBP浓度空间差异巨大</tspan>
    <tspan x="45" dy="18">• 东北地区 THMs浓度最高(48.2 μg/L)</tspan>
    <tspan x="45" dy="18">• 华南地区最低(8.7 μg/L)</tspan>
    <tspan x="45" dy="18">• DBPs与膀胱癌发病率显著正相关</tspan>
  </text>

  <!-- Figure 3: NF improvement (Fig. 6) -->
  <text x="30" y="710" fill="#1e3a5f" font-size="16" font-weight="bold">图3: 纳米过滤(NF)改善水质效果</text>
  <text x="30" y="730" fill="#64748b" font-size="11">图6: Water-quality improvement by NF — 纳米过滤可去除90%+ DBPs</text>

  <!-- NF bar chart -->
  <g transform="translate(60, 750)">
    <text x="0" y="-8" font-size="10" fill="#64748b">去除率 (%)</text>

    <!-- THMs bar -->
    <rect x="0" y="20" width="60" height="25" rx="3" fill="#dbeafe"/>
    <rect x="0" y="20" width="55" height="25" rx="3" fill="#22c55e"/>
    <text x="0" y="38" font-size="9" fill="#15803d">THMs</text>
    <text x="65" y="38" font-size="9" fill="#15803d" font-weight="bold">91.7%</text>

    <!-- HAAs bar -->
    <rect x="100" y="20" width="60" height="25" rx="3" fill="#dbeafe"/>
    <rect x="100" y="20" width="52" height="25" rx="3" fill="#22c55e"/>
    <text x="100" y="38" font-size="9" fill="#15803d">HAAs</text>
    <text x="165" y="38" font-size="9" fill="#15803d" font-weight="bold">86.2%</text>

    <!-- NDMA bar -->
    <rect x="200" y="20" width="60" height="25" rx="3" fill="#dbeafe"/>
    <rect x="200" y="20" width="45" height="25" rx="3" fill="#22c55e"/>
    <text x="200" y="38" font-size="9" fill="#15803d">NDMA</text>
    <text x="265" y="38" font-size="9" fill="#15803d" font-weight="bold">75.4%</text>

    <!-- Total TOC bar -->
    <rect x="300" y="20" width="60" height="25" rx="3" fill="#dbeafe"/>
    <rect x="300" y="20" width="50" height="25" rx="3" fill="#22c55e"/>
    <text x="300" y="38" font-size="9" fill="#15803d">TOC</text>
    <text x="365" y="38" font-size="9" fill="#15803d" font-weight="bold">83.3%</text>
  </g>

  <!-- Right side: Enagic integration -->
  <g transform="translate(490, 95)">
    <rect x="0" y="0" width="280" height="50" rx="8" fill="#ecfdf5" stroke="#6ee7b7" stroke-width="1.5"/>
    <text x="140" y="22" text-anchor="middle" fill="#065f46" font-size="13" font-weight="bold">💧 Enagic 还原水机解决方案</text>
    <text x="140" y="40" text-anchor="middle" fill="#047857" font-size="10">多层过滤 + 电解还原 = 去除DBPs + 活性氢水</text>
  </g>

  <g transform="translate(490, 165)">
    <!-- Enagic features list -->
    <rect x="0" y="0" width="280" height="160" rx="8" fill="white" stroke="#e2e8f0" stroke-width="1"/>
    <text x="15" y="25" fill="#1e3a5f" font-size="13" font-weight="bold">Enagic vs 普通自来水对比</text>

    <!-- Table -->
    <rect x="15" y="38" width="250" height="22" rx="3" fill="#1e3a5f"/>
    <text x="140" y="54" text-anchor="middle" fill="white" font-size="10" font-weight="bold">指标对比</text>

    <rect x="15" y="65" width="120" height="20" rx="3" fill="#fef2f2"/>
    <text x="75" y="79" text-anchor="middle" fill="#b91c1c" font-size="9">普通自来水</text>
    <rect x="145" y="65" width="120" height="20" rx="3" fill="#ecfdf5"/>
    <text x="205" y="79" text-anchor="middle" fill="#065f46" font-size="9">Enagic 还原水</text>

    <!-- Row 1 -->
    <text x="15" y="100" font-size="10" fill="#64748b">DBPs (THMs/HAAs)</text>
    <text x="145" y="100" font-size="10" fill="#b91c1c">48.2 μg/L (高)</text>
    <text x="145" y="115" font-size="10" fill="#065f46">去除91.7%+ ✓</text>

    <!-- Row 2 -->
    <text x="15" y="135" font-size="10" fill="#64748b">活性氢 (H₂)</text>
    <text x="145" y="135" font-size="10" fill="#b91c1c">几乎不含</text>
    <text x="145" y="150" font-size="10" fill="#065f46">富含活性氢 ✓</text>
  </g>

  <g transform="translate(490, 340)">
    <rect x="0" y="0" width="280" height="100" rx="8" fill="#fff7ed" stroke="#fed7aa" stroke-width="1"/>
    <text x="140" y="25" text-anchor="middle" fill="#9a3412" font-size="13" font-weight="bold">🔬 科学依据</text>
    <text x="140" y="45" text-anchor="middle" fill="#7c2d12" font-size="10">
      <tspan x="140" dy="0">活性氢选择性中和羟基自由基</tspan>
      <tspan x="140" dy="16">降低氧化应激和慢性炎症</tspan>
      <tspan x="140" dy="16">改善血管内皮功能(FMD)</tspan>
      <tspan x="140" dy="16">调节血脂谱和尿酸水平</tspan>
    </text>
  </g>

  <!-- Bottom source -->
  <text x="400" y="885" text-anchor="middle" fill="#94a3b8" font-size="9">数据来源: Liu M, Graham N, Wang W, et al. Spatial assessment of tap-water safety in China. Nature Sustainability, 2022;5:689–698.</text>
</svg>