https://github.com/gamcil/clustermap.js
https://github.com/gamcil/clustermap.js
Last synced: 10 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/gamcil/clustermap.js
- Owner: gamcil
- License: mit
- Created: 2019-09-24T05:49:43.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2021-10-26T05:54:45.000Z (over 4 years ago)
- Last Synced: 2025-04-16T00:59:42.697Z (about 1 year ago)
- Language: JavaScript
- Size: 479 KB
- Stars: 31
- Watchers: 1
- Forks: 5
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# clustermap.js
A d3 chart for generating gene cluster comparison figures
## What is it?
clustermap.js is an interactive, reusable d3 chart designed to visualise homology between
multiple gene clusters.
## Input data
The clustermap chart expects data in the following format:
```
{
"clusters": [
{
"uid": ,
"name": ,
"loci": [
{
"uid": ,
"name": ,
"start": ,
"end": ,
"genes": [
{
"uid": ,
"name": ,
"start": ,
"end": ,
"strand": ,
}
]}
]}
],
"links": [
{
"query": {
"uid": ,
"name":
},
"target": {
"uid": ,
"name":
},
"identity":
}
],
"groups": [
{
"uid": ,
"label": ,
"genes": [],
"colour": ,
"hidden":
}
]
}
```
## Example usage
1. Import d3 v6
2. Import clustermap.js
3. Style container div element to take up entire viewport
4. Create and configure clustermap.js ClusterMap function
5. Bind data to container div, call ClusterMap
```html
div#plot {
width: 100vw;
height: 100vh;
}
#plot div {
width: 100vw;
height: 100vh;
}
// Create and configure the ClusterMap function.
let chart = ClusterMap.ClusterMap().config({
cluster: {
spacing: 30,
alignLabels: true,
},
});
// Load in data via d3.json, select <div> elements and call the
// chart function on the selection.
d3.json("data.json").then((data) => {
d3.select("#plot").datum(data).call(chart);
});
```