{"id":22108420,"url":"https://github.com/chrka/d3-chessboard-count","last_synced_at":"2026-04-30T00:35:26.263Z","repository":{"id":47902661,"uuid":"241124119","full_name":"chrka/d3-chessboard-count","owner":"chrka","description":"Plot per-square frequencies on a chessboard","archived":false,"fork":false,"pushed_at":"2022-07-20T01:38:01.000Z","size":95,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-23T16:36:04.752Z","etag":null,"topics":["chess","d3","data-visualization"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/chrka.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":"2020-02-17T14:13:05.000Z","updated_at":"2020-11-20T10:05:47.000Z","dependencies_parsed_at":"2022-08-31T21:14:20.414Z","dependency_job_id":null,"html_url":"https://github.com/chrka/d3-chessboard-count","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrka%2Fd3-chessboard-count","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrka%2Fd3-chessboard-count/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrka%2Fd3-chessboard-count/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrka%2Fd3-chessboard-count/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chrka","download_url":"https://codeload.github.com/chrka/d3-chessboard-count/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245206458,"owners_count":20577578,"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":["chess","d3","data-visualization"],"created_at":"2024-12-01T09:14:50.145Z","updated_at":"2026-04-30T00:35:21.226Z","avatar_url":"https://github.com/chrka.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# d3-chessboard-count\n\nPlot per-square frequencies on a chessboard.  The frequencies are represented by circles —\nthe higher the frequency, the larger the circle, scaled such that the circle representing\nthe highest overall frequency takes up the full space of its square minus padding.\n\n\u003cimg src=\"https://github.com/chrka/d3-chessboard-count/raw/master/img/board.png\" alt=\"example board image\" width=\"296px\" height=\"296px\"\u003e\u003c/img\u003e\n\nFor an example of the plug-in in action, see this [notebook](https://observablehq.com/@chrka/2016-crazyhouse-championship-drop-and-capture-statistics).\n\nChanges to the data are animated, and the board can be customized, including:\n\n* the size of the squares,\n* the number of files and ranks, as well as their names and styles,\n* the colors of the squares and circles,\n* the orientation of the board (including mirroring across one or both axes).\n\n[TypeScript](http://typescriptlang.org) types are included.\n\n\n## Installation\n\nIf you use NPM, `npm install d3-chessboard-count`. Otherwise, download the \n[latest release](https://github.com/chrka/d3-chessboard-count/releases/latest). \n\nYou can also load directly from directly [unpkg.com](https://unpkg.com) as a \n[standalone library](https://unpkg.com/d3-chessboard-count/dist/d3-chessboard-count.min.js), or\nfrom [jsdelivr.com](https://www.jsdelivr.com) \n[here](https://cdn.jsdelivr.net/npm/d3-chessboard-count/dist/d3-chessboard-count.min.js).\n\nAMD, CommonJS, and vanilla environments are supported. In vanilla, a `d3` global is exported:\n\n```html\n\u003cscript src=\"https://unpkg.com/d3-chessboard-count/dist/d3-chessboard-count.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    const plot = d3.chessboardSquarePlot();\n\u003c/script\u003e\n```\n\n\n## Basic Usage\n\nFirst you need to have your data as a list of elements, each describing the count for some square\n(described by its file and its rank, both ranging from 0 to the number of files/ranks minus one).\nBy default, it is assumed that each element is an object with properties `file`, `rank`, and `count`,\nbut custom accessors can be specified. \n\nThen, create a `div` to contain the plot and a new `chessboardSquarePlot` object.  \nAfter configuring the plot object, select the `div`, set your data, and apply the plot object to it:\n\n```html\n\u003cdiv id=\"plot\"\u003e\u003c/div\u003e\n\u003cscript\u003e\n    const plot = d3.chessboardSquarePlot()\n                   .margin({top: 16, right: 16, bottom: 16, left: 16})\n                   .lightSquareFill('red')\n                   .darkSquareFill('black');\n    \n    d3.select('#plot')\n      .datum(data)\n      .call(plot);\n\u003c/script\u003e\n```\n\n\n## API Reference\n\n* [Creating Plots](#creating-plots)\n* [Accessors](#accessors)\n* [Geometry](#geometry)\n* [Files and Ranks](#files-and-ranks)\n* [Fill Colors](#fill-colors)\n\nUnless specified otherwise, units are SVG user units.\n\n\n### Creating Plots\n\u003ca name=\"chessboardSquarePlot\" href=\"#chessboardSquarePlot\"\u003e#\u003c/a\u003e d3.\u003cb\u003echessboardSquarePlot\u003c/b\u003e() [\u003c\u003e](https://github.com/chrka/d3-chessboard-count/blob/master/src/index.ts#L113 \"Source\")\n\nConstructs a new plot with top/right/bottom/left margins of 24, square size of 32,\npadding of 4, no mirroring, 8 files and ranks ('a'–'h', '1'–'8'), `white` light squares,\n`gainsboro` dark squares, `nero` fill for the circles, which takes files, ranks, and counts from\n`file`, `rank`, `count` properties of the data, respectively.\n\n\n### Accessors\n\n\u003ca name=\"plot_file\" href=\"#plot_file\"\u003e#\u003c/a\u003e \u003ci\u003eplot\u003c/i\u003e.\u003cb\u003efile\u003c/b\u003e([\u003ci\u003efile\u003c/i\u003e])\n\nIf _file_ is specified, sets the file accessor to the specified function and returns this plot generator.\nIf _file_ is not specified, returns the current file accessor which defaults to a function returning \nthe `file` property if available, or 0 otherwise. \n\n\u003ca name=\"plot_rank\" href=\"#plot_rank\"\u003e#\u003c/a\u003e \u003ci\u003eplot\u003c/i\u003e.\u003cb\u003erank\u003c/b\u003e([\u003ci\u003erank\u003c/i\u003e])\n\nIf _rank_ is specified, sets the file accessor to the specified function and returns this plot generator.\nIf _rank_ is not specified, returns the current rank accessor which defaults to a function returning \nthe `file` property if available, or 0 otherwise. \n\n\u003ca name=\"plot_rank\" href=\"#plot_rank\"\u003e#\u003c/a\u003e \u003ci\u003eplot\u003c/i\u003e.\u003cb\u003ecount\u003c/b\u003e([\u003ci\u003ecount\u003c/i\u003e])\n\nIf _count_ is specified, sets the count accessor to the specified function and returns this plot generator.\nIf _count_ is not specified, returns the current count accessor which defaults to a function returning \nthe `count` property if available, or 0 otherwise. \n\n\n### Geometry\n\n\u003ca name=\"plot_margins\" href=\"#plot_margins\"\u003e#\u003c/a\u003e \u003ci\u003eplot\u003c/i\u003e.\u003cb\u003emargins\u003c/b\u003e([\u003ci\u003emargins\u003c/i\u003e])\n\nIf _margins_ is specified, sets the margins to the specified object.\nIf _margins_ is not specified, returns the current margins which defaults to `{top: 24, left: 24, bottom: 24, right: 24}`.\n\nThe margins define the empty space around the chessboard.\n\n\u003ca name=\"plot_squareSize\" href=\"#plot_squareSize\"\u003e#\u003c/a\u003e \u003ci\u003eplot\u003c/i\u003e.\u003cb\u003esquareSize\u003c/b\u003e([\u003ci\u003esquareSize\u003c/i\u003e])\n\nIf _squareSize_ is specified, sets the square size to the specified number.\nIf _squareSize_ is not specified, returns the current square size which defaults to 32.\n\n\u003ca name=\"plot_padding\" href=\"#plot_padding\"\u003e#\u003c/a\u003e \u003ci\u003eplot\u003c/i\u003e.\u003cb\u003epadding\u003c/b\u003e([\u003ci\u003epadding\u003c/i\u003e])\n\nIf _padding_ is specified, sets the padding to the specified number.\nIf _padding_ is not specified, returns the current padding which defaults to 4.\n\nThe padding defines the smallest amount of empty space between the edges of a square and the\ncircle with the maximum radius in the plot.\n\n\n### Files and Ranks\n\n\u003ca name=\"plot_files\" href=\"#plot_files\"\u003e#\u003c/a\u003e \u003ci\u003eplot\u003c/i\u003e.\u003cb\u003efiles\u003c/b\u003e([\u003ci\u003efiles\u003c/i\u003e])\n\nIf _files_ is specified, sets the files to the specified list of strings.\nIf _files_ is not specified, returns the current files which defaults to `['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']`.\n\n\u003ca name=\"plot_ranks\" href=\"#plot_ranks\"\u003e#\u003c/a\u003e \u003ci\u003eplot\u003c/i\u003e.\u003cb\u003eranks\u003c/b\u003e([\u003ci\u003eranks\u003c/i\u003e])\n\nIf _ranks_ is specified, sets the ranks to the specified list of strings.\nIf _ranks_ is not specified, returns the current ranks which defaults to `['1', '2', '3', '4', '5', '6', '7', '8']`.\n\n\u003ca name=\"plot_fileStyle\" href=\"#plot_fileStyle\"\u003e#\u003c/a\u003e \u003ci\u003eplot\u003c/i\u003e.\u003cb\u003efileStyle\u003c/b\u003e([\u003ci\u003efileStyle\u003c/i\u003e])\n\nIf _fileStyle_ is specified, sets the file label style to the specified CSS style.\nIf _fileStyle_ is not specified, returns the current file label style which is empty by default.\n\n\u003ca name=\"plot_rankStyle\" href=\"#plot_rankStyle\"\u003e#\u003c/a\u003e \u003ci\u003eplot\u003c/i\u003e.\u003cb\u003erankStyle\u003c/b\u003e([\u003ci\u003erankStyle\u003c/i\u003e])\n\nIf _rankStyle_ is specified, sets the rank label style to the specified CSS style.\nIf _rankStyle_ is not specified, returns the current rank label style which is empty by default.\n\n\u003ca name=\"plot_fileNotationPadding\" href=\"#plot_fileNotationPadding\"\u003e#\u003c/a\u003e \u003ci\u003eplot\u003c/i\u003e.\u003cb\u003efileNotationPadding\u003c/b\u003e([\u003ci\u003efileNotationPadding\u003c/i\u003e])\n\nIf _fileNotationPadding_ is specified, sets the inner distance between file labels and the board to the specified number.\nIf _fileNotationPadding_ is not specified, returns the current distance which defaults to 6.\n\n\u003ca name=\"plot_rankNotationPadding\" href=\"#plot_rankNotationPadding\"\u003e#\u003c/a\u003e \u003ci\u003eplot\u003c/i\u003e.\u003cb\u003erankNotationPadding\u003c/b\u003e([\u003ci\u003erankNotationPadding\u003c/i\u003e])\n\nIf _rankNotationPadding_ is specified, sets the inner distance between rank labels and the board to the specified number.\nIf _rankNotationPadding_ is not specified, returns the current distance which defaults to 6.\n\n\u003ca name=\"plot_mirrorFiles\" href=\"#plot_mirrorFiles\"\u003e#\u003c/a\u003e \u003ci\u003eplot\u003c/i\u003e.\u003cb\u003emirrorFiles\u003c/b\u003e([\u003ci\u003emirrorFiles\u003c/i\u003e])\n\nIf _mirrorFiles_ is specified, mirror the board along the files if true.\nIf _mirrorFiles_ is not specified, returns the current state of the mirroring.\n\n\u003ca name=\"plot_mirrorRanks\" href=\"#plot_mirrorRanks\"\u003e#\u003c/a\u003e \u003ci\u003eplot\u003c/i\u003e.\u003cb\u003emirrorRanks\u003c/b\u003e([\u003ci\u003emirrorRanks\u003c/i\u003e])\n\nIf _mirrorRanks_ is specified, mirror the board along the ranks if true.\nIf _mirrorRanks_ is not specified, returns the current state of the mirroring.\nTo rotate the board, mirror along both files and ranks.\n\n\n### Fill Colors\n\n\u003ca name=\"plot_lightSquareFill\" href=\"#plot_lightSquareFill\"\u003e#\u003c/a\u003e \u003ci\u003eplot\u003c/i\u003e.\u003cb\u003elightSquareFill\u003c/b\u003e([\u003ci\u003elightSquareFill\u003c/i\u003e])\n\nIf _lightSquareFill_ is specified, sets the light square fill color to the specified CSS color string.\nIf _lightSquareFill_ is not specified, returns the current light square fill color which defaults to `white`.\n\n\u003ca name=\"plot_darkSquareFill\" href=\"#plot_darkSquareFill\"\u003e#\u003c/a\u003e \u003ci\u003eplot\u003c/i\u003e.\u003cb\u003edarkSquareFill\u003c/b\u003e([\u003ci\u003edarkSquareFill\u003c/i\u003e])\n\nIf _darkSquareFill_ is specified, sets the dark square fill color to the specified CSS color string.\nIf _darkSquareFill_ is not specified, returns the current dark square fill color which defaults to `gainsboro`.\n\n\n\u003ca name=\"plot_circleFill\" href=\"#plot_circleFill\"\u003e#\u003c/a\u003e \u003ci\u003eplot\u003c/i\u003e.\u003cb\u003ecircleFill\u003c/b\u003e([\u003ci\u003ecircleFill\u003c/i\u003e])\n\nIf _circleFill_ is specified, sets the circle fill color to the specified CSS color string.\nIf _circleFill_ is not specified, returns the current circle fill color which defaults to `nero`.\n\n\n## Contributing\n\nComments, suggestions, and pull requests are welcome.\n \n\n## Acknowledgments\n\nThe structure of the plugin is based on [Mike Bostock](https://bost.ocks.org/mike/)'s \narticle _[Towards Reusable Charts](https://bost.ocks.org/mike/chart/)_, and the packaging\non _[Let's Make a (D3) Plugin](https://bost.ocks.org/mike/d3-plugin/)_ with some\nupdates taken from other D3 plugins, and additional support for TypeScript.\n\n\n## License (MIT)\n\nCopyright (c) 2020 Christoffer Karlsson\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrka%2Fd3-chessboard-count","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchrka%2Fd3-chessboard-count","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrka%2Fd3-chessboard-count/lists"}