Datawrapper Recipes
Show a tooltip with column values in descending order
Assuming your data columns are column_a
, column_b
and column_c
, you can display all three values in descending order in a HTML table using the following tooltip template code:
<table>
{{JOIN(MAP(f(el)=CONCAT("<tr><th>", SLICE(["Column A","Column B", "Column C"], NUMBER(SLICE(SPLIT(el, "_"), 0, 1)), NUMBER(SLICE(SPLIT(el, "_"), 0, 1)) + 1), "</th><td>", FORMAT(SLICE(SPLIT(el, "_"), 1), "0.0[0]%"), "</td></tr
>"), SORT(MAP(f(v,i)=CONCAT(i, "_", v), [column_a, column_b, column_c]),FALSE,f(el)=NUMBER(SLICE(SPLIT(el, "_"), 1)))), "")}}
</table>
This uses Datawrapper's tooltip template syntax. The full list of supported tags is available here. We use two undocumented features:
SORT
accepts a function argument, not just a string.MAP
is passed the index, not just the current value.