unipept / unipept-visualizations Goto Github PK
View Code? Open in Web Editor NEWVisualisations used by Unipept, packaged for easy reuse in other projects.
License: MIT License
Visualisations used by Unipept, packaged for easy reuse in other projects.
License: MIT License
The npm package probably also contains the example files since npm lists its size as 34.8MB.
Add option to add style to the main svg or make the SVG tag set font-family: sans-serif
https://github.ugent.be/unipept/unipept/pull/623#issuecomment-77880
Original issue by @beardhatcode on Tue Jun 12 2018 at 17:20.
Closed by @bmesuere on Wed Jun 13 2018 at 14:34.
We currently use the MOLO reodering algorithm after clustering took place on the heatmap visualization. There are, however, a lot of other different reordering algorithms that exist. We should thus add an extra configuration option to the HeatmapSettings
object that can be used to choose which reordering algorithm should be used by the visualization itself.
Original issue by @silox on Wed Nov 26 2014 at 17:11.
Closed by @silox on Tue May 12 2015 at 21:48.
Original issue by @silox on Tue Oct 28 2014 at 15:00.
Closed by @silox on Tue May 12 2015 at 21:48.
Original issue by @bmesuere on Wed Apr 12 2017 at 11:59.
If there are a lot of matches in a sunburst, getComputedTextLength
gets called a lot. Each call forces a re-layout. But this is not necessary because the pie pieces are too small to even see the name.
I have taken a look at the code and i do not immediately see how to fix this. The function is used to precompute all textlengths at first draw.
A heuristic might help (First printing all of [a-zA-Z0-9 -]
) and computing only their lengths. To estimate the length of a new word we could just add the values form the map that correspond to the characters in the string.
Original issue by @beardhatcode on Wed Apr 11 2018 at 15:31.
If the source data has no id's the visualisation fails. This should be handled in the Node class.
Original issue by @bmesuere on Sat Jul 02 2016 at 14:20.
Add slice to indicate the percentage of taxons on a node
Original issue by @silox on Wed Nov 26 2014 at 17:11.
Closed by @bmesuere on Wed Oct 28 2015 at 14:54.
Original issue by @silox on Thu Nov 13 2014 at 20:32.
We apply a bit of css to style the tooltips, but the selectors might not be strict enough. For example, the font of the hyperlinks on observable changes after calling the treeview.
The clustering algorithm that's being used by the heatmap visualization needs to compute the distance between two different elements. We should add a configuration option to the HeatmapSettings
object that makes it possible to change the distance metric formula that's being used.
From Peter:
- automatically bundle "other" group (which can be expanded upon request)
- show at most x children and bundle remaining children in "other",
- only show children that have a certain abundance, and bundle remaining children in "other"
problems:
other
would reveal the real nodes and not show its children. This might be confusing�other
� node should stand out visually from normal nodesother
node might insert new children elsewhere. Sorting by size might fix this.Original issue by @bmesuere on Fri Aug 08 2014 at 18:43.
The previous version of the unipept-visualizations
package had some kind of reset functionality that is missing from the most recent version. The sunburst still has a reset
-function, but the treemap and treevisualization lack this functionality (which should be added again).
There is no option to trim node labels. This causes some overlap issues for long EC and GO names.
In the previous treeview I added the following piece of code to trim the nodes:
nodeEnter.append("text")
.attr("x", function (d) {
return isLeaf(d) ? -10 : 10;
})
.attr("dy", ".35em")
.attr("text-anchor", function (d) {
return isLeaf(d) ? "end" : "start";
})
.text(function (d) {
return d.name.length > 33 && (d._children || d.children) ? d.name.substring(0,30).trim()+"..."
: d.name;
})
.style("font", "10px sans-serif")
.style("fill-opacity", 1e-6);
Original issue by calmalak on Mon Jun 27 2016 at 17:34.
Closed by @bmesuere on Mon Jun 27 2016 at 17:57.
I have created the json from pept2lca using the API and would like to visualize it. is there any help available to aggregate and create hierarchy from the json output obtained to the one required for treemap view visualization on D3?
regards
It would be a very nice addition for our tool to provide support for a new visualization that can be used for visualising the diversity in a sample.
A good example of this visualization can be found in the CAMPI manuscript:
This visualisation shows per sample (or thus per bar) the distribution of how many peptides are annotated with a specific taxon. I propose to expand this Unipept visualization library with the capability of visualising very generic data that supports this. The input could be an object in the following format:
{
bars: [
{
name: "sample",
items: [],
counts: []
}
]
}
When creating a visualisation, an id is assigned to the given element. If the element already had an id, this is overwritten.
Do we still need an id? If so, don't overwrite it if it already has one.
Original issue by @bmesuere on Wed Apr 12 2017 at 11:59.
There's no legend available for the heatmap visualization. It would be nice if we could add the option to enable such a legend.
The heatmap visualization performs some kind of clustering on the input data before plotting the data. This algorithm is currently the UPGMA-algorithm, but can actually easily be changed to something else (that adheres to our interface specification). The clustering algorithm that should be used by the visualization should be configurable through the HeatmapSettings
object.
Original issue by @bmesuere on Wed Apr 12 2017 at 11:59.
A custom ColorPalette can be set as one of the options to the Sunburst visualization. However, changing this setting does not seem to have effect
Original issue by @silox on Tue Oct 21 2014 at 15:01.
Closed by @silox on Tue May 12 2015 at 21:48.
The positioning of the visualisation tooltip in fullscreen is incorrect.
Now a new tooltip is generated for each treeview, as lot of useless elements are created.
Also, an the generated tooltips do not require an ID, if they are created they can just be referenced to trough a variable
Original issue by @beardhatcode on Sat Jul 07 2018 at 12:31.
Users can set a custom colorprovider function in the settings of the TreeView object. The settings describe that this function is called for every node in the tree passed to the TreeView. This is, however, not the case. It is only called for the direct children of the root node.
Bij het initialiseren van de treemap en treeview ontstaat er een error als ik eerst de treeview dan treemap initialiseer. Dit gebeurd alleen bij de taxa data.
En als ik ze wel in de goede volgorde initialiseer is er een probleem met het vergroten van de treemap waardoor de overlap van de verschillende layers niet goed loopt.
Original issue by calmalak on Wed Oct 05 2016 at 17:03.
If no specific values are passed to the width
and height
properties of the heatmap, and the dendrogramEnabled
property is set to true
, the heatmap crashes.
We should implement a new GitHub action that automatically creates a new release of the visualization package on the GitHub release page (and NPM) whenever a new push to master occurs (and the version number of the package is increased). This way, we can easily track all the different releases that exist for this package and which changes were introduced with each new release of the package.
Heatmap code @ https://github.com/unipept/unipept-heatmap.
The following subtasks need to be completed:
There are currently two different option settings for determining the color of a node: nodeFillColor
and colorProvider
. The colorProvider
should be renamed to nodeFillColor
and nodeFillColor
should be removed in order to avoid confusing our users.
Note that we should also update the documentation and Observable notebook accordingly.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.