Skip to content

Commit

Permalink
Add grammar reference page (#85)
Browse files Browse the repository at this point in the history
* feat: union props from different objs

* feat: Grammar ref to sidebar

* feat: update table to show more granular types

* style: make code highlighting less dark

* feat: grammar reference

* feat: add links to grammar ref

* fix: remove image

* fix: phrasing
  • Loading branch information
etowahadams authored Oct 23, 2023
1 parent 4c44eb6 commit b59cc1c
Show file tree
Hide file tree
Showing 7 changed files with 490 additions and 32 deletions.
2 changes: 0 additions & 2 deletions docs/composition.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@ import GoslingSchema from './assets/gosling.schema.json'

Gosling visualizations are composed from **tracks** and **views**.

<img src='/img/doc_images/track-view.png' />

A **`track`** is a unit building block in Gosling which can be represented as a bar chart, a line chart, or an ideogram.
Multiple tracks can be grouped into together into a **`view`**. A view defines the genomic location for all the tracks it
contains, and the tracks define the data to be visualized.
Expand Down
2 changes: 1 addition & 1 deletion docs/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ slug: /

Gosling.js is a declarative grammar for interactive (epi)genomics visualization on the Web.

To get started with Gosling, we recommend going through the [Create Single Track Visualization Tutorial](/tutorials). Then, you can explore examples in the [online editor](https://gosling.js.org), and start building your own Gosling visualizations using the the grammar and Javascript API parts of the documentation as a reference.
To get started with Gosling, we recommend going through the [Create Single Track Visualization Tutorial](/tutorials). Then, you can explore examples in the [online editor](https://gosling.js.org), go through the [grammar guide](category/grammar-guide), and start building your own Gosling visualizations using the the [grammar reference](reference) and [Javascript API](js-api) parts of the documentation as a reference.

## What is a grammar for data visualization?
Words are combined together into sentences based on their parts of speech and grammar rules. In a similar way, visual components (such as a coordinate axis, plot markers, and legend) have specific roles and are combined according to certain rules. You probably know these rules without realizing it! These roles and rules have been made explicit such as in the [Grammar of Graphics](https://link.springer.com/book/10.1007/0-387-28695-0).
Expand Down
Loading

0 comments on commit b59cc1c

Please sign in to comment.