-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Upgrade Docusaurus, rearange content (#79)
- Upgrade Docusaurus to latest version - Creates a new "Usage" tab in the header - New "Getting Started" text and explanation - Give the Grammar category an index page - Give descriptions to Grammar sub-pages
- Loading branch information
1 parent
e6b8c8b
commit c81d52e
Showing
16 changed files
with
3,441 additions
and
2,830 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,99 +2,22 @@ | |
title: Getting Started | ||
slug: / | ||
--- | ||
We currently support the following ways of using Gosling. | ||
- [Create Your Visualization in Gosling Online Editor](#create-your-visualization-in-gosling-online-editor) | ||
- [Load a Gosling Spec From Your Github Gist](#load-a-gosling-spec-from-your-github-gist) | ||
- [Embed Gosling Component in a HTML File](#embed-gosling-component-in-a-html-file) | ||
- [Use Gosling.js with React](#use-goslingjs-with-react) | ||
- [Resources](#resources) | ||
|
||
## Create Your Visualization in Gosling Online Editor | ||
You can visit [Online Editor](https://gosling.js.org) to visualize your data directly in the website. | ||
Gosling.js is a declarative grammar for interactive (epi)genomics visualization on the Web. | ||
|
||
## Load a Gosling Spec From Your Github Gist | ||
1. To load a spec you first have to create a gist with a file named gosling.js* that specifies the spec. | ||
1. You can additionally specify a readme.md file to describe your spec. | ||
1. Also be sure to give your gist a fabulous title. It'll be shown in the gosling editor. | ||
You can then open your visualization at <a>http://<editor_url>/?gist=<github_username>/<gist_id></a>. | ||
<!-- For example, https://gosling.js.org/?gist=flekschas/e6e388332814886d4d714efd0e88093b --> | ||
For example, https://gosling.js.org/?gist=wangqianwen0418/1cc79f00990806f07b379ae6a7c7b7b3 | ||
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. | ||
|
||
## Embed Gosling Component in a HTML File | ||
```html | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/hglib.css"> | ||
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script> | ||
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script> | ||
<script src="https://unpkg.com/pixi.js@6/dist/browser/pixi.min.js"></script> | ||
<script src="https://unpkg.com/[email protected]/dist/hglib.js"></script> | ||
<script src="https://unpkg.com/[email protected]/dist/gosling.js"></script> | ||
</head> | ||
<body> | ||
<div id="gosling-container"/> | ||
<script> | ||
gosling.embed( | ||
document.getElementById('gosling-container'), | ||
{ | ||
"tracks": [{ | ||
"data": { | ||
"url": "https://server.gosling-lang.org/api/v1/tileset_info/?d=cistrome-multivec", | ||
"type": "multivec", | ||
"row": "sample", | ||
"column": "position", | ||
"value": "peak", | ||
"categories": ["sample 1"] | ||
}, | ||
"mark": "rect", | ||
"x": { "field": "position", "type": "genomic" }, | ||
"color": { "field": "peak", "type": "quantitative", "legend": true }, | ||
"width": 600, | ||
"height": 130 | ||
}] | ||
} | ||
); | ||
</script> | ||
</body> | ||
</html> | ||
``` | ||
## What is a grammar for visualization? | ||
Words are combined together into a 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! People have tried making these rules explicit in what they call a "visual grammar." | ||
|
||
## Use Gosling.js with React | ||
Similarly, *genomic* data visualizations can be understood as being made up of components which follow a set of rules. The **Gosling grammar** formalizes these rules for genomic data visualizations. | ||
|
||
Please visit [gosling-react](https://github.com/gosling-lang/gosling-react) to find detailed instruction on using React. | ||
How is the Gosling grammar used in practice? A Gosling visualization is defined using a **Gosling specification**, which is a JSON object. The structure and values within this JSON object are determined by the Gosling grammar. See the example below to see how parts of a Gosling specification corresponds to its visualization. | ||
|
||
<img src='/img/spec-vis.png'/> | ||
|
||
Beginning with version 0.9.30, Gosling now supports React v18 (You can still use React v16 or v17). | ||
If you are using a Gosling version prior to 0.9.30, please continue to use React v16. | ||
|
||
Install `gosling.js` and its dependent libraries: | ||
## Javascript API | ||
|
||
```sh | ||
yarn add gosling.js higlass pixi.js [email protected] [email protected] | ||
``` | ||
**Gosling.js** takes the Gosling specification as an input and creates the visualization defined by it. You can programmatically interact with this visualization using **Javascript API functions**. | ||
|
||
Add the following stylesheet to your base `html` file: | ||
```html | ||
<head> | ||
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/hglib.css"> | ||
</head> | ||
``` | ||
|
||
Use the Gosling.js' react component to visualize your data: | ||
|
||
```js | ||
import { GoslingComponent } from "gosling.js"; | ||
function App() { | ||
return ( | ||
<GoslingComponent spec={yourSpec}/> | ||
); | ||
} | ||
``` | ||
|
||
## Resources | ||
- How to set up your own HiGlass server for private data exploration? | ||
- HiGlass Server: https://github.com/higlass/higlass-server | ||
- HiGlass Docker: https://github.com/higlass/higlass-docker | ||
- How to prepare your own HiGlass data? | ||
- HiGlass docs for data preparation: https://docs.higlass.io/data_preparation.html | ||
For example, you can use an API function to make the visualization zoom to a particular genomic position, or you can subscribe to click events in the visualization. This is useful to building your own interactive visualizations with Gosling! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,6 @@ | ||
--- | ||
title: Mark | ||
description: Basic elements like point, line, bar, text, triangle. | ||
--- | ||
|
||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.