{"id":13727043,"url":"https://github.com/evmar/webtreemap","last_synced_at":"2025-05-16T18:10:34.764Z","repository":{"id":1226245,"uuid":"921548","full_name":"evmar/webtreemap","owner":"evmar","description":"web-based treemap","archived":false,"fork":false,"pushed_at":"2022-12-06T20:22:41.000Z","size":671,"stargazers_count":357,"open_issues_count":21,"forks_count":62,"subscribers_count":23,"default_branch":"master","last_synced_at":"2025-05-10T14:01:52.620Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://evmar.github.io/webtreemap/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/evmar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2010-09-18T22:27:50.000Z","updated_at":"2025-05-03T00:10:55.000Z","dependencies_parsed_at":"2023-01-13T11:02:10.059Z","dependency_job_id":null,"html_url":"https://github.com/evmar/webtreemap","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evmar%2Fwebtreemap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evmar%2Fwebtreemap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evmar%2Fwebtreemap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evmar%2Fwebtreemap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/evmar","download_url":"https://codeload.github.com/evmar/webtreemap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254582907,"owners_count":22095518,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T01:03:37.081Z","updated_at":"2025-05-16T18:10:34.746Z","avatar_url":"https://github.com/evmar.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","JavaScript"],"sub_categories":[],"readme":"# webtreemap\n\n\u003e **New 2017-Oct-16**: master is now webtreemap v2, a complete rewrite with\n\u003e bug fixes, more features, and a different (simpler) API. If you're looking\n\u003e for the old webtreemap, see the [v1] branch.\n\n[v1]: https://github.com/evmar/webtreemap/tree/v1\n\nA simple treemap implementation using web technologies (DOM nodes, CSS styling\nand transitions) rather than a big canvas/svg/plugin. It's usable as a library\nas part of a larger web app, but it also includes a command-line app that dumps\na self-contained HTML file that displays a map.\n\nPlay with a [demo].\n\n[demo]: http://evmar.github.io/webtreemap/\n\n## Usage\n\n### Web\n\nThe data format is a tree of `Node`, where each node is an object in the shape\ndescribed at the top of [tree.ts].\n\n[tree.ts]: https://github.com/evmar/webtreemap/blob/master/src/tree.ts\n\n```html\n\u003cscript src='webtreemap.js'\u003e\u003c/script\u003e\n\u003cscript\u003e\n// Container must have its own width/height.\nconst container = document.getElementById('myContainer');\n// See typings for full API definition.\nwebtreemap.render(container, data, options);\n```\n\n#### Options\n| Option | Type | Default |\n| ------------- |:-------------:| -----:|\n| padding | [number, number, number, number] | [14, 3, 3, 3] | \n| lowerBound | number |  0.1 | \n| applyMutations | (node: Node) =\u003e void | () =\u003e void | \n| caption | (node: Node) =\u003e string | (node) =\u003e node.id || '') | \n| showNode | (node: Node, width: number, height: number) =\u003e boolean | (_, width, height) =\u003e (width \u003e 20) \u0026\u0026 (height \u003e= options.padding[0]) | \n| showChildren | (node: Node, width: number, height: number) =\u003e boolean  |  (_, width, height) =\u003e (width \u003e 40) \u0026\u0026 (height \u003e 40) | \n\n\n| Option | Description |\n| ------------- |:-------------:|\n| padding | In order: padding-top, padding-right, padding-bottom, padding-left of each node\n| lowerBound | Lower bound of ratio that determines how many children can be displayed inside of a node. Example with a lower bound of 0.1: the total area taken up by displaying child nodes of any given node cannot be less than 10% of the area of its parent node. \n| applyMutations | A function that exposes a node as an argument after it's dom element has been assigned. Use this to add inline styles and classes. Example: (node) =\u003e { node.dom.style.color = 'blue' }\n| caption | A function that takes a node as an argument and returns a string that is used to display as the caption for the node passed in.\n| showNode | A function that takes a node, its width, and its height, and returns a boolean that determines if that node should be displayed. Fires after showChildren.\n| showChildren | A function that takes a node, its width, and its height, and returns a boolean that determines if that node's children should be displayed. Fires before showNode.\n\n\n### Command line\n\nInstall with\n\n```sh\n$ npm i webtreemap\n```\n\nThen run with:\n\n```sh\n$ webtreemap -o output_file \u003c my_data\n```\n\nInput data format is space-separated lines of \"size path\", where size\nis a number and path is a '/'-delimited path. For example:\n\n```sh\n$ cat my_data\n100 all\n50 all/thing1\n25 all/thing2\n```\n\nThis is exactly the output produced by `du`, so this works:\n\n```sh\n$ du -ab some_path | webtreemap -o out.html\n```\n\nBut note that there's nothing file-system-specific about the data format -- it\njust uses slash as a nesting delimiter.\n\n## Development\n\nThe modules of webtreemap can be used both from the web and from the command\nline, so the build has two layers. The command line app embeds the output\nof the build into its output so it's a bit confusing.\n\nTo build everything, run `yarn run build`.\n\n### Build layout\n\nTo hack on webtreemap, the pieces of the build are:\n\n1.  `yarn run tsc` builds all the `.ts` files;\n2.  `yarn run webpack` builds the UMD web version from JS of the above.\n\nBecause command line embeds the web version in its output, you need to\nrun step 2 before running the output of step 1. Also note we\nintentionally don't use webpack's ts-loader because we want the\nTypeScript output for the command-line app.\n\n### Command line app\n\nUse `yarn run tsc -w` to keep the npm-compatible JS up to date, then run e.g.:\n\n```sh\n$ du -ab node_modules/ | node build/src/cli.js --title 'node_modules usage' -o demo.html\n```\n\n## License\n\nwebtreemap is licensed under the Apache License v2.0. See `LICENSE.txt` for the\ncomplete license text.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevmar%2Fwebtreemap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fevmar%2Fwebtreemap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevmar%2Fwebtreemap/lists"}