🏠 back to Observable

How to show image at the end of the bar chart?

I’m testing out with this [https://observablehq.com/@d3/bar-chart-race](http://bar chart)

How to show image (flag or brand logo) at the end of the bar chart?

Like this:

Any suggestions?

Hi @ferdat,

By coincidence, I happened to implement a version of this yesterday afternoon.

See the images function, which defines svg:image elements in terms of the bar positions.

3 Likes

If the flags you want are available as emoji (e.g., :us:), you could also crib from this example:

3 Likes

How to fix countries names issue?

https://observablehq.com/d/4b54a17c31d8beb0

Please click “enable link sharing” in the notebook menu so readers of this thread can see your notebook.

Oops! :man_facepalming:

Here’s the notebook:

Ah, that’s based on John Burn-Murdoch’s implementation. I’d probably recommend starting over with the newer D3 implementation, which is cleaner and has an explainer to teach you how it works. Fortunately the data formats are compatible (and the D3 version doesn’t require you to compute the ranks or previous values), so here’s a new fork with your data:

And to see what I changed to add the images, here’s a diff with the original:

:slight_smile: Thanks Mike!
:chart_with_upwards_trend::chart_with_downwards_trend::bar_chart: