README.dygraph.txt
1 dygraphs JavaScript charting library 2 Copyright (c) 2006-, Dan Vanderkam. 3 4 Support: http://groups.google.com/group/dygraphs-users 5 Source: http://github.com/danvk/dygraphs 6 Issues: http://code.google.com/p/dygraphs/ 7 8 9 The dygraphs JavaScript library produces produces interactive, zoomable charts of time series. 10 11 Features 12 - Plots time series without using an external server or Flash 13 - Supports multiple data series 14 - Supports error bands around data series 15 - Displays values on mouseover 16 - Interactive zoom 17 - Adjustable averaging period 18 - Customizable click-through actions 19 - Compatible with the Google Visualization API 20 21 Demo 22 For a gallery and documentation, see http://danvk.org/dygraphs/ 23 24 Minimal Example 25 <html> 26 <head> 27 <script type="text/javascript" src="dygraph-combined.js"></script> 28 </head> 29 <body> 30 <div id="graphdiv"></div> 31 <script type="text/javascript"> 32 g = new Dygraph( 33 document.getElementById("graphdiv"), // containing div 34 "Date,Temperature\n" + // the data series 35 "2008-05-07,75\n" + 36 "2008-05-08,70\n" + 37 "2008-05-09,80\n" 38 ); 39 </script> 40 </body> 41 </html> 42 43 License(s) 44 dygraphs uses: 45 - rgbcolor.js (Public Domain) 46 - strftime.js (BSD License) 47 - excanvas.js (Apache License) 48 - YUI compressor (BSD License) 49 50 rgbcolor: http://www.phpied.com/rgb-color-parser-in-javascript/ 51 strftime: http://tech.bluesmoon.info/2008/04/strftime-in-javascript.html 52 excanvas: http://code.google.com/p/explorercanvas/ 53 yui compressor: http://developer.yahoo.com/yui/compressor/ 54 55 dygraphs is available under the MIT license, included in LICENSE.txt. 56
README.webtreemap.txt
1 # webtreemap 2 3 A simple treemap implementation using web technologies (DOM nodes, CSS 4 styling and transitions) rather than a big canvas/svg/plugin. 5 6 Play with a [demo][]. 7 8 [demo]: http://martine.github.com/webtreemap/demo/demo.html 9 10 ## Creating your own 11 12 1. Create a page with a DOM node (i.e. a `<div>`) that will contain 13 your treemap. 14 2. Add the treemap to the node via something like 15 16 appendTreemap(document.getElementById('mynode'), mydata); 17 3. Style the treemap using CSS. 18 19 ### Input format 20 21 The input data (`mydata` in the overview snippet) is a tree of nodes, 22 likely imported via a separate JSON file. Each node (including the 23 root) should contain data in the following format. 24 25 { 26 name: (HTML that is displayed via .innerHTML on the caption), 27 data: { 28 "$area": (a number, in arbitrary units) 29 }, 30 children: (list of child tree nodes) 31 } 32 33 (This strange format for data comes from the the [JavaScript InfoVis 34 Toolkit][thejit]. I might change it in the future.) 35 36 The `$area` of a node should be the sum of the `$area` of all of its 37 `children`. 38 39 (At runtime, tree nodes will dynamically will gain two extra 40 attributes, `parent` and `dom`; this is only worth pointing out so 41 that you don't accidentally conflict with them.) 42 43 ### CSS styling 44 45 The treemap is constructed with one `div` per region with a separate 46 `div` for the caption. Each div is styleable via the 47 `webtreemap-node` CSS class. The captions are stylable as 48 `webtreemap-caption`. 49 50 Each level of the tree also gets a per-level CSS class, 51 `webtreemap-level0` through `webtreemap-level4`. These can be 52 adjusted to e.g. made different levels different colors. To control 53 the caption on a per-level basis, use a CSS selector like 54 `.webtreemap-level2 > .webtreemap-caption`. 55 56 Your best bet is to modify the included `webtreemap.css`, which 57 contains comments about required and optional CSS attributes. 58 59 ## Related projects 60 61 * [JavaScript InfoVis Toolkit][thejit] 62 63 [thejit]: http://thejit.org/
