🏠 back to Observable

How to display a hyphen in a graph?

I’m creating a bar chart for -log₁₀(p‑value). In the editor hyphen in “p‑value” is properly displayed, but, in the graph a hyphen is displayed as a minus (non-breaking hyphen is not though). In the html-element a hyphen is properly displayed:


(the notebook link)

If I copy the caption and paste it in the editor it’s still a hyphen. In the same time dash is rendered properly.
- minus
‐ hyphen
‑ non-breaking hyphen
— dash

The question is how to enforce proper display of hyphens, minuses and 30+ other weird dashes, and, I assume, some other symbols?

To clarify: you want to use U+002D hyphen-minus (- or \u002d) as your minus sign, not U+2212 minus sign ( or \u2212), and you want to use U+2010 hyphen ( or \u2010) as your hyphen?

I see your code as doing exactly that, and there’s no character encoding conversion happening, so if the visual appearance is what you want it’s presumably because that’s how the font displays those characters. In the case of the SELECT element, it will be your operating system’s system font (such as San Francisco for macOS); for the SVG element, it will be browser’s san-serif font (such as Helvetica for macOS).

2 Likes

Aside: Personally I think D3 switching to using hyphen-minus to indicate negative numbers makes for lots of ugly charts. U+2212 looks a lot better. :stuck_out_tongue_winking_eye:

D3 did use the minus sign originally, but people complained about that, too (e.g., #595), primarily because there was an expectation that d3.format would use the same symbol as JavaScript’s number.toString. The minus sign was thus replaced with hyphen-minus in 2.10.0 (da3131c, #756). (As you know, because you already commented on that commit.)

I’m somewhat ambivalent. Both are technically correct. I’m aware that hyphen-minus is a compromise from a time where good typesetting was largely impractical for computers. As I commented on the linked issue, I don’t think it’s reasonable to expect d3.format to be compatible with JavaScript’s number coercion, since the goal of d3.format is to format numbers for human consumption instead of machines.

At any rate, we should at least allow you to override the minus sign in the locale, and perhaps it is worth reverting the adoption of hyphen-minus. Probably better to discuss this over in d3-format than the Observable forum. :slight_smile: