title: Combing scatterplots on Vegalite
body: <p>I'm trying to combine 3 scatterplots to look something like this
  <a href="https://i.stack.imgur.com/Cu1z8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Cu1z8.png" alt="Example" /></a>
  the code for the example</p>
  <pre><code>{
    &quot;$schema&quot;: &quot;https://vega.github.io/schema/vega-lite/v5.json&quot;,
    &quot;repeat&quot;: {
      &quot;row&quot;: [&quot;Horsepower&quot;, &quot;Acceleration&quot;, &quot;Miles_per_Gallon&quot;],
      &quot;column&quot;: [&quot;Miles_per_Gallon&quot;, &quot;Acceleration&quot;, &quot;Horsepower&quot;]
    },
    &quot;spec&quot;: {
      &quot;data&quot;: {&quot;url&quot;: &quot;data/cars.json&quot;},
      &quot;mark&quot;: &quot;point&quot;,
      &quot;params&quot;: [
        {
          &quot;name&quot;: &quot;brush&quot;,
          &quot;select&quot;: {
            &quot;type&quot;: &quot;interval&quot;,
            &quot;resolve&quot;: &quot;union&quot;,
            &quot;on&quot;: &quot;[mousedown[event.shiftKey], window:mouseup] &gt; window:mousemove!&quot;,
            &quot;translate&quot;: &quot;[mousedown[event.shiftKey], window:mouseup] &gt; window:mousemove!&quot;,
            &quot;zoom&quot;: &quot;wheel![event.shiftKey]&quot;
          }
        },
        {
          &quot;name&quot;: &quot;grid&quot;,
          &quot;select&quot;: {
            &quot;type&quot;: &quot;interval&quot;,
            &quot;resolve&quot;: &quot;global&quot;,
            &quot;translate&quot;: &quot;[mousedown[!event.shiftKey], window:mouseup] &gt; window:mousemove!&quot;,
            &quot;zoom&quot;: &quot;wheel![!event.shiftKey]&quot;
          },
          &quot;bind&quot;: &quot;scales&quot;
        }
      ],
      &quot;encoding&quot;: {
        &quot;x&quot;: {&quot;field&quot;: {&quot;repeat&quot;: &quot;column&quot;}, &quot;type&quot;: &quot;quantitative&quot;},
        &quot;y&quot;: {
          &quot;field&quot;: {&quot;repeat&quot;: &quot;row&quot;},
          &quot;type&quot;: &quot;quantitative&quot;,
          &quot;axis&quot;: {&quot;minExtent&quot;: 30}
        },
        &quot;color&quot;: {
          &quot;condition&quot;: {
            &quot;param&quot;: &quot;brush&quot;,
            &quot;field&quot;: &quot;Origin&quot;,
            &quot;type&quot;: &quot;nominal&quot;
          },
          &quot;value&quot;: &quot;grey&quot;
        }
      }
    }
  }
  
  </code></pre>
  <p>Currently, I have 3 separate scatterplots that all you the same data set. After numerous attempts I still can't figure out how to put them together / link them. I know mine is a little more complicated because my axis aren't the same.
  I've really been struggling with this, any help would be GREATLY appreciated as I need it for uni. Thank you!</p>
  <p><a href="https://i.stack.imgur.com/9h29u.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9h29u.png" alt="my charts" /></a></p>
  <p>chart 1</p>
  <pre><code>{
    &quot;$schema&quot;: &quot;https://vega.github.io/schema/vega-lite/v4.json&quot;,
    &quot;title&quot;: {
      &quot;text&quot;: &quot;Number of Billionaires and Education Attainment&quot;,
      &quot;subtitle&quot;: &quot;From 2015-2020. Sources: Forbes &amp; World Bank&quot;,
      &quot;subtitleFontStyle&quot;: &quot;italic&quot;,
      &quot;subtitleFontSize&quot;: 10,
      &quot;anchor&quot;: &quot;start&quot;,
      &quot;color&quot;: &quot;black&quot;
    },
    &quot;height&quot;: 100,
    &quot;width&quot;: 100,
    &quot;data&quot;: {
      &quot;url&quot;: &quot;https://raw.githubusercontent.com/jamieprince/jamieprince.github.io/main/correlation.csv&quot;
    },
    &quot;transform&quot;: [
      {&quot;calculate&quot;: &quot;datum.Educationalattainment/100&quot;, &quot;as&quot;: &quot;percent&quot;},
      {&quot;filter&quot;: {&quot;field&quot;: &quot;Educationalattainment&quot;, &quot;gt&quot;: 0}}
    ],
    &quot;selection&quot;: {
      &quot;paintbrush&quot;: {&quot;type&quot;: &quot;multi&quot;, &quot;on&quot;: &quot;mouseover&quot;, &quot;nearest&quot;: true},
      &quot;grid&quot;: {&quot;type&quot;: &quot;interval&quot;, &quot;bind&quot;: &quot;scales&quot;}
    },
    &quot;mark&quot;: {&quot;type&quot;: &quot;circle&quot;, &quot;opacity&quot;: 0.5, &quot;color&quot;: &quot;#C96E11&quot;},
    &quot;encoding&quot;: {
      &quot;x&quot;: {
        &quot;field&quot;: &quot;Number of Billionaires&quot;,
        &quot;type&quot;: &quot;quantitative&quot;,
        &quot;axis&quot;: {
          &quot;title&quot;: &quot;Number of Billionaires&quot;,
          &quot;grid&quot;: false,
          &quot;tickCount&quot;: 10
        }
      },
      &quot;y&quot;: {
        &quot;field&quot;: &quot;percent&quot;,
        &quot;type&quot;: &quot;quantitative&quot;,
        &quot;axis&quot;: {&quot;title&quot;: &quot;Educational Attainment&quot;, &quot;grid&quot;: false, &quot;format&quot;: &quot;%&quot;}
      },
      &quot;size&quot;: {
        &quot;condition&quot;: {
          &quot;selection&quot;: &quot;paintbrush&quot;,
          &quot;value&quot;: 300,
          &quot;init&quot;: {&quot;value&quot;: 70}
        },
        &quot;value&quot;: 70
      },
      &quot;tooltip&quot;: [
        {&quot;field&quot;: &quot;Year&quot;, &quot;type&quot;: &quot;nominal&quot;, &quot;title&quot;: &quot;Year&quot;},
        {&quot;field&quot;: &quot;Country&quot;, &quot;type&quot;: &quot;ordinal&quot;, &quot;title&quot;: &quot;Country&quot;},
        {
          &quot;field&quot;: &quot;Number of Billionaires&quot;,
          &quot;type&quot;: &quot;nominal&quot;,
          &quot;title&quot;: &quot;No of Billionaires&quot;
        },
        {
          &quot;field&quot;: &quot;Educationalattainment&quot;,
          &quot;type&quot;: &quot;nominal&quot;,
          &quot;title&quot;: &quot;Educational attainment at least completed short-cycle tertiary population 25+ total (%) (cumulative)&quot;
        }
      ]
    }
  }
  </code></pre>
  <p>chart 2</p>
  <pre><code>{
    &quot;$schema&quot;: &quot;https://vega.github.io/schema/vega-lite/v4.json&quot;,
    &quot;title&quot;: {
      &quot;text&quot;: &quot;GDP per capita and Education Attainment&quot;,
      &quot;subtitle&quot;: &quot;From 2015-2020. Sources: World Bank&quot;,
      &quot;subtitleFontStyle&quot;: &quot;italic&quot;,
      &quot;subtitleFontSize&quot;: 10,
      &quot;anchor&quot;: &quot;start&quot;,
      &quot;color&quot;: &quot;black&quot;
    },
    &quot;height&quot;: 100,
    &quot;width&quot;: 100,
    &quot;data&quot;: {
      &quot;url&quot;: &quot;https://raw.githubusercontent.com/jamieprince/jamieprince.github.io/main/correlation.csv&quot;
    },
    &quot;transform&quot;: [
      {&quot;calculate&quot;: &quot;datum.Educationalattainment/100&quot;, &quot;as&quot;: &quot;percent&quot;},
      {&quot;filter&quot;: {&quot;field&quot;: &quot;Educationalattainment&quot;, &quot;gt&quot;: 0}}
    ],
    &quot;selection&quot;: {
      &quot;paintbrush&quot;: {&quot;type&quot;: &quot;multi&quot;, &quot;on&quot;: &quot;mouseover&quot;, &quot;nearest&quot;: true},
      &quot;grid&quot;: {&quot;type&quot;: &quot;interval&quot;, &quot;bind&quot;: &quot;scales&quot;}
    },
    &quot;mark&quot;: {&quot;type&quot;: &quot;circle&quot;, &quot;opacity&quot;: 0.5, &quot;color&quot;: &quot;#EC9D3E&quot;},
    &quot;encoding&quot;: {
      &quot;x&quot;: {
        &quot;field&quot;: &quot;GDP per capita&quot;,
        &quot;type&quot;: &quot;quantitative&quot;,
        &quot;axis&quot;: {
          &quot;title&quot;: &quot;GDP per capita&quot;,
          &quot;grid&quot;: false,
          &quot;tickCount&quot;: 10,
          &quot;labelOverlap&quot;: &quot;greedy&quot;
        }
      },
      &quot;y&quot;: {
        &quot;field&quot;: &quot;percent&quot;,
        &quot;type&quot;: &quot;quantitative&quot;,
        &quot;axis&quot;: {&quot;title&quot;: &quot;Educational Attainment&quot;, &quot;grid&quot;: false, &quot;format&quot;: &quot;%&quot;}
      },
      &quot;size&quot;: {
        &quot;condition&quot;: {
          &quot;selection&quot;: &quot;paintbrush&quot;,
          &quot;value&quot;: 300,
          &quot;init&quot;: {&quot;value&quot;: 70}
        },
        &quot;value&quot;: 70
      },
      &quot;tooltip&quot;: [
        {&quot;field&quot;: &quot;Year&quot;, &quot;type&quot;: &quot;nominal&quot;, &quot;title&quot;: &quot;Year&quot;},
        {&quot;field&quot;: &quot;Country&quot;, &quot;type&quot;: &quot;ordinal&quot;, &quot;title&quot;: &quot;Country&quot;},
        {&quot;field&quot;: &quot;GDP per capita&quot;, &quot;type&quot;: &quot;nominal&quot;, &quot;title&quot;: &quot;GDP per capita&quot;},
        {
          &quot;field&quot;: &quot;Educationalattainment&quot;,
          &quot;type&quot;: &quot;nominal&quot;,
          &quot;title&quot;: &quot;Educational attainment at least completed short-cycle tertiary population 25+ total (%) (cumulative)&quot;
        }
      ]
    }
  }
  </code></pre>
  <p>chart 3</p>
  <pre><code>{
    &quot;$schema&quot;: &quot;https://vega.github.io/schema/vega-lite/v4.json&quot;,
    &quot;title&quot;: {
      &quot;text&quot;: &quot;No of billionaires and GDP per capita&quot;,
      &quot;subtitle&quot;: &quot;From 2015-2020. Sources: Forbes &amp; World Bank&quot;,
      &quot;subtitleFontStyle&quot;: &quot;italic&quot;,
      &quot;subtitleFontSize&quot;: 10,
      &quot;anchor&quot;: &quot;start&quot;,
      &quot;color&quot;: &quot;black&quot;
    },
    &quot;height&quot;: 100,
    &quot;width&quot;: 100,
    &quot;data&quot;: {
      &quot;url&quot;: &quot;https://raw.githubusercontent.com/jamieprince/jamieprince.github.io/main/correlation.csv&quot;
    },
    &quot;selection&quot;: {
      &quot;paintbrush&quot;: {&quot;type&quot;: &quot;multi&quot;, &quot;on&quot;: &quot;mouseover&quot;, &quot;nearest&quot;: true},
      &quot;grid&quot;: {&quot;type&quot;: &quot;interval&quot;, &quot;bind&quot;: &quot;scales&quot;}
    },
    &quot;mark&quot;: {&quot;type&quot;: &quot;circle&quot;, &quot;opacity&quot;: 0.5, &quot;color&quot;: &quot;#FBCA8B&quot;},
    &quot;encoding&quot;: {
      &quot;x&quot;: {
        &quot;field&quot;: &quot;Number of Billionaires&quot;,
        &quot;type&quot;: &quot;quantitative&quot;,
        &quot;axis&quot;: {
          &quot;title&quot;: &quot;Number of Billionaires&quot;,
          &quot;grid&quot;: false,
          &quot;tickCount&quot;: 14
        }
      },
      &quot;y&quot;: {
        &quot;field&quot;: &quot;GDP per capita&quot;,
        &quot;type&quot;: &quot;quantitative&quot;,
        &quot;axis&quot;: {&quot;title&quot;: &quot;GDP per capita&quot;, &quot;grid&quot;: false}
      },
      &quot;size&quot;: {
        &quot;condition&quot;: {
          &quot;selection&quot;: &quot;paintbrush&quot;,
          &quot;value&quot;: 300,
          &quot;init&quot;: {&quot;value&quot;: 70}
        },
        &quot;value&quot;: 70
      },
      &quot;tooltip&quot;: [
        {&quot;field&quot;: &quot;Year&quot;, &quot;type&quot;: &quot;nominal&quot;, &quot;title&quot;: &quot;Year&quot;},
        {&quot;field&quot;: &quot;Country&quot;, &quot;type&quot;: &quot;ordinal&quot;, &quot;title&quot;: &quot;Country&quot;},
        {&quot;field&quot;: &quot;GDP per capita&quot;, &quot;type&quot;: &quot;nominal&quot;, &quot;title&quot;: &quot;GDP per capita&quot;},
        {
          &quot;field&quot;: &quot;Number of Billionaires&quot;,
          &quot;type&quot;: &quot;nominal&quot;,
          &quot;title&quot;: &quot;Number of Billionaires&quot;
        }
      ]
    }
  }
  </code></pre>