{"id":20047781,"url":"https://github.com/interactivethings/d3-grid","last_synced_at":"2025-05-05T10:31:23.742Z","repository":{"id":8717079,"uuid":"10386978","full_name":"interactivethings/d3-grid","owner":"interactivethings","description":"D3 grid layout","archived":false,"fork":false,"pushed_at":"2017-07-13T10:39:34.000Z","size":160,"stargazers_count":77,"open_issues_count":8,"forks_count":10,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-04-16T12:21:06.042Z","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":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/interactivethings.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":"2013-05-30T16:21:17.000Z","updated_at":"2023-02-04T15:51:16.000Z","dependencies_parsed_at":"2022-08-31T00:02:11.679Z","dependency_job_id":null,"html_url":"https://github.com/interactivethings/d3-grid","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/interactivethings%2Fd3-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/interactivethings%2Fd3-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/interactivethings%2Fd3-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/interactivethings%2Fd3-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/interactivethings","download_url":"https://codeload.github.com/interactivethings/d3-grid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252480448,"owners_count":21754776,"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-11-13T11:38:10.860Z","updated_at":"2025-05-05T10:31:23.473Z","avatar_url":"https://github.com/interactivethings.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# d3.layout.grid\n\nA grid layout for [D3](http://d3js.org). The grid layout takes a one-dimensional array of data and arranges it on a two-dimensional grid.\n\n## API\n\n\u003ca name=\"layout-grid\" href=\"#layout-grid\"\u003e#\u003c/a\u003e d3.layout.\u003cb\u003egrid\u003c/b\u003e()\n\nConstructs a new grid layout.\n\n\u003ca name=\"grid\" href=\"#grid\"\u003e#\u003c/a\u003e \u003cb\u003egrid\u003c/b\u003e(\u003ci\u003enodes\u003c/i\u003e)\n\nComputes the layout for \u003ci\u003enodes\u003c/i\u003e. Per default, the layout tries to keep the column and row number as equal as possible and uses point spacing. Two attributes are set on each node:\n\n* x – the computed \u003ci\u003ex\u003c/i\u003e-coordinate of the node position.\n* y – the computed \u003ci\u003ey\u003c/i\u003e-coordinate of the node position.\n\n\u003ca name=\"points\" href=\"#points\"\u003e#\u003c/a\u003e grid.\u003cb\u003epoints\u003c/b\u003e()\n\nConfigure the grid to treat nodes as points, cf. [d3.scale.ordinal().rangePoints()](https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-ordinal_rangePoints).\n\n\u003ca name=\"bands\" href=\"#bands\"\u003e#\u003c/a\u003e grid.\u003cb\u003ebands\u003c/b\u003e()\n\nConfigure the grid to treat nodes as bands, cf. [d3.scale.ordinal().rangeBands()](https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-ordinal_rangeBands)\n\n\u003ca name=\"padding\" href=\"#padding\"\u003e#\u003c/a\u003e grid.\u003cb\u003epadding\u003c/b\u003e([\u003ci\u003epadding\u003c/i\u003e])\n\nSpecify the \u003ci\u003epadding\u003c/i\u003e between the node bands as [\u003ci\u003ex\u003c/i\u003e, \u003ci\u003ey\u003c/i\u003e]. \u003ci\u003ex\u003c/i\u003e and \u003ci\u003ey\u003c/i\u003e are relative to the band width/height, similar to the \u003ci\u003epadding\u003c/i\u003e parameter of [d3.scale.ordinal().rangeBands()](https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-ordinal_rangeBands).\n\nIf [nodeSize](#nodeSize) is set, \u003ci\u003epadding\u003c/i\u003e is absolute. For example, to configure a grid layout for nodes with 100×100px size, and 20px horizontal and vertical padding, use:\n\n```javascript\nvar grid = d3.layout.grid()\n  .nodeSize([100, 100])\n  .padding([20, 20]);\n```\n\n\u003ca name=\"cols\" href=\"#cols\"\u003e#\u003c/a\u003e grid.\u003cb\u003ecols\u003c/b\u003e([\u003ci\u003enum\u003c/i\u003e])\n\nFixes the layout to \u003ci\u003enum\u003c/i\u003e columns or returns the number of columns (if it was set before).\n\n\u003ca name=\"rows\" href=\"#rows\"\u003e#\u003c/a\u003e grid.\u003cb\u003erows\u003c/b\u003e([\u003ci\u003enum\u003c/i\u003e])\n\nFixes the layout to \u003ci\u003enum\u003c/i\u003e rows or returns the number of rows (if it was set before).\n\n\u003ca name=\"size\" href=\"#size\"\u003e#\u003c/a\u003e grid.\u003cb\u003esize\u003c/b\u003e([\u003ci\u003esize\u003c/i\u003e])\n\nIf \u003ci\u003esize\u003c/i\u003e is specified, sets the overall size of the layout as [\u003ci\u003ex\u003c/i\u003e, \u003ci\u003ey\u003c/i\u003e]. \n\nIf \u003ci\u003esize\u003c/i\u003e is set, returns the current \u003ci\u003esize\u003c/i\u003e. Default size is 1×1.\n\nIf instead [nodeSize](#nodeSize) is set, returns the actual size of the layout \u003ci\u003eafter\u003c/i\u003e [grid](#grid) has been called.\n\n\u003ca name=\"nodeSize\" href=\"#nodeSize\"\u003e#\u003c/a\u003e grid.\u003cb\u003enodeSize\u003c/b\u003e([\u003ci\u003enodeSize\u003c/i\u003e])\n\nIf \u003ci\u003enodeSize\u003c/i\u003e is specified, sets the size of an individual node as [\u003ci\u003ex\u003c/i\u003e, \u003ci\u003ey\u003c/i\u003e].\n\nIf \u003ci\u003enodeSize\u003c/i\u003e is set, returns the current \u003ci\u003enodeSize\u003c/i\u003e.\n\nIf instead [size](#size) is set, returns the actual size of a node \u003ci\u003eafter\u003c/i\u003e [grid](#grid) has been called.\n\n\n## Examples\n\n* [Grid layout demo](http://bl.ocks.org/herrstucki/5684816)\n\n## Author\n\nJeremy Stucki, [Interactive Things](http://interactivethings.com)\n\n## License\n\nBSD, see LICENSE.txt\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finteractivethings%2Fd3-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finteractivethings%2Fd3-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finteractivethings%2Fd3-grid/lists"}