Skip to content

Commit

Permalink
update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
thomcsmits committed Jun 12, 2024
1 parent 105d918 commit cf9de52
Showing 1 changed file with 53 additions and 3 deletions.
56 changes: 53 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,65 @@ AltGosling is a library based on [Gosling](https://github.com/gosling-lang/gosli
There is a large gap in accessibility, specifically for people with blindness and low vision (BLV), on the web. The Web Content Accessibility Guidelines ([WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/)) require text descriptions for images. AltGosling creates text descriptions for genomic visualizations created with Gosling. In this way, interactive visualizations can be deployed on the web and automatically include text descriptions.


## Installation
AltGosling is available as an [NPM package](https://www.npmjs.com/package/altgosling).

Install it with your favorite package manager.

```bash
npm install altgosling
```

## Quick Start with React
The fastest way to get AltGosling running is shown below.

```bash
import React from 'react';
import gosling from 'gosling.js';
import { AltGoslingComponent } from 'altgosling';

function Demo() {
// example spec
const goslingSpec = {
"title": "Tonsil ChIP-seq in Th1 cells",
"tracks": [
{
"layout": "linear",
"width": 800,
"height": 180,
"data": {
"url": "https://resgen.io/api/v1/tileset_info/?d=UvVPeLHuRDiYA3qwFlm7xQ",
"type": "multivec",
"row": "sample",
"column": "position",
"value": "peak",
"categories": ["sample 1"],
"binSize": 5
},
"mark": "bar",
"x": {"field": "start", "type": "genomic", "axis": "bottom"},
"xe": {"field": "end", "type": "genomic"},
"y": {"field": "peak", "type": "quantitative", "axis": "right"},
"size": {"value": 5}
}
]
}
return (
<>
<AltGoslingComponent spec={goslingSpec}/>
</>
);
}
```
## Demo
A demo of AltGosling is available [here](https://gosling-lang.github.io/altgosling/).
All examples are available in [demo/examples](https://github.com/gosling-lang/altgosling/tree/master/demo/examples).
A minimum example of how to include AltGosling as a React Component can be found in [demo/Demo.tsx](https://github.com/gosling-lang/altgosling/blob/master/demo/Demo.tsx).

## Contributing to Alt
## Contributing to AltGosling
We welcome contributions to AltGosling! Please refer to the [contributing guidelines](CONTRIBUTING.md).
Expand Down

0 comments on commit cf9de52

Please sign in to comment.