{"id":23065547,"url":"https://github.com/ksokolovic/d3-pivots","last_synced_at":"2026-05-10T16:04:14.115Z","repository":{"id":34923372,"uuid":"189199643","full_name":"ksokolovic/d3-pivots","owner":"ksokolovic","description":"D3 plugin allowing to create pivot bar chart from a flat data set.","archived":false,"fork":false,"pushed_at":"2022-09-29T17:00:05.000Z","size":298,"stargazers_count":1,"open_issues_count":8,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-23T04:32:01.259Z","etag":null,"topics":["barchart","d3","d3-barchart","d3-plugin","d3js","d3v4","plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ksokolovic.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}},"created_at":"2019-05-29T10:00:53.000Z","updated_at":"2024-09-27T09:08:03.000Z","dependencies_parsed_at":"2023-01-15T10:29:05.905Z","dependency_job_id":null,"html_url":"https://github.com/ksokolovic/d3-pivots","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ksokolovic%2Fd3-pivots","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ksokolovic%2Fd3-pivots/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ksokolovic%2Fd3-pivots/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ksokolovic%2Fd3-pivots/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ksokolovic","download_url":"https://codeload.github.com/ksokolovic/d3-pivots/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246905118,"owners_count":20852812,"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":["barchart","d3","d3-barchart","d3-plugin","d3js","d3v4","plugin"],"created_at":"2024-12-16T05:08:56.724Z","updated_at":"2026-05-10T16:04:14.015Z","avatar_url":"https://github.com/ksokolovic.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# d3-pivots\n\nD3 plugin allowing to create pivot bar chart from a flat data set.\n\nThe plugin aims to follow the convention for developing D3 plugins described in [Towards Reusable Charts](https://bost.ocks.org/mike/chart/) by Mike Bostock.\n\n![Example01](https://raw.githubusercontent.com/ksokolovic/d3-pivots/master/images/d3-pivot-example01.png)\n\n## Installing\n\nIf you are using NPM, you can install the plugin via:\n\n```sh\n$ npm install d3-pivots\n```\n\nOtherwise, download the [latest release](https://github.com/ksokolovic/d3-pivots/releases/latest) and include it in your page using the `script` tag.\n\n### Dependencies\n\nThe plugin depends on the [Underscore](https://underscorejs.org/) JavaScript library. Hence, it must also be included in the `script` tag of your page.\n\n```html\n\u003cscript src=\"../build/d3-pivots.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://d3js.org/d3.v4.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Don't forget to include underscore.js --\u003e\n\u003cscript src=\"assets/js/underscore-min.js\"\u003e\u003c/script\u003e\n```\n\n## Examples\n\nCheck out the `examples/example01.html` and the corresponding `data.js` to see the plugin in practice. \n\nBelow is listed the snippet that's used for initializing the pivot bar chart with the sample data set:\n\n```js\nlet pivot = {\n    columns: ['category', 'subcategory', 'year'],\n    rows: ['country', 'gender'],\n    value: 'value'\n};\n\nlet pivotBarChart = d3.pivotBarChart()\n    .data(data)\n    .width(1800)\n    .pivot(pivot)\n    .axis({xTicks: true, xLabels: true, yTicks: true, yLabels: true})\n    .grid({horizontal: true, vertical: true});\n\nd3.select('#chart')\n    .call(pivotBarChart);\n```\n\n## API Reference\n\n### d3.pivotBarChart()\n\nInitializes and returns a new pivot bar `chart` instance.\n\n### chart.width([width])\n\nSets or returns the width of the chart.\n\n### chart.height([height])\n\nSets or returns the height of the chart.\n\n### chart.margin([margin])\n\nSets or returns the margins of the chart.\n\n`margin` is an object that has the following format and default values: \n\n```js\n{top: 10, right: 25, bottom: 10, left: 25}\n```\n\n### chart.data([data])\n\nSets or returns the data to be rendered on the chart.\n\n### chart.pivot([pivot])\n\nSets or returns the pivot configuration. \n\nThis configuration object specifies the pivot structure of the original flat data set.\n\n`pivot` is an object that has the following format:\n\n```js\n{\n    columns: [],\n    rows: [],\n    value: ''\n}\n```\n\nThe following is included in the `pivot` configuration object:\n\n- `columns`: Array of fields to use as pivot columns. Field values will be sorted in natural sort order when rendering the chart.\n- `rows`: Array of fields to use as pivot rows. Field values will be sorted in natural sort order when rendering a chart.\n- `value`: Field that corresponds to the actual data point value. Defaults to `value` field.\n\nNOTE: Fields specified in the `pivot` object must match the actual fields from the original data set.\n\n### chart.colors([colors])\n\nSets or returns the color palette to use for rendering chart. \n\nThe palette has the form of an array of hex color values. By default, the chart is initialized with the palette of random colors.\n\n### chart.axis([axis])\n\nSets or returns the axis configuration.\n\nThis configuration object defines whether tick marks and labels on both x- and y-axis should be displayed. \n\n`axis` has the following format and default values: \n\n```js\n{\n    xTicks: true, \n    xLabels: true, \n    yTicks: true, \n    yLabels: true\n}\n```\n\n### chart.grid([grid])\n\nSets or returns the grid configuration.\n\nThis configuration object defines whether horizontal and/or vertical grid lines should be displayed. \n\n`grid` has the following format and default values:\n\n```js\n{\n    horizontal: true,\n    vertical: true\n}\n```\n\n## Authors\n\n Name                | E-mail address            | Skype ID\n:-------------------:|---------------------------|----------------\n Kemal Sokolović     | kemal.sokolovic@gmail.com | kemal.sokolovic\n Miloš Panasiuk      | milos.panasiuk@gmail.com  | milos.panasiuk\n\n## License\n\nThis project is licensed under the MIT license. See the [LICENSE](LICENSE) for details.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fksokolovic%2Fd3-pivots","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fksokolovic%2Fd3-pivots","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fksokolovic%2Fd3-pivots/lists"}