src/images/dunbar-number--natural-hierarchy--base-twelve-system--natural-coordinate-system.svg

<?xml version="1.0" standalone="yes"?>

<svg viewBox="0 0 1200 1600" xmlns="http://www.w3.org/2000/svg">

  <defs>
  </defs>

  <style>
    path.arr {
      stroke: black;
      fill: none;
    }
    path.arr.h {
      stroke-width: 0.01;
    }
    path.arr.v {
      stroke-width: 0.01;
    }
    .generated-svg-group text {
      transform: rotate(-45deg);
    transform-box: fill-box;
    transform-origin: 50% 50%;
    }
  </style>

  <rect x="0" y="0" width="1200" height="1600" fill="none" stroke="grey" stroke-width="1" />

  <g text-anchor="middle" transform="translate(600 0)">

    <text x="0" y="70" font-size="30"
    >Dunbar's Number, Natural Hierarchy, Base Twelve System, Natural Coordinate System</text>

    <text x="0" y="110" font-size="24"
    >Just another wild prediction by milahu@{gmail,github}</text>

    <text x="0" y="140" font-size="24"
    >I use two scaling-factors, 3 and 4, to generate the series of natural clusters</text>

    <text x="0" y="170" font-size="24"
    >Correlation with personality psychology: 4 basetypes * 3 subtypes = 12 types (zodiac)</text>

  </g>

<!--

  https://www.slideshare.net/EXCCELessex/robin-dunbar-has-the-internet-changed-our-social-world

  military unit size
  robin-dunbar-has-the-internet-changed-our-social-world-12-1024.webp

  custer at 1.62 (facebook) or 1.74 (twitter) (??)
  robin-dunbar-has-the-internet-changed-our-social-world-13-1024.webp
  robin-dunbar-has-the-internet-changed-our-social-world-14-1024.jpg
  this is solved by using TWO scaling factors (3 and 4) -> 4/4 = 1

-->

  <g transform="translate(600 210) scale(3 3) scale(50) rotate(45)" font-size="0.18">

    <g text-anchor="start" transform="translate(0.1 0)">
      <text x="0" y="0" transform="translate(1 0) translate(0.15 -0.15) rotate(-45)">= Factor 4</text>
      <text x="0" y="0" transform="translate(1 1) translate(0.2 -0.2) rotate(-45)">= Base Twelve</text>
      <text x="0" y="0" transform="translate(1 1) translate(0.2 -0.2) translate(0.15 0.15) translate(0.1 -0.1)  rotate(-45)">Finger-counting in Asia</text>
      <!-- https://en.wikipedia.org/wiki/Finger-counting#Asia -->
      <!-- bible: 12 apostles/disciples, 12 tribes of Israel -->
      <!-- 12 zodiac signs, 12 months (but ~13 moons) -->
      <!-- Twelve can be found in 187 places in God's word. https://www.biblestudy.org/bibleref/meaning-of-numbers-in-bible/12.html -->
      <!-- Jacob (Israel) had twelve sons, each of which represented a tribe begun by a prince, for 12 princes total. -->
      <!-- Ishmael, who was born to Abraham through Hagar, also had twelve princes. -->
      <text x="0" y="0" transform="translate(2 1) translate(0.2 -0.2) rotate(-45)">= Dunbar's Number 50</text>
      <text x="0" y="0" transform="translate(2 1) translate(0.2 -0.2) translate(0.15 0.15) translate(0.1 -0.1) rotate(-45)">FB C4 (50)</text>
      <text x="0" y="0" transform="translate(2 1) translate(0.2 -0.2) translate(-0.15 -0.15) rotate(-45)">= Hitchhiker's Guide (42)</text>
      <text x="0" y="0" transform="translate(2 2) translate(0.2 -0.2) rotate(-45)">= Dunbar's Number 150 (village, community)</text>
      <text x="0" y="0" transform="translate(3 2) translate(0.2 -0.2) rotate(-45)">= Dunbar's Number 500 (megaband)</text>
      <text x="0" y="0" transform="translate(3 2) translate(0.2 -0.2) translate(0.15 0.15) translate(0.1 -0.1) rotate(-45)">Battalion (650)</text>
      <text x="0" y="0" transform="translate(3 3) translate(0.2 -0.2) rotate(-45)">= Dunbar's Number 1500 (tribe)</text>
      <text x="0" y="0" transform="translate(3 3) translate(0.2 -0.2) translate(0.15 0.15) translate(0.1 -0.1) rotate(-45)">half Regiment (4000)</text>
      <text x="0" y="0" transform="translate(4 3) translate(0.2 -0.2) rotate(-45)">= half Division (12500)</text>
      <!-- make room for coordinate system
        <text x="0" y="0" transform="translate(5 5) translate(0.2 -0.2) rotate(-45)">= Quarter Million</text>
      -->
      <text x="0" y="0" transform="translate(6 5) translate(0.2 -0.2) rotate(-45)">= Million</text>
      <text x="0" y="0" transform="translate(6 5) translate(0.2 -0.2) translate(0.15 0.15) translate(0.1 -0.1) rotate(-45)">US Army (1.4M)</text>
      <text x="0" y="0" transform="translate(6 6) translate(0.2 -0.2) rotate(-45)">= Three Million</text>
    </g>

    <g text-anchor="end" transform="translate(0 0.1)">
      <text x="0" y="0" transform="translate(0 1) translate(-0.15 0.15) rotate(-45)">Factor 3 =</text>
      <text x="0" y="0" transform="translate(1 2) translate(-0.15 0.15) rotate(-45)">double FB/TW C3 (18) =</text>
      <text x="0" y="0" transform="translate(2 2) translate(-0.15 0.15) rotate(-45)">double Twitter C4 (70) =</text>
      <text x="0" y="0" transform="translate(1 1) translate(-0.15 0.15) rotate(-45)">double Twitter/Facebook Cluster C2 (6) =</text>
    </g>

    <g class="generated-svg-group" dominant-baseline="mathematical" text-anchor="middle">
      <!--
        // the numbers in the "even first" series are always larger than in the "odd first" series
        // so the "even first" numbers are called "max", and the "odd first" numbers are called "min"
        var svg = [];
        var i;
        for (i = 0; i < 6; i++) {
          const base = Array.from({ length: i }).reduce(acc => (acc * 12), 1);
          const min = Array.from({ length: ((i * 2) + 1) }).reduce((acc, _, idx) => (acc * ((idx % 2 == 0) ? 3 : 4)), 1);
          const max = Array.from({ length: ((i * 2) + 1) }).reduce((acc, _, idx) => (acc * ((idx % 2 == 0) ? 4 : 3)), 1);
          const avg = (min + max) / 2;
          svg.push(`<text x="${i}" y="${i}">${base}</text>`);
          svg.push(`<text x="${i}" y="${i + 1}">${min}</text>`);
          svg.push(`<text x="${i + 0.5}" y="${i + 0.5}">${avg}</text>`);
          svg.push(`<text x="${i + 1}" y="${i}">${max}</text>`);
          //const textWidth = parseFloat((0.2 + avg/400000).toFixed(4));
          //const textWidth = 0.2 + avg/400000;
          const textWidth = 0.1 + 0.05 * max.toString().length;
          svg.push(`<path d="M ${i + textWidth} ${i} h ${1 - 2*textWidth}" class="arr h" />`);
          svg.push(`<path d="M ${i} ${i + 0.25} v 0.5" class="arr v" />`);
          svg.push(`<path d="M ${i + textWidth} ${i + 1} h ${1 - 2*textWidth}" class="arr h" />`);
          svg.push(`<path d="M ${i + 1} ${i + 0.25} v 0.5" class="arr v" />`);
          svg.push('');
        }
        var base = Array.from({ length: i }).reduce(acc => (acc * 12), 1);
        svg.push(`<text x="${i}" y="${i}">${base}</text>`);
        console.log(svg.join('\n'));
      -->
      <text x="0" y="0">1</text>
      <text x="0" y="1">3</text>
      <text x="0.5" y="0.5">3.5</text>
      <text x="1" y="0">4</text>
      <path d="M 0.15000000000000002 0 h 0.7" class="arr h" />
      <path d="M 0 0.25 v 0.5" class="arr v" />
      <path d="M 0.15000000000000002 1 h 0.7" class="arr h" />
      <path d="M 1 0.25 v 0.5" class="arr v" />

      <text x="1" y="1">12</text>
      <text x="1" y="2">36</text>
      <text x="1.5" y="1.5">42</text>
      <text x="2" y="1">48</text>
      <path d="M 1.2 1 h 0.6" class="arr h" />
      <path d="M 1 1.25 v 0.5" class="arr v" />
      <path d="M 1.2 2 h 0.6" class="arr h" />
      <path d="M 2 1.25 v 0.5" class="arr v" />

      <text x="2" y="2">144</text>
      <text x="2" y="3">432</text>
      <text x="2.5" y="2.5">504</text>
      <text x="3" y="2">576</text>
      <path d="M 2.25 2 h 0.5" class="arr h" />
      <path d="M 2 2.25 v 0.5" class="arr v" />
      <path d="M 2.25 3 h 0.5" class="arr h" />
      <path d="M 3 2.25 v 0.5" class="arr v" />

      <text x="3" y="3">1728</text>
      <text x="3" y="4">5184</text>
      <text x="3.5" y="3.5">6048</text>
      <text x="4" y="3">6912</text>
      <path d="M 3.3 3 h 0.3999999999999999" class="arr h" />
      <path d="M 3 3.25 v 0.5" class="arr v" />
      <path d="M 3.3 4 h 0.3999999999999999" class="arr h" />
      <path d="M 4 3.25 v 0.5" class="arr v" />

      <text x="4" y="4">20736</text>
      <text x="4" y="5">62208</text>
      <text x="4.5" y="4.5">72576</text>
      <text x="5" y="4">82944</text>
      <path d="M 4.35 4 h 0.30000000000000004" class="arr h" />
      <path d="M 4 4.25 v 0.5" class="arr v" />
      <path d="M 4.35 5 h 0.30000000000000004" class="arr h" />
      <path d="M 5 4.25 v 0.5" class="arr v" />

      <text x="5" y="5">248832</text>
      <text x="5" y="6">746496</text>
      <text x="5.5" y="5.5">870912</text>
      <text x="6" y="5">995328</text>
      <path d="M 5.4 5 h 0.19999999999999996" class="arr h" />
      <path d="M 5 5.25 v 0.5" class="arr v" />
      <path d="M 5.4 6 h 0.19999999999999996" class="arr h" />
      <path d="M 6 5.25 v 0.5" class="arr v" />

      <text x="6" y="6">2985984</text>
    </g>

  </g>


    <!-- continue the series -->

      <!--
        var oddFirst = []; var evenFirst = []; avgList = [];
        var i;
        //for (i = 0; i < 6; i++) {
        for (i = 6; i < 13; i++) {
          const base = Array.from({ length: i }).reduce(acc => (acc * 12), 1);
          const min = Array.from({ length: ((i * 2) + 1) }).reduce((acc, _, idx) => (acc * ((idx % 2 == 0) ? 3 : 4)), 1);
          const max = Array.from({ length: ((i * 2) + 1) }).reduce((acc, _, idx) => (acc * ((idx % 2 == 0) ? 4 : 3)), 1);
          const avg = (min + max) / 2;
          oddFirst.push(base); oddFirst.push(min);
          avgList.push(base); avgList.push(avg);
          evenFirst.push(base); evenFirst.push(max);
        }
        console.log(`oddFirst: ${oddFirst.join(', ')}\navgList: ${avgList.join(', ')}\nevenFirst: ${evenFirst.join(', ')}`);
      -->
      <!--
        result:
        oddFirst: 2985984, 8957952, 35831808, 107495424, 429981696, 1289945088, 5159780352, 15479341056, 61917364224, 185752092672, 743008370688, 2229025112064, 8916100448256, 26748301344768
        avgList: 2985984, 10450944, 35831808, 125411328, 429981696, 1504935936, 5159780352, 18059231232, 61917364224, 216710774784, 743008370688, 2600529297408, 8916100448256, 31206351568896
        evenFirst: 2985984, 11943936, 35831808, 143327232, 429981696, 1719926784, 5159780352, 20639121408, 61917364224, 247669456896, 743008370688, 2972033482752, 8916100448256, 35664401793024
      -->
      <g transform="translate(830 1520)">
        <text x="0" y="0">(2985984), 11943936, (35831808), 143327232</text>
        <text x="0" y="20">(429981696), 1719926784, (5159780352)</text>
        <text x="0" y="40">20639121408, (61917364224), 247669456896</text>
        <text x="0" y="60">(743008370688), 2972033482752, (8916100448256)</text>
      </g>
      <g transform="translate(450 1520)">
        <text x="0" y="0">(2985984), 10450944, (35831808), 125411328</text>
        <text x="0" y="20">(429981696), 1504935936, (5159780352)</text>
        <text x="0" y="40">18059231232, (61917364224), 216710774784</text>
        <text x="0" y="60">(743008370688), 2600529297408, (8916100448256)</text>
      </g>
      <g transform="translate(50 1520)">
        <text x="0" y="0">(2985984), 8957952, (35831808), 107495424</text>
        <text x="0" y="20">(429981696), 1289945088, (5159780352)</text>
        <text x="0" y="40">15479341056, (61917364224), 185752092672</text>
        <text x="0" y="60">(743008370688), 2229025112064, (8916100448256)</text>
      </g>

  <g transform="translate(50 1050) scale(24)" font-size="0.9">

    <text x="8" y="0" font-size="1" text-anchor="middle">"Odd First" Coordinate System</text>

    <g transform="translate(0 1)">

      <g transform="translate(0.5 0.4)" dominant-baseline="mathematical" text-anchor="middle">
        <text x="0" y="0">1</text>
        <text x="0" y="1">2</text>
        <text x="0" y="2">3</text>
      </g>
      <g fill="none" stroke="black" stroke-width="0.025">
        <rect x="0" y="0" width="1" height="3" />

        <rect x="1" y="0" width="1" height="3" />
        <rect x="2" y="0" width="1" height="3" />
        <rect x="3" y="0" width="1" height="3" />

        <rect x="0" y="3" width="4" height="3" />
        <rect x="0" y="6" width="4" height="3" />

        <rect x="4" y="0" width="4" height="9" />
        <rect x="8" y="0" width="4" height="9" />
        <rect x="12" y="0" width="4" height="9" />
      </g>
    </g>
  </g>


  <g transform="translate(780 1050) scale(24)" font-size="0.9">

    <text x="8" y="0" font-size="1" text-anchor="middle">"Even First" Coordinate System</text>

    <g transform="translate(0 1)">

      <g transform="translate(0.4 0.4)" dominant-baseline="mathematical" text-anchor="middle">
        <text x="0" y="0">1</text>
        <text x="1" y="0">2</text>
        <text x="2" y="0">3</text>
        <text x="3" y="0">4</text>
      </g>
      <g fill="none" stroke="black" stroke-width="0.025">
        <rect x="0" y="0" width="4" height="1" />
        <rect x="0" y="1" width="4" height="1" />
        <rect x="0" y="2" width="4" height="1" />

        <rect x="4" y="0" width="4" height="3" />
        <rect x="8" y="0" width="4" height="3" />
        <rect x="12" y="0" width="4" height="3" />

        <rect x="0" y="3" width="16" height="3" />
        <rect x="0" y="6" width="16" height="3" />
      </g>
    </g>
  </g>

</svg>