Modernize xarray logos

[andersy005]

The three existing logos were designed using Latex and rasterized as PNGs. Using these PNG logos on the website results in a not-so-great user experience (features like switching to a dark theme don't work). Could we redesign/modernize the logos using tools like Figma or Illustrator to produce logos in SVG format?

• https://github.com/pydata/xarray/blob/main/doc/_static/dataset-diagram-square-logo.png
• https://github.com/pydata/xarray/blob/main/doc/_static/dataset-diagram-logo.png
• https://github.com/pydata/xarray/blob/main/doc/_static/dataset-diagram.png

---

• https://github.com/pydata/xarray/blob/main/doc/_static/dataset-diagram-logo.tex
• https://github.com/pydata/xarray/blob/main/doc/_static/dataset-diagram-square-logo.tex
• https://github.com/pydata/xarray/blob/main/doc/_static/dataset-diagram.tex

Cc @jhamman

[headtr1ck]

I gave it a try but don't know where exactly to change things.
So feel free to use these as a basis for a PR :)

xarray-datastructure

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="120">
  <style type="text/css">
    #temp .cxt {
      fill: #bfdfdf;
    }
    #temp .cxy {
      fill: #409f9f;
    }
    #temp .cyt {
      fill: #7fbfbf;
    }
    #prec .cxt {
      fill: #efbfcf;
    }
    #prec .cxy {
      fill: #cf4070;
    }
    #prec .cyt {
      fill: #df7f9f;
    }
    .lat {
      fill: #ff7f00;
    }
    .lon {
      fill: #ff4040;
    }
    text {
      font-size: 10px;
    }
  </style>
  <defs>
    <g id="xt">
      <g id="col1">
        <rect id="r" x="0" y="36" width="10" height="10"/>
        <use href="#r" y="11"/>
        <use href="#r" y="22"/>
        <use href="#r" y="33"/>
        <use href="#r" y="44"/>
        <use href="#r" y="55"/>
      </g>
      <use href="#col1" x="11"/>
      <use href="#col1" x="22"/>
      <use href="#col1" x="33"/>
      <use href="#col1" x="44"/>
      <use href="#col1" x="55"/>
      <use href="#col1" x="66"/>
      <use href="#col1" x="77"/>
    </g>
    <g id="xy-part">
      <g id="col2">
        <path id="p" d="M88 35.5 v10 l5 -5 v-10Z"/>
        <use href="#p" y="11"/>
        <use href="#p" y="22"/>
        <use href="#p" y="33"/>
        <use href="#p" y="44"/>
        <use href="#p" y="55"/>
      </g>
      <use href="#col2" x="6" y="-6"/>
      <use href="#p" x="12" y="-12"/>
      <use href="#p" x="18" y="-18"/>
      <use href="#p" x="24" y="-24"/>
      <use href="#p" x="30" y="-30"/>

      <path id="pp" d="M100 34.5 v0.1 l5 -5 v-0.1Z"/>
      <use href="#pp" x="6" y="-6"/>
      <use href="#pp" x="12" y="-12"/>
      <use href="#pp" x="18" y="-18"/>
    </g>
    <g id="xy-part2">
      <use href="#col2"/>
      <use href="#col2" x="6" y="-6"/>
      <use href="#col2" x="12" y="-12"/>
      <use href="#col2" x="18" y="-18"/>
      <use href="#p" x="24" y="-24"/>
      <use href="#p" x="30" y="-30"/>
      <use href="#p" x="24" y="-13"/>
      <use href="#p" x="30" y="-19"/>

      <path id="p1" d="M112 33.5 v1 l5 -5 v-1Z"/>
      <use href="#p1" x="6" y="-6"/>
    </g>
    <g id="xy">
      <use href="#col2"/>
      <use href="#col2" x="6" y="-6"/>
      <use href="#col2" x="12" y="-12"/>
      <use href="#col2" x="18" y="-18"/>
      <use href="#col2" x="24" y="-24"/>
      <use href="#col2" x="30" y="-30"/>
    </g>
    <g id="yt">
      <g id="col3">
        <path id="q" d="M0.5 35 h10 l5 -5 h-10Z"/>
        <use href="#q" x="6" y="-6"/>
        <use href="#q" x="12" y="-12"/>
        <use href="#q" x="18" y="-18"/>
        <use href="#q" x="24" y="-24"/>
        <use href="#q" x="30" y="-30"/>
      </g>
      <use href="#col3" x="11"/>
      <use href="#col3" x="22"/>
      <use href="#col3" x="33"/>
      <use href="#col3" x="44"/>
      <use href="#col3" x="55"/>
      <use href="#col3" x="66"/>
      <use href="#col3" x="77"/>
    </g>
    <g id="cube">
      <use href="#xt" y="36"/>
      <use href="#xy" x="88" y="35.5"/>
      <use href="#yt" x="0.5" y="35"/>
    </g>
    <marker id="arrowhead" markerWidth="5" markerHeight="4" refY="2" orient="auto">
      <polygon points="0 0, 5 2, 0 4" />
    </marker>
  </defs>

  <g id="temp">
    <text x="55" y="7">temperature</text>
    <use href="#xt" y="10" class="cxt"/>
    <use href="#xy-part" y="10" class="cxy"/>
    <use href="#yt" y="10" class="cyt"/>
  </g>
  <g id="prec">
    <text x="152" y="7">precipitation</text>
    <use href="#xt" x="100" y="10" class="cxt"/>
    <use href="#xy-part2" x="100" y="10" class="cxy"/>
    <use href="#yt" x="100" y="10" class="cyt"/>
  </g>
  <g id="lat">
    <text x="225" y="7">latitude</text>
    <use href="#xy-part2" x="124" y="10" class="lat"/>
  </g>
  <g id="lon">
    <text x="260" y="7">longitude</text>
    <use href="#xy" x="148" y="10" class="lon"/>
  </g>
  <g id="axes">
    <line x1="275" y1="110" x2="335" y2="110" stroke="black" marker-end="url(#arrowhead)"/>
    <text x="340" y="112">t</text>
    <line x1="275" y1="110" x2="275" y2="50" stroke="black" marker-end="url(#arrowhead)"/>
    <text x="273" y="44">x</text>
    <line x1="275" y1="110" x2="305" y2="80" stroke="black" marker-end="url(#arrowhead)"/>
    <text x="309" y="77">y</text>
    <line x1="305" y1="107" x2="305" y2="113" stroke="black"/>
    <text x="308" y="107" transform="rotate(-45, 308, 107)">reference_time</text>
  </g>

</svg>

xarray-logo

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="240">
  <style type="text/css">
    #temp .cxt {
      fill: #bfdfdf;
    }
    #temp .cxy {
      fill: #409f9f;
    }
    #temp .cyt {
      fill: #7fbfbf;
    }
    #prec .cxt {
      fill: #efbfcf;
    }
    #prec .cxy {
      fill: #cf4070;
    }
    #prec .cyt {
      fill: #df7f9f;
    }
    .lat {
      fill: #ff7f00;
    }
    .lon {
      fill: #ff4040;
    }
    .logo {
      font-family: Helvetica, sans-serif;
      font-size: 72px;
    }
    .logox {
      fill: #888888;
      font-weight: bold;
      font-style: italic;
    }
  </style>
  <defs>
    <g id="xt">
      <g id="col1">
        <rect id="r" x="0" y="36" width="10" height="10"/>
        <use href="#r" y="11"/>
        <use href="#r" y="22"/>
        <use href="#r" y="33"/>
        <use href="#r" y="44"/>
        <use href="#r" y="55"/>
      </g>
      <use href="#col1" x="11"/>
      <use href="#col1" x="22"/>
      <use href="#col1" x="33"/>
      <use href="#col1" x="44"/>
      <use href="#col1" x="55"/>
      <use href="#col1" x="66"/>
      <use href="#col1" x="77"/>
    </g>
    <g id="xy">
      <g id="col2">
        <path id="p" d="M88 35.5 v10 l5 -5 v-10Z"/>
        <use href="#p" y="11"/>
        <use href="#p" y="22"/>
        <use href="#p" y="33"/>
        <use href="#p" y="44"/>
        <use href="#p" y="55"/>
      </g>
      <use href="#col2" x="6" y="-6"/>
      <use href="#col2" x="12" y="-12"/>
      <use href="#col2" x="18" y="-18"/>
      <use href="#col2" x="24" y="-24"/>
      <use href="#col2" x="30" y="-30"/>
    </g>
    <g id="yt">
      <g id="col3">
        <path id="q" d="M0.5 35 h10 l5 -5 h-10Z"/>
        <use href="#q" x="6" y="-6"/>
        <use href="#q" x="12" y="-12"/>
        <use href="#q" x="18" y="-18"/>
        <use href="#q" x="24" y="-24"/>
        <use href="#q" x="30" y="-30"/>
      </g>
      <use href="#col3" x="11"/>
      <use href="#col3" x="22"/>
      <use href="#col3" x="33"/>
      <use href="#col3" x="44"/>
      <use href="#col3" x="55"/>
      <use href="#col3" x="66"/>
      <use href="#col3" x="77"/>
    </g>
    <g id="yt-part">
      <g id="row3">
        <path id="q" d="M0.5 35 h10 l5 -5 h-10Z"/>
        <use href="#q" x="11"/>
        <use href="#q" x="22"/>
        <use href="#q" x="33"/>
        <use href="#q" x="44"/>
        <use href="#q" x="55"/>
        <use href="#q" x="66"/>
        <use href="#q" x="77"/>
      </g>
      <use href="#row3" x="6" y="-6"/>
      <use href="#q" x="83" y="-6"/>
      <use href="#q" x="89" y="-12"/>
      <use href="#q" x="95" y="-18"/>
      <use href="#q" x="101" y="-24"/>
      <use href="#q" x="107" y="-30"/>
    </g>
    <g id="cube">
      <use href="#xt" y="36"/>
      <use href="#xy" x="88" y="35.5"/>
      <use href="#yt" x="0.5" y="35"/>
    </g>
    <marker id="arrowhead" markerWidth="5" markerHeight="4" refY="2" orient="auto">
      <polygon points="0 0, 5 2, 0 4" />
    </marker>
  </defs>

  <g id="temp">
    <use href="#xt" x="5" class="cxt"/>
    <use href="#xy" x="5" class="cxy"/>
    <use href="#yt" x="5" class="cyt"/>
  </g>
  <g id="prec">
    <use href="#xt" x="5" y="77" class="cxt"/>
    <use href="#xy" x="5" y="77" class="cxy"/>
    <use href="#yt-part" x="5" y="77" class="cyt"/>
  </g>
  <g id="lat">
    <use href="#xy" x="45" y="77" class="lat"/>
  </g>
  <g id="lon">
    <use href="#xy" x="85" y="77" class="lon"/>
  </g>
  <g id="axes">
    <line x1="168" y1="0" x2="168" y2="60" stroke="black" marker-end="url(#arrowhead)"/>
    <line x1="168" y1="0" x2="138" y2="30" stroke="black" marker-end="url(#arrowhead)"/>
  </g>
  <g id="logo-text">
    <text x="1" y="220" class="logo logox">x</text>
    <text x="42" y="220" class="logo">array</text>
  </g>

</svg>

Probably the square and non-square version of the logo can be unified with some css.

The two contain quite some copy-paste, but in svg references to other svgs are allowed, so one could load these definitions from a common file (Or use the different display styles as a sprite, maybe svg inside an svg?).

The CSS could also be moved outside, then you have all the freedom for styling it :)

Another note: I am not sure about what is required in the header, I have only tested these in a modern chrome. I think it is SVG2 standard, so opening them in inkscape etc. might not work (might need to replace href by xlink:href etc.).

[andersy005]

Thank you very much, @headtr1ck! I'm definitely going to integrate these in the website and will report back

[headtr1ck]

The xarray logo name (the only difference between the square and non-square logo version) could also be done in pure html/css :)
Should be even better for responsiveness.

[jhamman]

As an update to this issue. @andersy005 and I have been working with a designer w/ @numfocus to update Xarray's logo. We should have drafts in the next week or so to share.

[headtr1ck]

Has there been any progress on this?

[jhamman]

Yes and no. @andersy005 and I have been iterating with a designer through NumFocus to come up with a new logo design. We have some drafts but none of them are feeling quite there yet. Here are the latest mocks:

xarray_LogoPresentation_v2.pdf

Do any of these options pop out to folks as promising and worth pursuing further? I'm personally trying to decide if we should we scrap this effort or push through? If you are new to this subject, I suggest reading the "project background" section here for the motivating context.

Pinging the core team @rabernat, @shoyer, @dcherian, @benbovy, @max-sixty, @crusaderky, @spencerkclark, @fujiisoup, @fmaussion, @mathause, @andersy005, @Illviljan, @keewis, and @TomNicholas. And a few others @xarray-contrib/nasa-roses, @xarray-contrib/xbatcher-devs, @xarray-contrib/xpublish-devs.

---

Based on these drafts, I would favor B1, A1, D2 though I think they all need additional work.

[max-sixty]

I do like the way the current one embodies the multidimensional data. D1 & D2 somewhat do that, although not as explicitly.

I'm much less of a fan of C-1 & C-2, they don't seem to embody anything about xarray specifically, even if they're cool images.

(ofc I'm one small voice and have zero expertise here, don't anchor on my unfiltered thoughts...)

[abkfenris]

I also really like how the current one captures multi dimensional data that I'm not sure any of these really get right now.

One of the things I pondered is how do the logos render at different sizes and in grayscale (and almost fell down the stairs trying to view at a distance).

A really quick and dirty way comparison of logos and scales.

Note: For some reason the B variants don't show up in iOS or MacOS previews for me, but do show up in Firefox's PDF reader.

• Of the four, I like B the best (once I could see it), but it misses some of the multi-dimensional aspect.
• D maybe has more of the multi-dimensional aspect, but it really seems muddled quickly when scaled down or cast to grayscale.
• A is nice, but seems to conflate mutli dimensional data with something else
• C feel like a logo for a HPC cluster or other high throughput protocol.

I tinkered with adding a Dask like 'array layer' behind B and highlighting the axes to see if that could keep some of the cleanness of the current design, but maybe add some depth and clarity to highlight the multi dimensional aspect.

[TomNicholas]

I'm going to reiterate my comments on the doc, because I think Alex's last image there moves in the same direction.

IMO Xarray's essence is labelled dimensions, and I think our logo should (and easily could) capture that somehow. The PyData ecosystem is filled with things that are "cubes" or "arrays" in some sense, but what makes xarray unique is the clearly-defined dimensions (axes) and their associated labels. None of the suggestions made by the designer really distinguish xarray from any other library providing a cube of data points, whereas xarray's current logo actually does this really well.

(I'm also not a big fan of the X design for similar reasons - it communicates nothing about what xarray actually is, because as far as I know the X in Xarray is itself totally arbitrary? Then again I guess you could argue that X as in "X-dimension" is suggesting that idea... 🤷‍♂️)

I feel like it should be possible to come up with a simple graphic design that suggests labelled dimension axes. Maybe via axes with ticks alongside the cube array? I tried to make one quickly here a while ago but my graphic design skills clearly leave something to be desired.

By bolding the 3 main axes I think @abkfenris's design starts to suggest a similar idea.

Having said all that I definitely wouldn't die on this hill 😅

[headtr1ck]

Since xarray objects are wrapping other ndarrays, which are the famous cube logos, maybe we could indicate that. Somehow wrapping a cube and add some labels, attributes, índices etc.

[andersy005]

I am sharing some of the feedback i have received from my colleagues who are also Xarray users:

visually I like the A-1 + B options a lot! but it seems like the D options do a better job of conveying the dimension/selection ideas core to xarray…but maybe that doesn’t need to be the responsibility of the logo!

strong preference for A-1 and A-2 and kinda dislike the rest. the main reason is that, when zoomed out, they all start to lose their structure and contrast except the A options and logos like this usually need to be clearly discernible at different sizes. i’m not sure the idea of selection is more clear for me in D, if anything i get it more in A! because of the nested squares which to me convey increasingly specific selections

[Illviljan]

I liked D-2, clean with colors that are clear even from afar.
It's missing the ease of working with different shapes though, I was thinking something like this to indicate it:

[benbovy]

I like the proposed variants (with a preference for B and D), although I do also agree that they don't fully capture data cube multi-dimensions and dimension labels.

I couldn't help but give it a try (keeping a single cube for simplicity but taking a few ideas from the current logo like parallel plans also suggested by @abkfenris and @TomNicholas...):

(EDIT: I've been trying a few things and it drifted away from the logos proposed in #66 (comment). Not sure if that was the right thing to do at this stage, though... Further iterations on one of the proposed logos sounds good to me too)

[fmaussion]

I really like @benbovy 's suggestion (except maybe the choice of colors - but this is very subjective) and I have similar concerns as many others that with the new designs the particularity of xarray gets lost and abstracted too much...