# Plot: two data sources on same plot **URL:** \ **Category:** Help\ **Created:** [April 12, 2022, 2:09pm UTC](https://talk.observablehq.com/t/plot-two-data-sources-on-same-plot/6442 "2022-04-12T14:09:47Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![kadale](https://avatars.discourse-cdn.com/v4/letter/k/8c91f0/32.png) [@kadale](https://talk.observablehq.com/u/kadale)\ **Post date:** [April 12, 2022, 2:09pm UTC](https://talk.observablehq.com/t/plot-two-data-sources-on-same-plot/6442/1 "2022-04-12T14:09:47Z")
I have used ‘vacations’ datasource using `Name v/s Date` to Plot. > **[Vacation Gantt](https://observablehq.com/d/9228c1470aabf3a1)** Vacations structure is - Name (name of person) - Country - Date\_start - Date\_end I want to overlap ‘holidays’ datasource on top of Plot already plotted above using `Country v/s Date` for each user where `vacations.country == holidays.country` Holidays structure is - Name (name of holiday) - Country - Date\_start - Date\_end Example: In `Vacations` - “abe” belongs to “USA”. I want to plot all the “USA Holidays” on “abe’s” barX. Thanks in advance. ---
**Author:** ![duaneatat](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/duaneatat/32/5654_2.png) [@duaneatat](https://talk.observablehq.com/u/duaneatat)\ **Post date:** [April 12, 2022, 4:44pm UTC](https://talk.observablehq.com/t/plot-two-data-sources-on-same-plot/6442/2 "2022-04-12T16:44:17Z")
Hi Kadale, Thanks for your question! I sent you a suggestion for one way to accomplish this. The general gist is that there isn’t a “canonical” way to do this entirely within Plot without some data wrangling beforehand. The changes I (and @Fil) made were to: 1. Order the y domain so people in the same country are grouped together 2. Do some data wrangling (outside of Plot) to get objects in the same shape of the `vacations` array but for each holiday (so each holiday gets repeated for each person in that country) 3. Add rects for each holiday, adding a `title` channel which will provide a tooltip for what the holiday is 4. Style the rects so they appear to span all of the people in that country We also added some line marks on the right side to show the country groupings, but as @Fil pointed out some names appear in multiple countries (len) so that’s probably not going to work in your situation. Let me know if this helps! Duane & Fil ---
**Author:** ![kadale](https://avatars.discourse-cdn.com/v4/letter/k/8c91f0/32.png) [@kadale](https://talk.observablehq.com/u/kadale)\ **Post date:** [April 12, 2022, 7:19pm UTC](https://talk.observablehq.com/t/plot-two-data-sources-on-same-plot/6442/3 "2022-04-12T19:19:18Z")
> [@duaneatat](#): > > We also added some line marks on the right side to show the country groupings, but as @Fil pointed out some names appear in multiple countries (len) so that’s probably not going to work in your situation. Thanks @duaneatat for detailed summary to approach. I read the post couple of times, Did you intend to add any reference link here? There are reference to you and Fil working on it. ---
**Author:** ![duaneatat](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/duaneatat/32/5654_2.png) [@duaneatat](https://talk.observablehq.com/u/duaneatat)\ **Post date:** [April 12, 2022, 7:22pm UTC](https://talk.observablehq.com/t/plot-two-data-sources-on-same-plot/6442/4 "2022-04-12T19:22:37Z")
> [@kadale](#): > > Thanks @duaneatat for detailed summary to approach. I read the post couple of times, Did you intend to add any reference link here? There are reference to you and Fil working on it. Ah, apologies here is the notebook! [Vacation Gantt / Observable | Observable](https://observablehq.com/@observablehq/vacation-gantt-suggestion) ---
**Author:** ![kadale](https://avatars.discourse-cdn.com/v4/letter/k/8c91f0/32.png) [@kadale](https://talk.observablehq.com/u/kadale)\ **Post date:** [April 13, 2022, 5:29pm UTC](https://talk.observablehq.com/t/plot-two-data-sources-on-same-plot/6442/5 "2022-04-13T17:29:00Z")
Thanks 🙏 @duaneatat with the details and link, I’ve better understanding how to approach the problem. ---
**Author:** ![kadale](https://avatars.discourse-cdn.com/v4/letter/k/8c91f0/32.png) [@kadale](https://talk.observablehq.com/u/kadale)\ **Post date:** [April 29, 2022, 8:43pm UTC](https://talk.observablehq.com/t/plot-two-data-sources-on-same-plot/6442/6 "2022-04-29T20:43:33Z")
@duaneatat Would it possible to mark the country blocks with “country specific flag emoji or svg or image” ? ---
**Author:** ![hellonearthis](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/hellonearthis/32/3935_2.png) [@hellonearthis](https://talk.observablehq.com/u/hellonearthis)\ **Post date:** [April 30, 2022, 5:57am UTC](https://talk.observablehq.com/t/plot-two-data-sources-on-same-plot/6442/7 "2022-04-30T05:57:20Z")
It should be, this might help with the emoji’s > **[Making Maps out of Emojis](https://observablehq.com/@mattdzugan/making-maps-out-of-emojis)** > > I wrote a pretty long writeup below, since my teaser tweet got a lot of eyes. If this stupid little thing inspires you, read the writeup for ideas. Anything is possible with code and that's the beauty of code as a creative medium. ❤ ⚠️ it has come to... ```auto Plot.text(vacations,{ x: "date_end", y: "name", text: d=> _.find(countryEmoji,['alpha3',d.country]).flag, }) import {countryEmoji} from "@mattdzugan/emoji-flags-population-cartogram" ``` The hardcoded lookup works but the above text doesn’t. it’s odd. ```auto _.find(countryEmoji,['alpha3',holidays[0].country]).flag ``` [https://emojipedia.org/flags/](https://emojipedia.org/flags/) > ---
**Author:** ![hellonearthis](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/hellonearthis/32/3935_2.png) [@hellonearthis](https://talk.observablehq.com/u/hellonearthis)\ **Post date:** [April 30, 2022, 8:37pm UTC](https://talk.observablehq.com/t/plot-two-data-sources-on-same-plot/6442/8 "2022-04-30T20:37:33Z")
To fix the windows/chrome flag Emoji issue, I have used google fonts the NATO color emoji font. [Vacation Gantt / Brett Cooper / Observable](https://observablehq.com/d/9757edc324ce979d) There is a odd bug here with Plot. ```auto Plot.text(vacations,{ x: "date_start", y: "name", text: d=> { let f = _.find(countryEmoji,['alpha3',d.country]) console.log(f, f.flag) return f.flag } ``` I get back an object from my lodash find that looks like this. ```auto f = { "country": "India", "region": "SE Asia", "flag": "🇮🇳", "country_alt": "India", "alpha2": "IN", "alpha3": "IND", "numeric": "356" } ``` but referencing f.flag give me `TypeError: Cannot read properties of undefined (reading 'flag')` ---
**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\ **Post date:** [April 30, 2022, 9:22pm UTC](https://talk.observablehq.com/t/plot-two-data-sources-on-same-plot/6442/9 "2022-04-30T21:22:08Z")
> [@hellonearthis](#): > > but referencing f.flag give me `TypeError: Cannot read properties of undefined (reading 'flag')` The country codes appear to be a mix of alpha-2 and alpha-3, or even missing. You can view a list of all values via: ```javascript new Set(vacations.map(d => d.country)) ``` I’d suggest that you _conditionally_ log the context of values that cause errors. Example: ```javascript if(!f) console.log(d) ``` will show you that the offending vacation is the one named “ace” with `null` set as country. Alternatively you can conditionally trigger `debugger` which will allow you to inspect the variable scope. ---
**Author:** ![kadale](https://avatars.discourse-cdn.com/v4/letter/k/8c91f0/32.png) [@kadale](https://talk.observablehq.com/u/kadale)\ **Post date:** [April 30, 2022, 10:20pm UTC](https://talk.observablehq.com/t/plot-two-data-sources-on-same-plot/6442/10 "2022-04-30T22:20:07Z")
@hellonearthis Thanks for the suggestion. I aligned all the country code to “alpha3” and fixed all the vacations with empty country and mixed countries. It looks beautiful. > **[Vacation Gantt (w/ Country)](https://observablehq.com/d/9a51c207ced38815)** ---
**Author:** ![hellonearthis](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/hellonearthis/32/3935_2.png) [@hellonearthis](https://talk.observablehq.com/u/hellonearthis)\ **Post date:** [April 30, 2022, 11:59pm UTC](https://talk.observablehq.com/t/plot-two-data-sources-on-same-plot/6442/11 "2022-04-30T23:59:16Z")
Thanks @mootari. @kadale , glad I could help