Htd3
| Project Name | Stars | Downloads | Repos Using This | Packages Using This | Most Recent Commit | Total Releases | Latest Release | Open Issues | License | Language |
|---|---|---|---|---|---|---|---|---|---|---|
| Cytoscape.js | 8,992 | 15 days ago | 9 | mit | JavaScript | |||||
| Graph theory (network) library for visualisation and analysis | ||||||||||
| Arkit | 884 |  | 9 | 34 | 8 hours ago | 60 | March 01, 2020 | 23 | mit | JavaScript |
| JavaScript architecture diagrams and dependency graphs | ||||||||||
| React Graph Vis | 807 |  | 108 | 19 | 2 months ago | 18 | February 15, 2021 | 51 | mit | JavaScript |
| A react component to render nice graphs using vis.js | ||||||||||
| Krane | 580 | 6 days ago | 28 | apache-2.0 | Ruby | |||||
| Kubernetes RBAC static analysis & visualisation tool | ||||||||||
| Tidygraph | 497 | 30 | 48 | 2 months ago | 7 | August 22, 2022 | 44 | other | R | |
| A tidy API for graph manipulation | ||||||||||
| Constellation | 356 | 8 days ago | 131 | apache-2.0 | Java | |||||
| A graph-focused data visualisation and interactive analysis application. | ||||||||||
| Rgat | 337 | a year ago | 7 | apache-2.0 | C# | |||||
| An instruction trace visualisation tool for dynamic program analysis | ||||||||||
| Nodeeditorwinforms | 220 | 2 years ago | 1 | February 06, 2021 | 9 | mit | C# | |||
| Node based user control / editor for Windows Forms | ||||||||||
| Py Upset | 212 | 3 | 5 years ago | 8 | February 06, 2016 | 27 | Python | |||
| A pure-python implementation of the UpSet suite of visualisation methods by Lex, Gehlenborg et al. | ||||||||||
| Graphia | 169 | 7 hours ago | 20 | C++ | ||||||
| A visualisation tool for the creation and analysis of graphs | ||||||||||
Visualisations of genetic data
htd3 is a collection of visualisations built on top of the data
visualisation library d3.js. htd3 is designed to
be easy to use. The visualisations are composable; tracks are
automatically merged.
Available visualisations
htd3.js currently offers the following visualisations: associations graphs, sushi plots, exon-intron rendering, and region heatmaps. Simple boxplots will also be made available soon.
Composability
The visualisations offered by htd3.js are designed to be somewhat composable. To achieve this, htd3 splits input data into tracks and binds graph data to separate layers within each track. As a result, data needed by the associations graph is contained in the "associations" layer of any given track, whereas heatmap data is confined to its own "heatmap" layer in each defined track. This allows a user of the library to quickly disassemble a composed graph (for example to temporarily remove the heatmap component) without affecting the rendering of any other piece of the visualisation.
Preparing an HTML document for htd3.js
For embedding of visualisations inside an HTML document both the htd3 library as well as d3.js have to be included. The following shows a minimal HTML document where htd3 functions will be available:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="htd3.js" charset="utf-8"></script>
<link href="htd3.css" media="all" rel="stylesheet" type="text/css">
</head>
<body>
<!-- your content here -->
</body>
</html>
It is recommended to place htd3 code in a separate JavaScript file that is loaded once the whole document has been rendered. Alternatively, you can place your visualisation code inside a script tag at the very bottom of the body tag.
How to render data
Here is a simple invocation of the associations graph function used to render colour-coded arcs between associated regions on tracks:
htd3('associations', '#example1')
.load('example.bed');
This will select the tag with id "example1" in your HTML document as the target for an associations graph, load and process the data file "example.bed" and render an associations graph. The contents of the "example1" DOM node will be overwritten with the SVG graph.
htd3 can load data from files containing tab-separated fields when a
file name is passed to the load function, or it can process
structured data if a JSON object is passed. (Note that browsers
prohibit loading files from remote locations unless cross-origin
requests are explicitly permitted.) A file to be loaded must contain
records with tab-separated fields; every record is to placed on its
own line. The order of fields is not important; it is inferred from
the order of column headers in the first row of the file. The row
names cannot be customised. Different visualisations require
different columns to be present.
Here is another example of an associations graph, but this time JSON data is passed to the load function directly:
var testData = [{ chr: 'chr3',
start: 10,
end: 20,
targetChr: 'chr3',
targetStart: 60,
targetEnd: 62,
score: 3,
},
{ chr: 'chr5',
start: 70,
end: 100,
targetChr: 'chr5',
targetStart: 57,
targetEnd: 59,
score: 7,
},
];
htd3('associations', '#example2').load(testData);
testData is a JSON array containing two elements. Each element is a
JSON object with various required keys.
Examples
See the examples directory for more examples.
