#24717 closed enhancement (fixed)

Improve design of relay and bridge badges and map overlay

Reported by: irl Owned by: irl
Priority: Medium Milestone:
Component: Metrics/Bot Version:
Severity: Normal Keywords: ux-team
Cc: teor, antonela Actual Points:
Parent ID: Points:
Reviewer: Sponsor:


The code that draws the badges is at the end of the org.torproject.metrics.bot.BaseRelayImpl class:


For the redesign, mockups are all that's needed as I can do the actual Java code, but it might help to see how they are created. Essentially it builds up the image by drawing on to a canvas at fixed coordinates.

These badges are then converted into a bitmap image and uploaded for Twitter and Mastodon. The size of the badge is currently based on some "best practices" I found on a blog for Twitter, it works mostly in Mastodon too but I wonder if a change of size/aspect ratio would be useful.

In the future, I'd like to write JavaScript too that can build these as SVGs for dynamic inclusion in web pages so that relay/bridge operators can include them on their blog. These means that any dynamic text must be in a font we're allowed to embed.

There are currently 3 image types generated by metrics-bot:

Relay: https://twitter.com/TorAtlas/status/944267221769089024
Bridge: https://twitter.com/TorAtlas/status/944255643728441344
World Map: https://twitter.com/TorAtlas/status/944255648551849987

The world map image is mostly generated by xplanet (http://xplanet.sourceforge.net/) but there is an overlay bar at the bottom to add branding.

One idea that I have been thinking about is adding a "country" badge, which shows relay count, distinct AS count and advertised bandwidth alongside an image of the outline of the shape of that country, but I have no idea where I would get the country shapes from.

Child Tickets

#24739enhancementclosedirlUse an equal-area projection for TorAtlas bot

Attachments (6)

Map@2x.png (228.7 KB) - added by antonela 23 months ago.
Bridge@2x.png (108.2 KB) - added by antonela 23 months ago.
Relay@2x.png (90.3 KB) - added by antonela 23 months ago.
Map@2x--.png (189.3 KB) - added by antonela 22 months ago.
new_design_impl.png (125.6 KB) - added by irl 21 months ago.
Tor Icon.svg (4.4 KB) - added by antonela 21 months ago.

Download all attachments as: .zip

Change History (22)

Changed 23 months ago by antonela

Attachment: Map@2x.png added

Changed 23 months ago by antonela

Attachment: Bridge@2x.png added

Changed 23 months ago by antonela

Attachment: Relay@2x.png added

comment:1 Changed 23 months ago by antonela

Thanks for the detailed specs irl!

I'm attaching to this ticket the first approach for the new cards.

Do exist any chance to render a flat map? Based on our current card size and the data we are showing, I think it will work better.

Let me know what do you think!

comment:2 Changed 23 months ago by cypherpunks

Thanks for looking at this. I'm still in Leipzig at the moment, and will give more feedback once I'm home.

We could change how the maps are drawn, but one thing to consider is that we do not use the mercator projection as it doesn't represent the actual size of countries well. See #24739.

Can we also add back the tiny onions? The asset I was using is here:


comment:3 Changed 23 months ago by teor

Cc: teor added

Changed 22 months ago by antonela

Attachment: Map@2x--.png added

comment:4 Changed 22 months ago by antonela


I included an updated version of the map using the Mollweide projection.


Do you think we need the Tor Project icon to legitimize it? Maybe should we use the TorMetrics one?

I'm not sure, is up to you :)

Will wait for your feedback on it.

comment:5 Changed 22 months ago by teor

Hey, this map has some serious cropping, geographical, and political issues:

  • it has cropped out Japan, eastern Australia, New Zealand, parts of south-east Asia, and the pacific islands
  • Nigeria and parts of northern China are not shown in grey on the map
  • Afghanistan and Pakistan are shown unified, as is the former USSR

comment:6 Changed 22 months ago by irl

The map is just a concept, when I implement it I'll make sure to have it not cropping and being current.

comment:7 Changed 22 months ago by antonela

Thanksteorfor the heads up and thanks irl for the explaining.

Yes, indeed. It is just a concept. I'll be more than happy if we can make something at least close to it.

Thanks both for working on this!!!

Last edited 22 months ago by antonela (previous) (diff)

comment:8 Changed 21 months ago by irl

Owner: changed from antonela to irl
Status: assignedaccepted

#24886 is also relevant to this ticket.

I'll accept this into my queue now and will start on coding up the designs.

comment:9 in reply to:  8 Changed 21 months ago by antonela


irl, feel free to ping me at irc or here if you need anything

Last edited 21 months ago by antonela (previous) (diff)

comment:10 Changed 21 months ago by irl

Cc: antonela added

Changed 21 months ago by irl

Attachment: new_design_impl.png added

comment:11 Changed 21 months ago by irl

I've mostly implemented the bridge and relay badges now. Attached above is a screenshot of how this looks on Twitter. I decided not to add the @TorAtlas because it doesn't make sense on Mastodon, and other accounts may be added in the future too. I did however add an onion, which will disappear if the nickname is long enough to clobber it.

antonela: Any comments?

comment:12 Changed 21 months ago by teor

It looks great!
The white on black scheme is striking.
I wonder if it's readable, it seems to be,

Changed 21 months ago by antonela

Attachment: Tor Icon.svg added

comment:13 Changed 21 months ago by antonela

irl it looks awesome!
Here I'm attaching a Tor Icon .svg. Could you use it?


I just realized that we don't have this icon at the styleguide. I'll add it.

Thanks for working on it!!!!

comment:14 Changed 21 months ago by irl

Yes, I did wonder if we had such a thing. The PNG seems to not have great transparency around the edges. I'll aim to include this soon.

comment:15 Changed 21 months ago by irl

Remaining tasks for this ticket:

  • Replace onion with SVG version
  • Replace map overlay with a grey bar with just the onion and no text

Any other improvements should be separate tickets.

comment:16 Changed 21 months ago by irl

Resolution: fixed
Status: acceptedclosed

As of fea636e I think this is done. (:

Note: See TracTickets for help on using tickets.