{"id":13481112,"url":"https://github.com/akngs/d3-boxplot","last_synced_at":"2025-09-03T21:31:15.142Z","repository":{"id":34207768,"uuid":"171574366","full_name":"akngs/d3-boxplot","owner":"akngs","description":"d3js box plot plugin","archived":false,"fork":false,"pushed_at":"2023-03-10T23:56:54.000Z","size":597,"stargazers_count":22,"open_issues_count":8,"forks_count":2,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-10-30T14:43:30.353Z","etag":null,"topics":["boxplot","d3js","javascript","statistics","svg","visualization"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/akngs.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2019-02-20T00:48:53.000Z","updated_at":"2024-09-03T04:05:12.000Z","dependencies_parsed_at":"2024-10-30T14:34:47.299Z","dependency_job_id":"dd1ca8a4-514d-44ad-8266-82af3698a3e6","html_url":"https://github.com/akngs/d3-boxplot","commit_stats":{"total_commits":91,"total_committers":2,"mean_commits":45.5,"dds":0.05494505494505497,"last_synced_commit":"98c9ab5c81c88716472ac2ea631093390258055e"},"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akngs%2Fd3-boxplot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akngs%2Fd3-boxplot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akngs%2Fd3-boxplot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akngs%2Fd3-boxplot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/akngs","download_url":"https://codeload.github.com/akngs/d3-boxplot/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231918512,"owners_count":18445748,"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":["boxplot","d3js","javascript","statistics","svg","visualization"],"created_at":"2024-07-31T17:00:48.785Z","updated_at":"2024-12-30T22:15:45.038Z","avatar_url":"https://github.com/akngs.png","language":"JavaScript","funding_links":[],"categories":["Charts"],"sub_categories":[],"readme":"# d3-boxplot\n\nd3js plugin for box-and-whisker plot.\n\n![d3-boxplot](img/d3-boxplot.png)\n\n## Installing\n\nIf you use NPM, `npm install d3-boxplot`. Otherwise, download the\n[latest release](https://github.com/akngs/d3-boxplot/releases/latest).\n\n## Usage\n\nHere's a minimal code snippet:\n\n```javascript\nlet data = [1, 2, 3, 4, 5]\nlet stats = d3.boxplotStats(data)\nlet x = d3.scaleLinear()\n  .domain(d3.extent(data))\n  .range([0, 300])\nlet plot = d3.boxplot().scale(x)\nd3.select('svg').datum(stats).call(plot)\n```\n\nVisit [this page](https://beta.observablehq.com/@akngs/d3-boxplot) to see more examples.\n\n## API Reference\n\n\u003ca href=\"#boxplot\" name=\"boxplot\"\u003e#\u003c/a\u003e d3.\u003cb\u003eboxplot\u003c/b\u003e()\n\nConstructs a new box plot generator with the default settings.\n\n\u003ca href=\"#boxplotStats\" name=\"boxplotStats\"\u003e#\u003c/a\u003e d3.\u003cb\u003eboxplotStats\u003c/b\u003e(data, [*accessor*])\n\nCalculates descriptive statistics such as five-number summeries, IQR, and inner/outer fences of\ngiven **sorted** array `data`. If the type of elements in `data` is not a number, you should\nprovide an *accessor* function as the second argument and the array should be sorted according to\nthe *accessor*.\n\nIf you have multiple batches of data, you may use `Array.map()` to turn them into box plot\nstatistics:\n\n```javascript\nlet batches = [\n  [1,2,3,4,5],\n  [6,7,8,9,10]\n]\nlet stats = batches.map(function(b) {return d3.boxplotStats(b)})\n```\n\nNow you can draw small-multiples of box plots using conventional d3 code:\n\n```javascript\nd3.select('svg').selectAll('g.plot').data(stats)\n  .join('g')\n  .attr('transform', function(d, i) {return 'translate(...)'})\n  .call(d3.boxplot())\n```\n\nBox plot statistics are also useful to render additional annotations on top of a box plot, like\nthis:\n\n![Annotated box plot](img/d3-boxplot-annotated.png)\n\nVisit [Box plot explained](https://beta.observablehq.com/@akngs/box-plot-explained) to see the code.\n\n\u003ca href=\"#boxplot_vertical\" name=\"boxplot_vertical\"\u003e#\u003c/a\u003e boxplot.\u003cb\u003evertical\u003c/b\u003e([*vertical*])\n\nSets or returns *vertical* mode. The default value is `false` which means a horizontal mode.\n\n\u003ca href=\"#boxplot_scale\" name=\"boxplot_scale\"\u003e#\u003c/a\u003e boxplot.\u003cb\u003escale\u003c/b\u003e([*scale*])\n\nSets or returns *scale*. The default value is `d3.scaleLinear()` instance with domain `[0, 1]`, and\nrange `[0, 1]`.\n\n\u003ca href=\"#boxplot_bandwidth\" name=\"boxplot_bandwidth\"\u003e#\u003c/a\u003e boxplot.\u003cb\u003ebandwidth\u003c/b\u003e([*bandwidth*])\n\nSets or returns *bandwidth*. Bandwidth is a pixel value specifying a thickness of the plot. The\ndefault value is `20`.\n\n\u003ca href=\"#boxplot_boxwidth\" name=\"boxplot_boxwidth\"\u003e#\u003c/a\u003e boxplot.\u003cb\u003eboxwidth\u003c/b\u003e([*boxwidth*])\n\nSets or returns *boxwidth*. Boxwidth is a pixel value specifying a thickness of the IQR box. The\ndefault value is `20`. By setting this value to 3 and hide inner dots by call\n`showInnerDots(false)`, you can render minimalistic box plots mimic Edward Tufte's style:\n\n![Minimalistic box plot](img/d3-boxplot-minimalStyle.png)\n\n\u003ca href=\"#boxplot_showInnerDots\" name=\"boxplot_showInnerDots\"\u003e#\u003c/a\u003e boxplot.\u003cb\u003eshowInnerDots\u003c/b\u003e([*flag*])\n\nSets or returns *showInnerDots flag*. Set it `true` to show all data dots, or `false` to show\nonly outliers (and far-outs). The default value is `true`.\n\n\u003ca href=\"#boxplot_symbol\" name=\"boxplot_symbol\"\u003e#\u003c/a\u003e boxplot.\u003cb\u003esymbol\u003c/b\u003e([*symbol*])\n\nSets or returns *symbol*. The default value is `boxplotSymbolDot`. The following list shows possible\noptions:\n\n* `boxplotSymbolDot`\n* `boxplotSymbolTick`\n\n`boxplotSymbolTick` renders thin lines instead of small circles:\n\n![Ticks](img/d3-boxplot-ticks.png)\n\n\u003ca href=\"#boxplot_opacity\" name=\"boxplot_opacity\"\u003e#\u003c/a\u003e boxplot.\u003cb\u003eopacity\u003c/b\u003e([*opacity*])\n\nSets of returns *opacity*. The default value is `0.8`. Partial transparency helps you to reveal\ndots under the box.\n\n\u003ca href=\"#boxplot_jitter\" name=\"boxplot_jitter\"\u003e#\u003c/a\u003e boxplot.\u003cb\u003ejitter\u003c/b\u003e([*jitter*])\n\nSets or returns *jitter*ing value. Actual value used is *bandwidth * jitter*. Set the value `0.0`\nto disable jittering. The default value is `0.5`. Please note that the jittering only works with\n`symbol(boxplotSymbolTick)`.\n\n\u003ca href=\"#boxplot_key\" name=\"boxplot_key\"\u003e#\u003c/a\u003e boxplot.\u003cb\u003ekey\u003c/b\u003e([*key*])\n\nSets or returns *key* function for [object constancy](https://bost.ocks.org/mike/constancy/). The\ndefault value is `undefined`.\n\n## Development\n\nTo bump version run the followings after commit all changes:\n\n    npm version vx.y.z\n    npm publish\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakngs%2Fd3-boxplot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakngs%2Fd3-boxplot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakngs%2Fd3-boxplot/lists"}