diff --git a/docs/_config.yml b/docs/_config.yml index 35ed5ac..5d1cb19 100644 --- a/docs/_config.yml +++ b/docs/_config.yml @@ -1,8 +1,8 @@ theme: jekyll-theme-slate -site_name: LogosJ +site_name: LogoJS repo_name: logojs-package repo_url: https://www.github.com/weng-lab/logojs-package -site_description: "LogosJ Javascript sequence logos" +site_description: "LogoJS Javascript sequence logos" site_author: Henry Pratt remote_branch: master diff --git a/docs/alphabet.md b/docs/alphabet.md index c416e8d..7397aa4 100644 --- a/docs/alphabet.md +++ b/docs/alphabet.md @@ -2,7 +2,7 @@ ## Alphabet overview -LogosJ combines sets of individual glyphs into alphabets. An alphabet is an array of **symbols**, +LogoJS combines sets of individual glyphs into alphabets. An alphabet is an array of **symbols**, each of which should have a unique color and glyph combination. Symbols are not restricted to just one glyph; if you are rendering a dinucleotide logo, for example, you might use symbols with two glyphs each. Alphabets can also have multiple symbols that use the same glyph with different @@ -18,17 +18,17 @@ letter, a single value may be used in place of an array. * **component** an array of components used to render the glyphs in this symbol. Should be the same length as **color**. If your alphabet uses custom glyphs, import your custom glyph components and use them here. If the symbol is only one letter, a single component may be used -in place of an array. If you are only using letters and digits which are built in to LogosJ, you -can use the **regex** field instead, and LogosJ will populate this field for you using the +in place of an array. If you are only using letters and digits which are built in to LogoJS, you +can use the **regex** field instead, and LogoJS will populate this field for you using the `loadGlyphComponents` function. * **regex** a string representing the sequence of letters in this symbol. This field is not required, but may be used as a shorthand rather than explicitly including components in the -**component** field. LogosJ will populate the **components** field for you automatically with +**component** field. LogoJS will populate the **components** field for you automatically with matching built-in letters and digits if you leave it empty. ## Built-in alphabets -LogosJ provides built-in alphabets for common use cases for convenience. If you need to render +LogoJS provides built-in alphabets for common use cases for convenience. If you need to render a custom logo with these symbol sets, you can import these alphabets rather than build them yourself. In React, these can be imported directly from the `logojs` package; without React, they are accessible under the `logojs` namespace (i.e. `logojs.DNAAlphabet`). @@ -50,7 +50,7 @@ with different symbols. ## Custom alphabets To make a custom alphabet, simply create a custom array of symbol objects as described above. -If you have custom React components for custom glyphs not built-in to LogosJ, you can include +If you have custom React components for custom glyphs not built-in to LogoJS, you can include them in the **components** field. The following is an example of a custom alphabet with **M** and **W** representing methylated **CpG** on the plus and minus strands (the syntax below first includes the core of the `DNAAlphabet`, then extends it with **M** and **W**): @@ -67,12 +67,12 @@ export const METHYL_ALPHABET = loadGlyphComponents([ ## Alphabet utilities -LogosJ provides two utility functions to make generating custom alphabets easier in particular +LogoJS provides two utility functions to make generating custom alphabets easier in particular use cases. The `loadGlyphComponents` function reads the optional **regex** field of each symbol in a custom alphabet and automatically populates the corresponding **component** field with built-in -glyphs from LogosJ. If a symbol has a **component** field already but has no **regex** field, +glyphs from LogoJS. If a symbol has a **component** field already but has no **regex** field, it will be left unchanged; however, if it has a **regex** field and a **components** field the contents of the **components** field will be overwritten. The regex field must only contain the letters A-Z and a-z and the digits 0-9. The function takes the following argument: diff --git a/docs/custom.md b/docs/custom.md index f2de573..44d17f5 100644 --- a/docs/custom.md +++ b/docs/custom.md @@ -2,7 +2,7 @@ ## Overview -LogosJ supports a wide array of customizations for logos. You can use custom alphabets, make +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. @@ -118,7 +118,7 @@ takes the following arguments: ## Logos without axes -Logos do not need to be rendered with the default, built-in axes. LogosJ provides a `RawLogo` component +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 `` tag; you need to provide it yourself. This adds flexibility, however, to render the logo on top of other SVG annotations. diff --git a/docs/glyph.md b/docs/glyph.md index b7109fb..49495fd 100644 --- a/docs/glyph.md +++ b/docs/glyph.md @@ -2,14 +2,14 @@ ## Glyph overview -Glyphs are the smallest building blocks of LogosJ logos. Each glyph is a self-contained SVG +Glyphs are the smallest building blocks of LogoJS logos. Each glyph is a self-contained SVG object which renders itself within a 100 by 100 square. Logo components are responsible for applying the appropriate transforms to the glyph objects they contain to adjust their positions within the logo and their heights. ## Built-in glyphs -LogosJ uses a custom font to render its glyphs, which include the capital letters A-Z, the lower +LogoJS uses a custom font to render its glyphs, which include the capital letters A-Z, the lower case letters a-z, and the digits 0-9. Most glyphs contain a single SVG `path` element, and apply their props directly to it. You can apply properties including, but not limited to: @@ -20,7 +20,7 @@ being opaque. In general, it is not necessary to render glyphs directly; instead, they should be passed as properties to logo components in alphabet arrays (see the alphabet page for details). When you need to include built-in symbols in a custom alphabet, you can import built-in glyphs directly from the -LogosJ package. Capital letters are their own components; lower case letters are represented as LC_a, +LogoJS package. Capital letters are their own components; lower case letters are represented as LC_a, LC_b, etc. and numbers as N1, N2, etc. For example the following code imports capital A, lower case a, and the number 1: @@ -33,13 +33,13 @@ In plain Javascript, these are available in the `logojs` namespace as `logojs.A` ## Custom glyphs -If you want to add a custom symbol which is not built in to LogosJ, you can make a custom glyph +If you want to add a custom symbol which is not built in to LogoJS, you can make a custom glyph component. Glyph components should render an SVG element, such as a `path` or a collection of `path`s contained with a `g`, with a width of 100 and a height of 100. When rendered in a logo, your custom glyph will be scaled automatically. It is best practice to pass the full collection of properties your glyph receives on to the SVG -element it renders. For example, here is the source code for LogosJ's built-in **C**, which passes +element it renders. For example, here is the source code for LogoJS's built-in **C**, which passes all its properties on to a single child `path`: ```js diff --git a/docs/index.md b/docs/index.md index 0259311..9dddb9a 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,17 +1,17 @@ --- -title: 'LogosJ: Embeddable SVG Sequence Logos' +title: 'LogoJS: Embeddable SVG Sequence Logos' --- -LogosJ is a Javascipt package for creating SVG sequence logos. +LogoJS is a Javascipt package for creating SVG sequence logos. In addition to basic DNA, RNA, and protein logos, we support custom alphabets and variety of advanced logo types and custom annotations. -LogosJ can be used with and without ReactJS. A companion web app makes it easy to share +LogoJS can be used with and without ReactJS. A companion web app makes it easy to share SVG logos and generate them in batches from the output of common tools such as the MEME Suite. ## Examples -LogosJ supports a wide range of biological use cases. Detailed examples with code samples +LogoJS supports a wide range of biological use cases. Detailed examples with code samples are available in this documentation and through our [companion site](http://logojs.wenglab.org/app/gallery). Shown below are protein, RNA, methyl DNA, dinucleotide, and protein/DNA interaction logos. @@ -33,7 +33,7 @@ advanced annotations
## Using in your web application -You can add LogosJ to your project using NPM or Yarn: +You can add LogoJS to your project using NPM or Yarn: ```sh yarn add logojs-react ``` @@ -42,8 +42,8 @@ or npm install logojs-react ``` -If you want to use LogosJ in a static web page, you can simply include the package with a -static script tag, which will add LogosJ to the global namespace as `logojs`: +If you want to use LogoJS in a static web page, you can simply include the package with a +static script tag, which will add LogoJS to the global namespace as `logojs`: ```html