Skip to content

Commit

Permalink
Add more examples to docs
Browse files Browse the repository at this point in the history
  • Loading branch information
pverscha committed Feb 22, 2021
1 parent 041df30 commit 0f318c9
Show file tree
Hide file tree
Showing 20 changed files with 27 additions and 55,263 deletions.
20 changes: 12 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,23 +1,27 @@
# Unipept visualizations

This repository contains stand-alone versions of the unipept visualizations. At this time, a treeview, a treemap and a sunburst graph is available.
This repository contains stand-alone versions of the Unipept visualizations. At this time, a treeview, a treemap, a sunburst graph and a heatmap are available. The complete package has been written in TypeScript and uses D3 (v6) internally and is aimed at rendering vast amounts of data as fast as possible. Most visualizations are SVG-based, but an HTML Canvas has been used where necessary to make sure performance is as high as possible.

![treeview example](examples/treeview-taxonomy.png)

![treemap example](examples/treemap-taxonomy.png)

![sunburst example](examples/sunburst-taxonomy.png)

A live example of this visualization can be found [on http://bl.ocks.org/bmesuere/162572f2d70c1a3a3e09](http://bl.ocks.org/bmesuere/162572f2d70c1a3a3e09) with additional examples in the examples directory.
![heatmap example](examples/heatmap.png)

## Requirements
[D3.js](https://d3js.org/) (version 3.x should do) and [jQuery](https://jquery.com/) are required to use these visualizations. The code is written using JavaScript ES2015 features, but a transpiled ES5-compatible version (`unipept-visualizations.min.js`) that should work in all modern browsers is available in the [`dist`](dist) directory.
[D3.js](https://d3js.org/) (version 6.x should do) and is required to use these visualizations. The code is written using JavaScript ES2020 features, but a transpiled ES6-compatible version (`unipept-visualizations.js`) that should work in all modern browsers is available in the [`dist`](dist) directory.

Building your own version can be done by cloning this repository and running `grunt`.
[comment]: <> (A live example of this visualization can be found [on http://bl.ocks.org/bmesuere/162572f2d70c1a3a3e09]&#40;http://bl.ocks.org/bmesuere/162572f2d70c1a3a3e09&#41; with additional examples in the examples directory.)

## Installation and use
1. Download and include [`unipept-visualizations.min.js`](dist/unipept-visualizations.min.js) on your page
2. Include D3 and jQuery
1. Download and include [`unipept-visualizations.min.js`](dist/unipept-visualizations.js) on your page
2. Include D3
3. Add a div with an id (for example `<div id="example"></div>`) to your page
4. Initialize the treeview by invoking `treeview()` or `treemap()` on the jQuery-selected div. For example `$("#example").treeview(data, options)`
4. Initialize the treeview by invoking `treeview()` or `treemap()` with the div-element. For example `const treeview = new UnipeptVisualizations.Treeview(document.getElementById("example"), data, options);`

## Documentation
Head over to our [GitHub Wiki](https://github.com/unipept/unipept-visualizations/wiki) for the full documentation of this package.

## Treeview

Expand Down
Loading

0 comments on commit 0f318c9

Please sign in to comment.