{"id":13554663,"url":"https://github.com/dy/plot-grid","last_synced_at":"2025-09-12T20:32:19.186Z","repository":{"id":57325989,"uuid":"58883460","full_name":"dy/plot-grid","owner":"dy","description":"2D/webgl grid for plots","archived":false,"fork":false,"pushed_at":"2023-04-19T15:05:56.000Z","size":513,"stargazers_count":43,"open_issues_count":9,"forks_count":9,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-08-25T23:14:38.240Z","etag":null,"topics":["canvas2d","grid","plot","webgl"],"latest_commit_sha":null,"homepage":"https://dy.github.io/plot-grid","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dy.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2016-05-15T20:43:29.000Z","updated_at":"2025-08-11T14:04:58.000Z","dependencies_parsed_at":"2024-06-21T07:12:00.071Z","dependency_job_id":"f7f2ad72-8e84-4418-afd8-b194afb56315","html_url":"https://github.com/dy/plot-grid","commit_stats":null,"previous_names":["dfcreative/plot-grid"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dy/plot-grid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Fplot-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Fplot-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Fplot-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Fplot-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dy","download_url":"https://codeload.github.com/dy/plot-grid/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Fplot-grid/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274873290,"owners_count":25365823,"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","status":"online","status_checked_at":"2025-09-12T02:00:09.324Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["canvas2d","grid","plot","webgl"],"created_at":"2024-08-01T12:02:52.520Z","updated_at":"2025-09-12T20:32:18.914Z","avatar_url":"https://github.com/dy.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","others"],"sub_categories":[],"readme":"# plot-grid [![unstable](http://badges.github.io/stability-badges/dist/unstable.svg)](http://github.com/badges/stability-badges) ![gzip-size](https://img.shields.io/badge/size-18.4kb-brightgreen.svg)\n\nGrid component for webgl/canvas2d with zooming, panning, polar mode etc. See [demo](https://dy.github.io/plot-grid).\n\n\n## Usage\n\n[![npm install plot-grid](https://nodei.co/npm/plot-grid.png?mini=true)](https://npmjs.org/package/plot-grid/)\n\n```js\nconst createGrid = require('plot-grid');\n\n//cartesian grid\nlet grid = createGrid({\n\tx: {\n\t\ttype: 'logarithmic',\n\t\tmin: 0\n\t},\n\ty: {\n\t\tmin: -100,\n\t\tmax: 0\n\t}\n});\n```\n\nThis will create frequency response and directional diagram.\n\u003c!--[see in action](http://requirebin.com/?gist=e6371d3310dff351c027edf0bf2a9492).--\u003e\n\n## API\n\n### `let grid = new Grid(options?)`\n\nCreate new grid instance. It can serve both as a class or constructor function (no `new`). By default it displays cartesian grid, but\n\n| Name | Default | Description |\n|---|---|---|\n| `container` | `document.body` | Container to place grid into. Can be `null` to render in memory. |\n| `context` | `null` | Can be pre-existing context. |\n| `pixelRatio` | `window.devicePixelRatio` | Pixel ratio of canvas. |\n| `autostart` | `true` | Render every frame automatically or call `render` method manually. Useful if _plot-grid_ is used in cooperation with other components. |\n| `interactions` | `true` | Enable pan/zoom interactions, see `interact` event. |\n| `x`, `y`, `r`, `a` | _Bool_, _String_, _Object_ | Boolean, enabling coordinates of `linear` type or a string, defining custom type: `linear`, `logarithmic` or `time`. If object is passed, it defines custom lines behaviour, see the table below. |\n\nEach of _x_, _y_, _r_, _a_ can be customized by the following options:\n\n| Name | Type | Default | Description |\n|---|---|---|---|\n| `type` | _String_, `null` | `null` | Default type to extend, one of `linear`, `logarithmic`, `time`. |\n| `color` | _String_ | `rgba(0,0,0,1)` | Default color for the lines, axes, ticks and labels. |\n| `format` | _Function_ | `null` | Formatter for label values. Takes a value and returns a string. [pretty-number](https://npmjs.org/package/pretty-number) can be used as such. |\n| `lines` | _Bool_, _Array_, _Function_, `null` |  | Array with values, defining lines, or function returning such array, `state =\u003e [values...]`. Can be disabled by passing `false`. By default implemented by `type`. |\n| `ticks` | _Bool_, _Array_, _Number_, _Function_ | `5` | Tick size. Can be disabled by passing `false`. |\n| `labels` | _Bool_, _Array_, _Object_ , _Function_, `null` | `null` | Object or array with labels corresponding to lines. Can be defined as a function returning such array `(state) =\u003e labels`. `null` value will output values as is. Can be disabled by passing `false`. |\n| `axis` | _Bool_ | `true` | Enable axis. |\n\n#### Pan \u0026 zoom\n\nAdditional pan/zoom params can be set for each coordinate `x`, `y`, `r`, `a`:\n\n| Name | Type | Default | Description |\n|---|---|---|---|\n| `offset` | _Number_ | `0` | Defines start point for the visible range, in terms of values. |\n| `origin` | _Number_ | `0.5` | Defines position of the offset on the screen, for example, `.5` for center, `1` for right/top edge of the screen, `0` for left/bottom. |\n| `scale` | _Number_ | `1` | Sets scale for the current range, number of values per pixel. |\n| `min`, `max` | _Number_ | `-Infinity`, `Infinity` | Limits for panning. |\n| `minScale`, `maxScale` | _Number_ | `0`, `Infinity` | Scale limits. |\n| `zoom` | _Bool_ | `true` | Enables zoom interaction. |\n| `pan` | _Bool_ | `true` | Enables pan interaction. |\n\nTo change pan or zoom, use `update` method with the propertives above, as `update({x: {offset, scale}, y: {offset, scale});`.\n\nAnother time it might be useful to engage `grid.on('interact', grid =\u003e {})` handler for grid interactions, like moving and zooming.\n\n#### Style\n\nEach coordinate can be customized more with additional options:\n\n| Name | Type | Default | Description |\n|---|---|---|---|\n| `lineColor` | _String_, _Number_, _Function_, `null` | `.3` | Color for lines. Number value will take the base color above with changed opacity. Function signature is `state =\u003e [...values]`. |\n| `lineWidth` | _Number_ | `1` | Width of lines. We guess that width of sublines should not differ from the width of lines, if you have use-case requiring the opposite, please address [issues](/issues). |\n| `axisOrigin` | _Number_ | `0` | Define axis alignment by value on the opposite coordinate. |\n| `axisColor` | _String_, _Number_ | `0.1` | Axis color, redefines default `color`. |\n| `axisWidth` | _Number_ | `2` | Width of axis line. |\n| `align` | _Number_ | `0.5` | The side to align ticks and labels, `0..1`. |\n| `fontSize` | _String_, _Number_ | `10pt` | Font size for labels. Sizes with units will be automatically transformed to pixels by [to-px](https://npmjs.org/package/to-px). |\n| `fontFamily` | _String_ | `sans-serif` | Font family to use for labels. |\n| `padding` WIP | _Number_, _Array(4)_ | `0` | Padding inside the viewport to indent lines from axes and labels. Ordering is _top_, _right_, _bottom_, _left_, as in css. |\n| `style` WIP | _String_ | `lines` | Style of rendering: `lines` or `dots`. Note that `dots` is available only when `x` and `y` are both enabled. |\n| `distance` | _Number_ | `120` | Minimum distance between lines. |\n\n### `grid.update(options)`\n\nPass new options to update grid look. Note that passed options extend existing ones.\n\n```js\ngrid.update({\n\tx: {\n\t\ttype: 'logarithmic',\n\t\toffset: 0,\n\t\tmin: 0,\n\t\tscale: .01\n\t}\n});\n```\nNote that you may need to call render in manual mode `grid.update().render()`.\n\n### `grid.render()`\n\nRedraw grid. Call whenever you need to redraw grid, like resize etc. It will not recalculate lines, just rerender existing lines. To recalculate lines, use `grid.update()`.\n\n### `grid.draw()`\n\nDirectly invoke draw method, useful in case if grid needs to be drawn over other content.\n\n\n## Used by\n\n* [gl-spectrum](https://github.com/audio-lab/gl-spectrum)\n* [gl-spectrogram](https://github.com/audio-lab/gl-spectrogram)\n* [gl-waveform](https://github.com/audio-lab/gl-waveform)\n\n## Thanks\n\nTo [@evanw](https://github.com/evanw) with [thetamath](http://thetamath.com/app/y=x%5E(3)-x) for grid API inspiration.\n\n## Related\n\n* [grid](https://github.com/bit101/grid) — collection of grids for canvas2d.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdy%2Fplot-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdy%2Fplot-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdy%2Fplot-grid/lists"}