{"id":13481136,"url":"https://github.com/spiermar/d3-flame-graph","last_synced_at":"2025-05-14T02:07:12.949Z","repository":{"id":37412476,"uuid":"43579892","full_name":"spiermar/d3-flame-graph","owner":"spiermar","description":"A D3.js plugin that produces flame graphs from hierarchical data.","archived":false,"fork":false,"pushed_at":"2024-06-06T16:22:36.000Z","size":3894,"stargazers_count":908,"open_issues_count":49,"forks_count":121,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-04-14T22:04:14.626Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/spiermar.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-10-02T22:49:28.000Z","updated_at":"2025-04-10T19:11:23.000Z","dependencies_parsed_at":"2024-06-18T12:31:45.160Z","dependency_job_id":"2fc433db-2f3e-4ac4-ab83-54e7ffca4c8e","html_url":"https://github.com/spiermar/d3-flame-graph","commit_stats":{"total_commits":361,"total_committers":29,"mean_commits":"12.448275862068966","dds":"0.30747922437673125","last_synced_commit":"ba6b2d0f226720e717073f67f58ebeffc051d32c"},"previous_names":[],"tags_count":59,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spiermar%2Fd3-flame-graph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spiermar%2Fd3-flame-graph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spiermar%2Fd3-flame-graph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spiermar%2Fd3-flame-graph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spiermar","download_url":"https://codeload.github.com/spiermar/d3-flame-graph/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254052784,"owners_count":22006716,"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-07-31T17:00:49.037Z","updated_at":"2025-05-14T02:07:07.937Z","avatar_url":"https://github.com/spiermar.png","language":"JavaScript","readme":"# d3-flame-graph\n\nA D3.js plugin that produces flame graphs from hierarchical data.\n\n[![Flame Graph Example](https://media.giphy.com/media/l41JMjBaxrZw1bqpi/giphy.gif)](http://spiermar.github.io/d3-flame-graph/)\n\nIf you don't know what flame graphs are, check [Brendan Gregg's post](http://www.brendangregg.com/flamegraphs.html).\n\n\u003e Flame graphs are a visualization of profiled software, allowing the most frequent code-paths to be identified quickly and accurately. They can be generated using my open source programs on [github.com/brendangregg/FlameGraph](http://github.com/brendangregg/FlameGraph), which create interactive SVGs.\n\u003e\n\u003e \u003ccite\u003eBrendan Gregg\u003c/cite\u003e\n\n## Examples\n\nClick [here](http://spiermar.github.io/d3-flame-graph/) to check the demo, and [source](https://github.com/spiermar/d3-flame-graph/blob/gh-pages/index.html).\n\nClick [here](http://spiermar.github.io/d3-flame-graph/live.html) to check the animated assembly demo, and [source](https://github.com/spiermar/d3-flame-graph/blob/gh-pages/live.html)\n\nClick [here](http://bl.ocks.org/spiermar/4509343495f8d6e214cb) to check the simplified demo on bl.ocks.org.\n\n## Getting Started\n\n### jsdelivr CDN\n\nJust reference the CDN hosted CSS and JS files!\n\n```html\n\u003chead\u003e\n  \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.jsdelivr.net/npm/d3-flame-graph@4.1.3/dist/d3-flamegraph.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"chart\"\u003e\u003c/div\u003e\n  \u003cscript type=\"text/javascript\" src=\"https://d3js.org/d3.v7.js\"\u003e\u003c/script\u003e\n  \u003cscript type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/npm/d3-flame-graph@4.1.3/dist/d3-flamegraph.min.js\"\u003e\u003c/script\u003e\n  \u003cscript type=\"text/javascript\"\u003e\n  var chart = flamegraph()\n    .width(960);\n\n  d3.json(\"data.json\")\n    .then(data =\u003e {\n      d3.select(\"#chart\")\n        .datum(data)\n        .call(chart);\n    }).catch(error =\u003e {\n      return console.warn(error);\n    });\n  \u003c/script\u003e\n\u003c/body\u003e\n```\n\n### NPM\n\nMake sure [Node]() and [npm]() installed on your system.\n\nInstall the d3-flame-graph plugin.\n\n```\n$ npm install d3-flame-graph --save\n```\n\nAnd use it!\n\n```html\n\u003chead\u003e\n  \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"node_modules/d3-flame-graph/dist/d3-flamegraph.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"chart\"\u003e\u003c/div\u003e\n  \u003cscript type=\"text/javascript\" src=\"node_modules/d3/d3.js\"\u003e\u003c/script\u003e\n  \u003cscript type=\"text/javascript\" src=\"node_modules/d3-flame-graph/dist/d3-flamegraph.js\"\u003e\u003c/script\u003e\n  \u003cscript type=\"text/javascript\"\u003e\n  var chart = flamegraph()\n    .width(960);\n  \n  d3.json(\"data.json\")\n    .then((data) =\u003e {\n      d3.select(\"#chart\")\n        .datum(data)\n        .call(chart);\n    })\n    .catch(error =\u003e {\n      return console.warn(error);\n    });\n  \u003c/script\u003e\n\u003c/body\u003e\n```\n\nMore detailed examples in the [/examples](/examples) directory.\n\n## Input Format\n\nInput stack is a simple hierarchical data structure in JSON format.\n\n```js\n{\n  \"name\": \"\u003cname\u003e\",\n  \"value\": \u003cvalue\u003e,\n  \"children\": [\n    \u003cObject\u003e\n  ]\n}\n```\n\nThe [burn](https://github.com/spiermar/burn) CLI tool can convert multiple file formats to this hierarchical data structure.\n\n## Interacting with entries\n\nInternally, the data is transformed into a d3 **hierarchy**.\nFunctions like `onClick`, `label` and `zoom` expose individual entries as hierarchy Nodes, which wrap the provided data and add more properties:\n\n```\n{\n  \"data\": \u003coriginal user-provided object\u003e,\n  \"parent\": \u003canother hierarchy node\u003e,\n  \"children\": [\n    \u003chierarchy node\u003e\n  ],\n  \"x1\": \u003cdouble\u003e,  // x2 - x1 is the size of this node, as a fraction of the root.\n  \"x2\": \u003cdouble\u003e\n}\n```\n\nThis is a breaking change from previous versions of d3-flame-graph, which were based on version 3 of the d3 library. See [d3-hierarchy](https://github.com/d3/d3-hierarchy#hierarchy).\n\n## API Reference\n\n\u003ca name=\"flamegraph\" href=\"#flamegraph\"\u003e#\u003c/a\u003e flamegraph()\n\nCreate a new Flame Graph.\n\n\u003ca name=\"selfValue\" href=\"#selfValue\"\u003e#\u003c/a\u003e flamegraph.\u003cb\u003eselfValue\u003c/b\u003e(\u003ci\u003e[enabled]\u003c/i\u003e)\n\nDefines if the plugin should use the self value logic to calculate the node value for the Flame Graph frame size. If set to `true`, it will assume the node value from the input callgraph represents only the internal node value, or self value, not the sum of all children. If set to `false` it will assume the value includes the chidren values too. Defaults to `false` if not explicitely set, which if the same behavior 1.x had. \n\n\u003ca name=\"width\" href=\"#width\"\u003e#\u003c/a\u003e flamegraph.\u003cb\u003ewidth\u003c/b\u003e(\u003ci\u003e[size]\u003c/i\u003e)\n\nGraph width in px. Defaults to 960px if not set. If \u003ci\u003esize\u003c/i\u003e is specified, it will set the graph width, otherwise it will return the current graph width.\n\n\u003ca name=\"height\" href=\"#height\"\u003e#\u003c/a\u003e flamegraph.\u003cb\u003eheight\u003c/b\u003e(\u003ci\u003e[size]\u003c/i\u003e)\n\nGraph height in px. Defaults to the number of cell rows times \u003ca name=\"cellHeight\" href=\"#cellHeight\"\u003e\u003cb\u003ecellHeight\u003c/b\u003e\u003c/a\u003e if not set. If \u003ci\u003esize\u003c/i\u003e is specified, it will set the cell height, otherwise it will return the current graph height. If \u003ca name=\"minHeight\" href=\"#minHeight\"\u003e\u003cb\u003eminHeight\u003c/b\u003e\u003c/a\u003e is specified, and higher than the provided or calculated values, it will override height.\n\n\u003ca name=\"minHeight\" href=\"#minHeight\"\u003e#\u003c/a\u003e flamegraph.\u003cb\u003eminHeight\u003c/b\u003e(\u003ci\u003e[size]\u003c/i\u003e)\n\nMinumum graph height in px. If \u003ci\u003esize\u003c/i\u003e is specified, and higher than the provided or calculated \u003ci\u003eheight\u003c/i\u003e, it will override it.\n\n\u003ca name=\"cellHeight\" href=\"#cellHeight\"\u003e#\u003c/a\u003e flamegraph.\u003cb\u003ecellHeight\u003c/b\u003e(\u003ci\u003e[size]\u003c/i\u003e)\n\nCell height in px. Defaults to 18px if not set. If \u003ci\u003esize\u003c/i\u003e is specified, it will set the cell height, otherwise it will return the current cell height.\n\n\u003ca name=\"minFrameSize\" href=\"#minFrameSize\"\u003e#\u003c/a\u003e flamegraph.\u003cb\u003eminFrameSize\u003c/b\u003e(\u003ci\u003e[size]\u003c/i\u003e)\n\nMinimum size of a frame, in px, to be displayed in the flame graph. Defaults to 0px if not set. If \u003ci\u003esize\u003c/i\u003e is specified, it will set the minimum frame size, otherwise it will return the current minimum frame size.\n\n\u003ca name=\"title\" href=\"#title\"\u003e#\u003c/a\u003e flamegraph.\u003cb\u003etitle\u003c/b\u003e(\u003ci\u003e[title]\u003c/i\u003e)\n\nTitle displayed on top of graph. Defaults to empty if not set. If \u003ci\u003etitle\u003c/i\u003e is specified, it will set the title displayed on the graph, otherwise it will return the current title.\n\n\u003ca name=\"tooltip\" href=\"#tooltip\"\u003e#\u003c/a\u003e flamegraph.\u003cb\u003etooltip\u003c/b\u003e(\u003ci\u003e[function]\u003c/i\u003e)\n\nSets a tooltip for the flamegraph frames. The tooltip function should implement two methods, `.show(d)` and `.hide()`, that will be called when the tooltip should be made visible or hidden respectively. The `.show` method takes a single argument, which is the flamegraph frame. The \u003ci\u003ed3-flame-graph\u003c/i\u003e package includes a simple tooltip function, `flamegraph.tooltip.defaultFlamegraphTooltip()`.\n\n```html\n\u003cscript type=\"text/javascript\" src=\"d3-flamegraph-tooltip.js\"\u003e\u003c/script\u003e\n```\n\n```js\nvar tip = flamegraph.tooltip.defaultFlamegraphTooltip()\n    .text(d =\u003e \"name: \" + d.data.name + \", value: \" + d.data.value);\nflamegraph.tooltip(tip)\n```\n\n\u003ca name=\"transitionDuration\" href=\"#transitionDuration\"\u003e#\u003c/a\u003e flamegraph.\u003cb\u003etransitionDuration\u003c/b\u003e(\u003ci\u003e[duration]\u003c/i\u003e)\n\nSpecifies transition duration in milliseconds. The default duration is 750ms. If \u003ci\u003eduration\u003c/i\u003e is not specified, returns the current transition duration.\n\nSee [d3.duration](https://github.com/mbostock/d3/wiki/Transitions#duration).\n\n\u003ca name=\"transitionEase\" href=\"#transitionEase\"\u003e#\u003c/a\u003e flamegraph.\u003cb\u003etransitionEase\u003c/b\u003e(\u003ci\u003e[ease]\u003c/i\u003e)\n\nSpecifies the transition easing function. The default easing function is `d3.easeCubic`.\n\nSee [d3-ease](https://github.com/d3/d3-ease).\n\n\u003ca name=\"label\" href=\"#label\"\u003e#\u003c/a\u003e flamegraph.\u003cb\u003elabel\u003c/b\u003e(\u003ci\u003e[function]\u003c/i\u003e)\n\nAdds a function that returns a formatted label.\n\nExample:\n\n```js\nflamegraph.label(function(d) {\n    return \"name: \" + d.name + \", value: \" + d.value;\n});\n```\n\nOr a custom field `customNameField`:\n\n```js\nflamegraph.label(function(d) {\n    return \"name: \" + d.data.customNameField;\n});\n```\n\n\u003ca name=\"getName\" href=\"#getName\"\u003e#\u003c/a\u003e flamegraph.\u003cb\u003egetName\u003c/b\u003e(\u003ci\u003e[function]\u003c/i\u003e)\n\nAdds a function that returns the name of a node element. Example:\n\n```js\nflamegraph.label(function(d) {\n    return \"name: \" + d.name + \", value: \" + d.value;\n});\n```\n\nOr a custom field `customLabel`:\n\n```js\nflamegraph.getName(function(d) {\n    return \"name: \" + d.data.customLabel;\n});\n```\n\n\u003ca name=\"sort\" href=\"#sort\"\u003e#\u003c/a\u003e flamegraph.\u003cb\u003esort\u003c/b\u003e(\u003ci\u003e[enabled]\u003c/i\u003e)\n\nEnables/disables sorting of children frames. Defaults to \u003ci\u003etrue\u003c/i\u003e if not set to sort in ascending order by frame's name. If set to a function, the function takes two frames (a,b) and returns -1 if frame a is less than b, 1 if greater, or 0 if equal. If a value is specified, it will enable/disable sorting, otherwise it will return the current sort configuration.\n\n\u003ca name=\"inverted\" href=\"#inverted\"\u003e#\u003c/a\u003e flamegraph.\u003cb\u003einverted\u003c/b\u003e(\u003ci\u003e[bool]\u003c/i\u003e)\n\nInvert the flame graph direction. A top-down visualization of the flame graph, also known as _icicle_ plot. Defaults to \u003ci\u003efalse\u003c/i\u003e if not set. If a value is specified, it will enable/disable the inverted flame graphs direction, otherwise it will return the current `inverted` configuration.\n\n\u003ca name=\"computeDelta\" href=\"#computeDelta\"\u003e#\u003c/a\u003e flamegraph.\u003cb\u003ecomputeDelta\u003c/b\u003e(\u003ci\u003e[bool]\u003c/i\u003e)\n\nIf enabled, computes delta for all nodes. Delta value of each node is a sum of its own value from the \u003ci\u003egetDelta(node)\u003c/i\u003e function, plus its children. Defaults to \u003ci\u003efalse\u003c/i\u003e if not set. If a value is specified, it will enable/disable the delta computation, otherwise it will return the current `computeDelta` configuration.\n\n\u003ca name=\"resetZoom\" href=\"#resetZoom\"\u003e#\u003c/a\u003e flamegraph.\u003cb\u003eresetZoom\u003c/b\u003e()\n\nResets the zoom so that everything is visible.\n\n\u003ca name=\"onClick\" href=\"#onClick\"\u003e#\u003c/a\u003e flamegraph.\u003cb\u003eonClick\u003c/b\u003e(\u003ci\u003e[function]\u003c/i\u003e)\n\nAdds a function that will be called when the user clicks on a frame. Example:\n\n```js\nflamegraph.onClick(function (d) {\n    console.info(\"You clicked on frame \"+ d.data.name);\n});\n```\n\nIf called with no arguments, `onClick` will return the click handler. \n\n\u003ca name=\"onHover\" href=\"#onHover\"\u003e#\u003c/a\u003e flamegraph.\u003cb\u003eonHover\u003c/b\u003e(\u003ci\u003e[function]\u003c/i\u003e)\n\nAdds a function that will be called when the user hovers on a frame. Example:\n\n```js\nflamegraph.onHover(function (d) {\n    console.info(\"You hovered over frame \"+ d.data.name);\n});\n```\n\nIf called with no arguments, `onHover` will return the hover handler. \n\n\n\u003ca name=\"setDetailsElement\" href=\"#setDetailsElement\"\u003e#\u003c/a\u003e flamegraph.\u003cb\u003esetDetailsElement\u003c/b\u003e(\u003ci\u003e[element]\u003c/i\u003e)\n\nSets the element that should be updated with the focused sample details text. Example:\n\n```html\n\u003cdiv id=\"details\"\u003e\n\u003c/div\u003e\n```\n\n```js\nflamegraph.setDetailsElement(document.getElementById(\"details\"));\n```\n\nIf called with no arguments, `setDetailsElement` will return the current details element.\n\n\u003ca name=\"setDetailsHandler\" href=\"#setDetailsHandler\"\u003e#\u003c/a\u003e flamegraph.\u003cb\u003esetDetailsHandler\u003c/b\u003e(\u003ci\u003e[function]\u003c/i\u003e)\n\nSets the handler function that is called when the `details` element needs to be updated. The function receives a single paramenter, the details text to be set. Example:\n\n```js\nlet detailsHandler = function (d) {\n    if (detailsElement) {\n        if (d) {\n            detailsElement.textContent = d\n        } else {\n            if (typeof searchDetails === 'function') {\n                searchDetails()\n            } else {\n                detailsElement.textContent = ''\n            }\n        }\n    }\n}\n```\n\n```js\nflamegraph.setDetailsHandler(\n  function (d) {\n    if (detailsElement) {\n        if (d) {\n            detailsElement.textContent = d\n        } else {\n            detailsElement.textContent = ''\n        }\n    }\n  }\n);\n```\n\nIf not set, `setDetailsHandler` will default to the above function.\n\nIf called with no arguments, `setDetailsHandler` will reset the details handler function. \n\n\u003ca name=\"setSearchHandler\" href=\"#setSearchHandler\"\u003e#\u003c/a\u003e flamegraph.\u003cb\u003esetSearchHandler\u003c/b\u003e(\u003ci\u003e[function]\u003c/i\u003e)\n\nSets the handler function that is called when search results are returned. The function receives a three paramenters, the search results array, the search sample sum, and root value, Example:\n\n```js\nlet searchHandler = function (searchResults, searchSum, totalValue) {\n    searchDetails = () =\u003e {\n        if (detailsElement) {\n            detailsElement.textContent = 'search: ' + searchSum + ' of ' + totalValue + ' total samples ( ' + format('.3f')(100 * (searchSum / totalValue), 3) + '%)'\n        }\n    }\n    searchDetails()\n}\n```\n\n```js\nflamegraph.setSearchHandler(\n  (searchResults, searchSum, totalValue) =\u003e {\n    searchDetails = () =\u003e { // searchDetails is a global variable\n        if (detailsElement) {\n            detailsElement.textContent = 'search: ' + searchSum + ' of ' + totalValue + ' total samples ( ' + format('.3f')(100 * (searchSum / totalValue), 3) + '%)'\n        }\n    }\n    searchDetails()\n  }\n);\n```\n\nIf not set, `setSearchHandler` will default to the above function.\n\nIf called with no arguments, `setSearchHandler` will reset the search handler function.\n\n\u003ca name=\"setColorMapper\" href=\"#setColorMapper\"\u003e#\u003c/a\u003e flamegraph.\u003cb\u003esetColorMapper\u003c/b\u003e(\u003ci\u003e[function]\u003c/i\u003e)\n\nReplaces the built-in node color hash function. Function takes two arguments, the node data structure and the original color string for that node. It must return a color string. Example:\n\n```js\n// Purple if highlighted, otherwise the original color\nflamegraph.setColorMapper(function(d, originalColor) {\n    return d.highlight ? \"#E600E6\" : originalColor;\n});\n```\n\nIf called with no arguments, `setColorMapper` will reset the color hash function.\n\n\u003ca name=\"setColorHue\" href=\"#setColorHue\"\u003e#\u003c/a\u003e flamegraph.\u003cb\u003esetColorHue\u003c/b\u003e(\u003ci\u003e[string]\u003c/i\u003e)\n\nSets the flame graph color hue. Options are `warm`, `cold`, `blue`, `red`, `orange`, `yellow`, `green`, `pastelgreen` and `aqua`.\n\nIf called with no arguments, `setColorHue` will reset the color hash function.\n\n\u003ca name=\"setSearchMatch\" href=\"#setSearchMatch\"\u003e#\u003c/a\u003e flamegraph.\u003cb\u003esetSearchMatch\u003c/b\u003e(\u003ci\u003e[function]\u003c/i\u003e)\n\nReplaces the built-in node search match function. Function takes three arguments,\nthe node data structure, the search term and an optional boolean argument to ignore case during search. If the third argument is not provided, the search will be case-sensitive by default. The function must return a boolean. Example:\n\n```js\nflamegraph.setSearchMatch(function(d, term, true) {\n  // Non-regex implementation of the search function\n  return d.data.name.indexOf(term) != 0;\n})\n```\n\nIf called with no arguments, `setSearchMatch` will return reset the search\nmatch function.\n\n\u003ca name=\"merge\" href=\"#merge\"\u003e#\u003c/a\u003e flamegraph.\u003cb\u003emerge\u003c/b\u003e(\u003ci\u003edate\u003c/i\u003e)\n\nMerges the current data with the given data.\n\n\u003ca name=\"update\" href=\"#update\"\u003e#\u003c/a\u003e flamegraph.\u003cb\u003eupdate\u003c/b\u003e(\u003ci\u003e[data]\u003c/i\u003e)\n\nUpdates the current chart. If the `data` parameters is passed, replaces the current data.\n\n\u003ca name=\"destroy\" href=\"#destroy\"\u003e#\u003c/a\u003e flamegraph.\u003cb\u003edestroy\u003c/b\u003e()\n\nRemoves the flamegraph.\n\n**All API functions will return the flame graph object if no other behavior is specified in the function details.**\n\n## Issues\n\nFor bugs, questions and discussions please use the [GitHub Issues](https://github.com/spiermar/d3-flame-graph/issues).\n\n## Contributing\n\nWe love contributions! But in order to avoid total chaos, we have a few guidelines.\n\nIf you found a bug, have questions or feature requests, don't hesitate to open an [issue](https://github.com/spiermar/d3-flame-graph/issues).\n\nIf you're working on an issue, please comment on it so we can assign you to it.\n\nIf you have code to submit, follow the general pull request format. Fork the repo, make your changes, and submit a [pull request](https://github.com/spiermar/d3-flame-graph/pulls).\n\n### Build\n\nThis plugin uses Webpack as build system. It includes a development server with live refresh on any changes. To start it, just execute the `serve` npm script.\n\n```\n$ git clone https://github.com/spiermar/d3-flame-graph.git\n$ cd d3-flame-graph\n$ npm install\n$ npm run serve\n```\n\n### Template\n\nA standalone template with all JavaScript and CSS inlined gets built at `dist/templates/d3-flamegraph-base.html`.\nIt contains a placeholder `/** @flamegraph_params **/` which needs to be replaced with the stacks in the format described in [Input Format](#input-format).\n\n## License\n\nCopyright 2018 Martin Spier. All Rights Reserved.\n\nLicensed under the Apache License, Version 2.0 (the “License”); you may not use this file except in compliance with the License. You may obtain a copy of the License at\n\n[http://www.apache.org/licenses/LICENSE-2.0](http://www.apache.org/licenses/LICENSE-2.0)\n\nUnless required by applicable law or agreed to in writing, software distributed under the License is distributed on an “AS IS” BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.\n","funding_links":[],"categories":["JavaScript","Chart \u0026 Data Visualization","Charts","前端常见效果库"],"sub_categories":["JavaScript","图表类"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspiermar%2Fd3-flame-graph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspiermar%2Fd3-flame-graph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspiermar%2Fd3-flame-graph/lists"}