Plot: two data sources on same plot

Community Help
1

I have used ‘vacations’ datasource using Name v/s Date to Plot.

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.

2

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

2 Likes
3

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.

4

Ah, apologies here is the notebook! Vacation Gantt / Observable | Observable

1 Like
5

Thanks :pray: @duaneatat with the details and link, I’ve better understanding how to approach the problem.

1 Like
6

@duaneatat Would it possible to mark the country blocks with “country specific flag emoji or svg or image” ?

7

It should be, this might help with the emoji’s

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.

_.find(countryEmoji,['alpha3',holidays[0].country]).flag

https://emojipedia.org/flags/

4 Likes
8

To fix the windows/chrome flag Emoji issue, I have used google fonts the NATO color emoji font. Vacation Gantt / Brett Cooper / Observable

There is a odd bug here with Plot.

    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.

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')

9

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:

new Set(vacations.map(d => d.country))

I’d suggest that you conditionally log the context of values that cause errors. Example:

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.

2 Likes
10

@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.

11

Thanks @mootari. @kadale , glad I could help