using subscripts in diagrams

[martinezmicaela]

Hello,

Thanks for making this great package. I have a question, not really an issue. Could someone share how to use subscripts within a diagram? I have been trying to use paste0() and expressions to do this, but I have not managed to figure it out.

All the best,
Micaela

[rich-iannone]

I'm going to look into this. I think it could be done with HTML. Just a theory at this point but I'll post an update soon.

[timelyportfolio]

For now, mermaid allows use of HTML as a foreign element for the text inside of the rendered SVG. So for subscript, we could do something like the following (see <sub> documentation). I'll also add a <sup> in the example.

mermaid("graph LR; A[A<sup>2</sup>]-->|Text with a <sub>xy</sub>|B")

We'll need to monitor mermaid-js/mermaid#58 to see if this HTML foreignObject support changes. Also, if I have time, I would like to potentially demo how we could use KaTeX or mathJax as text labels.

[martinezmicaela]

Thanks so much!

[rich-iannone]

For Graphviz graphs, try this:

grViz("
digraph subscript {

  # Graph statements
  graph [layout = circo, overlap = false]

  # Node statements
  a [label =<
     <TABLE><TR><TD>one<SUB>2</SUB></TD></TR></TABLE>>];
  b [label = 'hi']

  # Edge statements
  a -> b
}
")

Graphviz expects the use of a table when using HTML in a label. You have to use these primitive HTML tags, all set in capitals. I'll figure out how to get rid of the default box in a bit. Also problematic: the subscripted text is the same point size as the regular text. I'll look into that as well.

[timelyportfolio]

As another (not sure if better) option, you can use the unicode character (see Stack Overflow post). Just change 2 at the end of &x208? to the number you would like so for 3 use &x2083. Here is the example from @rich-iannone using this notation.

library(DiagrammeR)

grViz(
  "
    digraph subscript {

    # Graph statements
    graph [layout = circo, overlap = false]

    # Node statements
    a [label = 'One₂'];
    b [label = 'hi']

    # Edge statements
    a -> b
    }
  "
)

[timelyportfolio]

@rich-iannone you don't have to use the TD.

library(DiagrammeR)

grViz(
  "
    digraph subscript {

    # Graph statements
    graph [layout = circo, overlap = false]

    # Node statements
    a [label = <One<SUB>2</SUB>>];
    b [label = 'hi']

    # Edge statements
    a -> b
    }
  "
)

[rich-iannone]

Ah, that's good about not needing the table def. Now it's a toss-up between which method is better: Unicode character code or old, uppercase HTML tags. I think we can do one better by having an interpreter in place to make it more convenient for the user to enter symbols and subscripts/superscripts (something Latex-like).

[timelyportfolio]

As a last example, here we can manually set a smaller font size to the subscript. I know it is clunky, but it does get close to an expected result.

library(DiagrammeR)

grViz(
  "
    digraph subscript {

    # Graph statements
    graph [layout = circo, overlap = false]

    # Node statements
    a [label = <One<FONT POINT-SIZE='8'><SUB>2</SUB></FONT>>];
    b [label = 'hi']

    # Edge statements
    a -> b
    }
  "
)

[rich-iannone]

Spent a little time trying to make this a bit easier. Now by using the @_{...} or @^{...} constructions (for subscripting and superscripting, respectively), you can achieve the same thing:

library(DiagrammeR)

grViz("
digraph subscript {

    # Graph statements
    graph [layout = circo, overlap = false]

    # Node statements
    node [fontname = Helvetica]
    a [label = 'Two@_{2}']
    b [label = 'Three@^{3}']

    # Edge statements
    a -> b
    }
")

Get the newest build of DiagrammeR with devtools::github_install to use this functionality. Warning though: it doesn't work (yet) if there is more than subscript or superscript in a label/tooltip. I'll address that soon.

[martinezmicaela]

Sweet! Thanks!!!

On Monday, March 2, 2015, Richard Iannone [email protected] wrote:

Spent a little time trying to make this a bit easier. Now by using the
@_{...} or @^{...} constructions (for subscripting and superscripting,
respectively), you can achieve the same thing:

library(DiagrammeR)

grViz("digraph subscript { # Graph statements graph [layout = circo, overlap = false] # Node statements node [fontname = Helvetica] a [label = 'Two@_{2}'] b [label = 'Three@^{3}'] # Edge statements a -> b }")

[image: sub_super]
https://cloud.githubusercontent.com/assets/5612024/6437451/f581e5e2-c073-11e4-9e69-a2579933c8de.png

Get the newest build of DiagrammeR with devtools::github_install to use
this functionality. Warning though: it doesn't work (yet) if there is more
than subscript or superscript in a label/tooltip. I'll address that soon.

—
Reply to this email directly or view it on GitHub
#71 (comment)
.

---

Micaela Martinez-Bakker

NSF Doctoral Fellow
Department of Ecology and Evolutionary Biology
The Center for the Study of Complex Systems
University of Michigan
2044 Kraus Nat. Sci. Bldg.
830 North University
Ann Arbor, MI 48109, USA

e-mail:[email protected]

web:
my website http://micaelamartinezbakker.com/
my UMich page
http://www.lsa.umich.edu/vgn-ext-templating/v/index.jsp?vgnextoid=e8502c76f0fe0410VgnVCM100000c2b1d38dRCRD&vgnextchannel=6d14bc5377b30410VgnVCM100000c2b1d38dRCRD&vgnextfmt=detail
http://www.lsa.umich.edu/eeb/people/grads/bakkerma.html

I tweet about Infectious Disease Ecology @MartinezBakker
https://twitter.com/MartinezBakker

[tinyheero]

This seems to have a weird effect when trying to using the subscript with greek letters, specifically \mu:

grViz("
  digraph dot {

    node [shape = square,
          color = black,
          label = 'μ@_{k}']
    mean

    node [shape = square,
          color = black,
          label = 'σ@_{k}']
    sigma
  }
  ",
engine = "dot")

[smeme]

Is it possible to add both - supersciprts and subscripts? The following snippet adds extra spaces for the subscripts:

grViz("
 digraph dot {
 node [shape = square,
      color = black,
      label = 'σ@^{i,j}@_{k,l}']
 sigma
 }
", engine = "dot")

[fintzij]

Hello,

Has the bug reported on Dec. 15, 2015 by @tinyheero been resolved? I am getting the same behaviour when using '@gamma' as the variable.

Thanks

[sarahpolcz]

Same issue as @tinyheero and @fintzij concerning subscripts for '@lambda'

Thank you

[kiheunch]

Seems the problem mentioned by tinyheero still persists.