| <!DOCTYPE> | |
| <html> | |
| <head> | |
| <script src="http://chmille4.github.com/Scribl/js/Scribl.1.0.min.js"></script> | |
| <script src="http://chmille4.github.com/Scribl/js/genbankData.js"></script> | |
| <link rel="stylesheet" id="themeCSS" href="http://chmille4.github.com/Scribl/css/iThing.css"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> | |
| <script src="http://static.tumblr.com/fcdode8/Giymeu17u/jquery.mousewheel.min.js"></script> | |
| <script src="http://static.tumblr.com/fcdode8/WVbmeu18t/jqallrangesliders-min.js"></script> |
| This example expects to have d3.min.js and d3.layout.min.js in the same directory as pie.js and pie_serv.js. | |
| Run with node pie_serv.js |
States will adjust in size relative to the width of the container div, which allows SVG elements to be appropriately sized regardless of device size or screen resolution, making it a good way to integrate D3 and Bootstrap.
Click "Open in a new window", change the size of your browser window, and the states will scale with it. *Will not work in the standard bl.ocks.org view
Please let me know if there is a better/native way to do this!
A treemap recursively subdivides area into rectangles; the area of any node in the tree corresponds to its value. This example uses color to encode different packages of the Flare visualization toolkit. Treemap design invented by Ben Shneiderman. Squarified algorithm by Bruls, Huizing and van Wijk. Data courtesy Jeff Heer.