I'm using jQuery isotope from there: http://isotope.metafizzy.co/
There is a way to sort with multiple types?
For example: moving all green and blue boxes to the top of the container?
Thanks
You can sort for multiple types, see this sample fiddle. The documentation for sorting is here. All you need is to make green or blue a data-category on each div. Or, you could use a class also. See it here how to use the data-category for sorting. It's that simple. And another one is well explained here. Now, you need just a bit of programming to adapt it for your case. But, again, it's all in the original's sorting documentation.
Related
ahoy all,
i have a simple example that mixes float-span and grid-span mixins within the same grid context (i.e. the same number of columns in the same row)
http://sassbin.com/gist/7812502/
as you can see, i have 3 items that i want to space out evenly in a row. i use float-span with first and last options on items 1 and 3 to make them sit at the beginning and end of the row respectively, and this works as expected. for the middle item, which i want centered, i assumed i could use grid-span with the correct location to have the 2nd item in the middle. however, what is happening is that the counting of location for grid-span is started after the column taken up by the first floated item. is this expected behavior? in other words, is it allowable to mix float-span and grid-span in the same grid context/row? and if not, what is the preferred way in Singularity for accomplishing the same thing?
i have been searching the documentation wiki, in particular the section on spanning the grid, but have found no statements either way. and the demos do not seem to be using float-span and grid-span together.
thanks as usual for Singularity and for any help.
peace
PS. i have already tried using the isolation-span mixin in place of grid-span with the same results.
It is not advisable to mix output styles like float and isolation in the same grid. You should pick either isolation or floats and stick with it.
Here is your sassbin tweaked a bit: http://sassbin.com/gist/7815953/
I am new to D3js and working with the parsets reusable chart (http://www.jasondavies.com/parallel-sets/). I want to make changes to this chart such as adding sort based on thickness of ribbons on mouseover, and overlaying two parallel sets over each other to compare different datasets at once (The one at the back being faded).
Being new to D3js, I am having difficulty in understanding where to start. I am currently trying to understand the code of d3.parsets.js but its not going too well. If anyone has worked with this before and understands the procedure being followed in the code, please help me out.
The best adaptation I've seen of d3.parsets.js is by Hongjian Yang: Airline Vis adapted from d3.parsets.
It may be able to accomplish some of what you're looking for, though I'm not sure you'll readily be able to overlay two datasets (nor am I sure I understand the need to do so).
Is there a masonry type algorithm for d3.js? (a la isotope http://isotope.metafizzy.co/)
As a related question (if that's not available), how would I go about doing it? Specifically: I know the enter/update/exit paradigm of d3, but it seems like it treats all the points independently of each other. If I wanted to change the layout of the 2nd point, based on where I put the 1st point, how would I do that?
The matrix layout might be what you are looking for, you can see an example here: http://bl.ocks.org/mbostock/1009139
edit: just found a second example providing similar layout: http://bl.ocks.org/herrstucki/5684816
Here is a masonry layout for d3:
https://github.com/shawnbot/masonic
The demo:
http://shawnbot.github.io/masonic
I would like to display on a webpage a heatmap (matrix) that I generate in R.
The matrix I have looks like this, but in my case the size is 300x300.
Basically I am looking for an interactive clustering, which would look like this :
http://online.wsj.com/article/SB125993225142676615.html#articleTabs%3Dinteractive
http://mbostock.github.com/protovis/ex/matrix.html
I would like to be able to clic on a branch which would then highlight the selected group/text, and fade out the rest of the matrix.
I have had a look around and cannot find much. I don't even know what language I should use for this ? JSON, Flash, HTML5, javascript, google charts ?
Any comments and advices would be extremely appreciated here.
Thanks.
I think that InCHlib - Interactive Cluster Heatmap library could be the solution.
Available from http://openscreen.cz/software/inchlib.
Google Visualization provides this heatmap option:
http://informatics.systemsbiology.net/visualizations/heatmap/bioheatmap.html
There's also this project that adapted it for more advanced uses and actually includes mouse-overs and tool-tips, as well as line magnification:
http://code.google.com/p/visquick/
You may also want to take a look at jQuery Flot, but be warned that WSJ uses a super expensive company called Tableau for data visualization and you are unlikely to find that level of visualization eye candy in an open source or free to use package.
Unfortunately, I had the same requirement. To create a Clustergram (Heatmap + Dendrogram) for a hierarchical clustering results.
There is no direct solution for this. I used ProtovisGWT (Choosel) to create dendrogram and heatmap seperatley and later combnied them.
If you just want js library you can use just protovis or d3.js to achieve this.
I would recommend using JavaScript for this task. Save your heatmap as SVG in R
svg("mymap.svg")
heatmap(...)
dev.off()
And then embed it into an HTML document as object
<object id="test-svg" width="800" height="600"
type="image/svg+xml" data="test.svg"></object>
Now, you can use JavaScript or ECMAScript to do all kinds of manipulations. I recommend to read one of the various online tutorials on this topic. E.g., you could get started with this one: http://www.petercollingridge.co.uk/data-visualisation/using-javascript-control-svg
Treemap of D3.js solves this beautifully. See here
http://mbostock.github.io/d3/talk/20111018/treemap.html
You could try http://amp.pharm.mssm.edu/clustergrammer/ . It is not written in R, but you can make an interactive clustergram by uploading a matrix file in tab-separated format and you will be returned an interactive (reorderable, searchable, filterable, etc) and shareable web-based visualization
D3heatmap provides interactive heatmaps with dendrograms in R based on the heatmap and heatmap.2 interfaces. It includes single row and column selection but does not currently allow selection of dendrogram branches.
We are building essentially a product/image sorter in pure CSS and js. The sorter will reorder products into different groups based on filtering and selecting. It needs to be ultra fast and smooth when moving/shifting products etc
Here is an example in flash of what I am talking about (click the links in the middle of the page to see animation):
http://dermalogica.com/us/products.html#/products/product-use
But I am looking for examples using Pure CSS3 transformation and/or JS that are as fast during animating and sorting as the example above.
Here is one example that I found using pure CSS that is sort of similar:
http://files.myopera.com/FataL/pres/pres.xml?1280852782
Know of any others?
Not sure if this http://www.spritely.net/ has what you're asking, but you could give it a shot!