# Custom Logos
## Overview
LogoJS supports a wide array of customizations for logos. You can use custom alphabets, make
logos where some letters extend below the x-axis, or take advantage of SVG components to layer
on custom annotations. Several advanced React components are available offering varying degrees
of customization.
## Custom alphabets
You can use any combination of symbols you like in your logos. The **custom alphabets** page in
the **Building blocks: glyphs and alphabets** section has details. Once you have a custom alphabet,
you can render a logo with it using the `Logo` component, which takes the following properties:
* **ppm**: a matrix containing nucleotide frequencies at each position, ranging
from 0.0 to 1.0. Each row is a position in the logo, and the columns are alphabetical
(A, C, G, U).
* **pfm**: a matrix containing the number of times a nucleotide occurs at each
position; this is only used if **ppm** is not provided. The row and column orders
are the same as for **ppm**.
* **fasta**: sequences in FASTA format from which to compute the logo; only used if **ppm** and **pfm** are not provided.
* **noFastaNames**: if specified, the string in FASTA contains exactly one sequence per line and no sequence names are included.
* **countUnaligned**: if specified, unaligned positions in the FASTA sequence are inlcuded in the infomation content computation, which de-emphasizes them in the logo.
* **mode**: determines how letter heights are computed; may be either
`"INFORMATION_CONTENT"` (default) or `"FREQUENCY"`.
* **startpos**: if set, the first base in the logo will be numbered with a
value other than the default of 1.
* **alphabet**: the custom alphabet containing the symbols the logos should render.
* **backgroundFrequencies**: optional; an array of background frequencies to use to
compute information content in place of the default 1 / (alphabet length). The order of the
array matches the order of **alphabet**. If **mode** is not INFORMATION_CONTENT, this is ignored.
* **yAxisMax**: optional; if provided, uses the given value as an explicit maximum for the y-axis
rather than the maximum number of bits possible. This is only used in `INFORMATION_CONTENT` mode;
in `FREQUENCY` mode, it is ignored.
* **onSymbolMouseOver**: callback when a symbol in the logo is moused over.
* **onSymbolClick**: callback when a symbol in the logo is clicked.
* **onSymbolMouseOut**: callback when a symbol in the logo is moused out.
The three mouse event callbacks receive two arguments: *position*, the 0-based index of the position in the logo; and *symbol*, the symbol's entry in the *alphabet* array.
The following complete example renders a logo with **M** and **W** representing methylated **CpG**:
```js
import { Logo } from 'logojs-react';
const METHYL_VALUES = [
[0,0,0,1,0,0]
[0,0,0,1,0,0]
[0.3,0,0.3,0.4,0,0]
[0,0,0,0,1,0]
[0,0,0,0,0,1]
[0,0.6,0,0.4,0,0]
[1,0,0,0,0,0]
];
const METHYL_ALPHABET = [
{"color":"#880088","regex":"A"}
{"color":"#880000","regex":"C"}
{"color":"#000088","regex":"G"}
{"color":"#888800","regex":"T"}
{"color":"#ff0000","regex":"M"}
{"color":"#008888","regex":"W"}
];
export const MethylLogo = props => (
);
```
To embed a `Logo` outside of React, use the `embedLogo` function, which takes the following
arguments:
* **div** the `div` element in which to render the logo
* **properties** object containing the properties listed above
## Negative letters
The `LogosWithNegatives` component allows letters to extend below the x-axis. In this case, the
values in the matrix represent the raw heights above (or below) the x-axis, and the y-axis will
autoscale. The component accepts the following properties:
* **values** matrix containing the heights of the letters at each position; values can be positive or negative.
* **startpos** if set, the first base in the logo will be numbered with a
value other than the default of 1.
* **alphabet** the custom alphabet containing the symbols the logos should render.
* **negativealpha** if provided, specifies that letters below the x-axis should be semi-transparent
* **inverted** if provided, specifies that letters below the x-axis should be rendered upright
rather than upside-down, which is the default.
* **onSymbolMouseOver**: callback when a symbol in the logo is moused over.
* **onSymbolClick**: callback when a symbol in the logo is clicked.
* **onSymbolMouseOut**: callback when a symbol in the logo is moused out.
The three mouse event callbacks receive two arguments: *position*, the 0-based index of the position in the logo; and *symbol*, the symbol's entry in the *alphabet* array.
The following complete example renders a DNA logo with some negative letters:
```js
import { LogoWithNegatives, DNAAlphabet } from 'logojs-react';
const DNA_VALUES = [
[0,0,0,0], [-0.5,0.5,-0.5,0.5], [0.5,-2,-2,3],
[2.5,-2,0.5,-0.5], [4.5,-1,-2,-2.5], [-1,-1,0,2],
[-1.5,-0.5,0.5,1.5], [1.5,-1.5,1,-0.5], [-1,1,0,0]
[0,0,0,0]
];
export const DNALogo = props => (
);
```
To embed a `LogoWithNegatives` outside of React, use the `embedLogoWithNegatives` function, which
takes the following arguments:
* **div** the `div` element in which to render the logo
* **properties** object containing the properties listed above
## Logos without axes
Logos do not need to be rendered with the default, built-in axes. LogoJS provides a `RawLogo` component
which just renders glyphs. A `RawLogo` component does not render its own `