evancarey / jstreemap Goto Github PK
View Code? Open in Web Editor NEWjQuery treemap implementation
Home Page: http://www.jstreemap.com
jQuery treemap implementation
Home Page: http://www.jstreemap.com
Utilizing the jQuery widget factory and HTML5 canvas this Javascript treemap widget presents hierarchical data using the squarified treemap layout algorithm described in http://www.win.tue.nl/~vanwijk/stm.pdf, Squarified Treemaps, by Mark Bruls, Kees Huizing and Jarke J. van Wijk. Development and testing has primarily been limited to current versions of Chrome, Safari and FF.
v0.4.0 In windows 7 and FF 14.0.1 leaf nodes are not rendered in example tm in index.html. Geometry is created and can be seen via the highlighter as mouse moves across canvas. FF console shows no errors.
When mousing out of map, node and group highlight boxes appear in wrong position and scaling.
Chrome v 22.0.1229.94
jsTreemap v 0.4.0
Evan,
As I'm looking at the code, I'm noticing that there isn't a lot of functionality right now being provided by jQuery. If you don't deliver this as a jQuery widget, it might make it easier to break up the code into separate files (to be combined and minified as part of a build using something like Anvil - https://github.com/arobson/anvil.js) and implement support for AMD and CommonJS (see https://github.com/rniemeyer/knockout-kendo/blob/master/src/knockout-kendo.js as an example that supports AMD and CommonJS and uses Anvil).
Thoughts?
Addition of the animated size by transitions has broken the treemap events treemapmousemove and treemapclick. Believe its something to do with how events are bound/unbound to the treemap widget's canvas element.
If user mouses over index.html's example treemap during a size by transition animation the ghosted node's future location gets highlighted. Treemap events should be temp disabled during transition animation.
When i try to squarify 100 equally weighted Nodes, they are rendered quite good! I like it more than googles version https://developers.google.com/chart/interactive/docs/gallery/treemap or various other libraries i have testetd so far ...
But ...
The very last one in the bottom/right corner gets calculated so, that in most cases it will seem a totally different value.
Quickly fixed it in function _refreshCanvas using method in accepted answer of
https://stackoverflow.com/questions/15661339/how-do-i-fix-blurry-text-in-my-html5-canvas
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.