{"id":23666647,"url":"https://github.com/redsift/d3-rs-squares","last_synced_at":"2025-09-01T19:32:28.260Z","repository":{"id":65599425,"uuid":"59840402","full_name":"redsift/d3-rs-squares","owner":"redsift","description":null,"archived":false,"fork":false,"pushed_at":"2017-03-07T12:12:28.000Z","size":99,"stargazers_count":2,"open_issues_count":1,"forks_count":3,"subscribers_count":19,"default_branch":"master","last_synced_at":"2024-04-09T15:18:42.719Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/redsift.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":"2016-05-27T14:29:22.000Z","updated_at":"2017-07-14T20:31:46.000Z","dependencies_parsed_at":"2023-01-31T06:45:14.841Z","dependency_job_id":null,"html_url":"https://github.com/redsift/d3-rs-squares","commit_stats":null,"previous_names":["redsift/d3-rs-calendar-chart"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redsift%2Fd3-rs-squares","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redsift%2Fd3-rs-squares/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redsift%2Fd3-rs-squares/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redsift%2Fd3-rs-squares/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/redsift","download_url":"https://codeload.github.com/redsift/d3-rs-squares/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231713108,"owners_count":18415191,"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-12-29T07:33:27.272Z","updated_at":"2024-12-29T07:33:31.377Z","avatar_url":"https://github.com/redsift.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# d3-rs-squares\n\n`d3-rs-squares` easily generate either a co-occurrence matrix or a calendar chart.\n\n## Builds\n\n[![Circle CI](https://circleci.com/gh/redsift/d3-rs-squares.svg?style=svg)](https://circleci.com/gh/redsift/d3-rs-squares)\n[![npm](https://img.shields.io/npm/v/@redsift/d3-rs-squares.svg?style=flat-square)](https://www.npmjs.com/package/@redsift/d3-rs-squares)\n[![MIT](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://raw.githubusercontent.com/redsift/d3-rs-squares/master/LICENSE)\n\n## Example\n\n[View @redsift/d3-rs-squares on Codepen](http://codepen.io/collection/nJKaBZ/)\n\n### Matrix chart\n\n![Sample occurrence chart](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[{%22x%22:%22a1%22,%22y%22:%22b1%22,%22z%22:10},{%22x%22:%22c1%22,%22y%22:%22d1%22,%22z%22:30}])\n\n### Co occurrence chart\n\n![Sample occurrence chart](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[{%22x%22:%22a%22,%22y%22:%22c%22,%22z%22:3},{%22x%22:%22c%22,%22y%22:%22a%22,%22z%22:13}]\u0026type=matrix.cooc)\n\n### Calendar chart\n\n![Sample calendar chart](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[{%22d%22:1470416243000,%22v%22:10},{%22d%22:1470934643000,%22v%22:20}]\u0026type=calendar.days)\n\n## Usage\n\n### Browser\n\t\n\t\u003cscript src=\"//static.redsift.io/reusable/d3-rs-squares/latest/d3-rs-squares.umd-es2015.min.js\"\u003e\u003c/script\u003e\n\t\u003cscript\u003e\n\t\t// for cooccurence view\n\t\tvar squares = d3_rs_squares.html();\n\t\t...\n\t\t//or for calendar view\n\t\tvar calendar = d3_rs_squares.html().type('calendar').lastWeeks(12);\n\t\u003c/script\u003e\n### ES6\n\n\timport { chart } from \"@redsift/d3-rs-squares\";\n\tlet eml = chart.html();\n\t...\n\t\n### Require\n\n\tvar chart = require(\"@redsift/d3-rs-squares\");\n\tvar eml = chart.html();\n\t...\n\n### Data layout\nBoth displays expect an Array with JSON objects. \n\n\tvar data = [{}, {}, ...];\n\nBetween the two **types** the layout of the object varies:\n\nFor the calendar view the expected JSON object should be:\n\n\t{\n\t\td: 1462057200000, // epoch timestamp in milliseconds \n\t\tv: 10\n\t}\n\nFor the co-occurrence matrix the expected JSON object should be:\n\n\t{\n\t\tx: 'key1', \n\t\ty: 'key2',\n\t\tz: 10 // number or object. To access object properties use zfield\n\t}\n\n### Parameters\n\n|Name|Used In|Description|Transition|Preview\n|----|--------|----------|----------|-------|\n|`classed`|* |SVG custom class|N| |\n|`width`, `height`|* | *Integer* Resize the chart height and width.|Y|[![Preview of width and height](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[{%22x%22:%22a1%22,%22y%22:%22b1%22,%22z%22:10},{%22x%22:%22c1%22,%22y%22:%22d1%22,%22z%22:30}]\u0026width=1000\u0026height=500)](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[{%22x%22:%22a1%22,%22y%22:%22b1%22,%22z%22:10},{%22x%22:%22c1%22,%22y%22:%22d1%22,%22z%22:30}]\u0026width=1000\u0026height=500)\u003cbr\u003eExamples: [Bricks](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[{%22x%22:%22a1%22,%22y%22:%22b1%22,%22z%22:10},{%22x%22:%22c1%22,%22y%22:%22d1%22,%22z%22:30}]\u0026width=1000\u0026height=500) / [CodePen](http://codepen.io/geervesh/pen/dNoMab)\n|`size`|* | *Integer* SVG container sizes|Y|[![Preview of size](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[{%22x%22:%22a1%22,%22y%22:%22b1%22,%22z%22:10},{%22x%22:%22c1%22,%22y%22:%22d1%22,%22z%22:30}]\u0026size=400)](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[{%22x%22:%22a1%22,%22y%22:%22b1%22,%22z%22:10},{%22x%22:%22c1%22,%22y%22:%22d1%22,%22z%22:30}]\u0026size=400)\u003cbr\u003eExamples: [Bricks](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[{%22x%22:%22a1%22,%22y%22:%22b1%22,%22z%22:10},{%22x%22:%22c1%22,%22y%22:%22d1%22,%22z%22:30}]\u0026size=400) / [CodePen](http://codepen.io/geervesh/pen/EZVqvV)\n|`scale`|* | *Integer* SVG container sizes|Y|[![Preview of scale](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[{%22x%22:%22a1%22,%22y%22:%22b1%22,%22z%22:10},{%22x%22:%22c1%22,%22y%22:%22d1%22,%22z%22:30}]\u0026scale=2)](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[{%22x%22:%22a1%22,%22y%22:%22b1%22,%22z%22:10},{%22x%22:%22c1%22,%22y%22:%22d1%22,%22z%22:30}]\u0026scale=2)\u003cbr\u003eExamples: [Bricks](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[{%22x%22:%22a1%22,%22y%22:%22b1%22,%22z%22:10},{%22x%22:%22c1%22,%22y%22:%22d1%22,%22z%22:30}]\u0026scale=2) / [CodePen](http://codepen.io/geervesh/pen/egpqMm)\n|`style`|* | *String* Custom CSS to inject into chart|N| |\n|`color`|* | *String, Array* Color palette for the data. Available options from [d3-rs-theme](https://github.com/Redsift/d3-rs-theme#presentation-color-palette) e.g. `'blue'`,`'green'`,`'aqua'`,... | Y| [![Preview of Color](https://bricks.redsift.io/reusable/d3-rs-squares.svg?_datum=[{%20%22y%22:%20%22Plan%22,%20%22x%22:%20%22Jan%22,%20%22z%22:%20100%20},%20{%20%22y%22:%20%22Bonus%22,%20%22x%22:%20%22Feb%22,%20%22z%22:%20460%20},{%20%22y%22:%20%22Plan%22,%20%22x%22:%20%22Mar%22,%22z%22:%20720%20}]\u0026color=aqua)](https://bricks.redsift.io/reusable/d3-rs-squares.svg?_datum=[{%20%22y%22:%20%22Plan%22,%20%22x%22:%20%22Jan%22,%20%22z%22:%20100%20},%20{%20%22y%22:%20%22Bonus%22,%20%22x%22:%20%22Feb%22,%20%22z%22:%20460%20},{%20%22y%22:%20%22Plan%22,%20%22x%22:%20%22Mar%22,%22z%22:%20720%20}]\u0026color=aqua)\u003cbr\u003e Examples: [Bricks](https://bricks.redsift.io/reusable/d3-rs-squares.svg?_datum=[{%20%22y%22:%20%22Plan%22,%20%22x%22:%20%22Jan%22,%20%22z%22:%20100%20},%20{%20%22y%22:%20%22Bonus%22,%20%22x%22:%20%22Feb%22,%20%22z%22:%20460%20},{%20%22y%22:%20%22Plan%22,%20%22x%22:%20%22Mar%22,%22z%22:%20720%20}]\u0026color=aqua) / [CodePen](http://codepen.io/geervesh/pen/amvjak)\n|`theme`|* | *String* `'light'` (default) or `'dark'` as described in [d3-rs-theme](https://github.com/Redsift/d3-rs-theme) | | [![Preview of Theme](https://bricks.redsift.io/reusable/d3-rs-squares.svg?_datum=[{%20%22y%22:%20%22Plan%22,%20%22x%22:%20%22Jan%22,%20%22z%22:%20100%20},%20{%20%22y%22:%20%22Bonus%22,%20%22x%22:%20%22Feb%22,%20%22z%22:%20460%20},{%20%22y%22:%20%22Plan%22,%20%22x%22:%20%22Mar%22,%22z%22:%20720%20}]\u0026theme=dark)](https://bricks.redsift.io/reusable/d3-rs-squares.svg?_datum=[{%20%22y%22:%20%22Plan%22,%20%22x%22:%20%22Jan%22,%20%22z%22:%20100%20},%20{%20%22y%22:%20%22Bonus%22,%20%22x%22:%20%22Feb%22,%20%22z%22:%20460%20},{%20%22y%22:%20%22Plan%22,%20%22x%22:%20%22Mar%22,%22z%22:%20720%20}]\u0026theme=dark)\u003cbr\u003e Examples: [Bricks](https://bricks.redsift.io/reusable/d3-rs-squares.svg?_datum=[{%20%22y%22:%20%22Plan%22,%20%22x%22:%20%22Jan%22,%20%22z%22:%20100%20},%20{%20%22y%22:%20%22Bonus%22,%20%22x%22:%20%22Feb%22,%20%22z%22:%20460%20},{%20%22y%22:%20%22Plan%22,%20%22x%22:%20%22Mar%22,%22z%22:%20720%20}]\u0026theme=dark) / [CodePen](http://codepen.io/geervesh/pen/pEjxEW)\n|`inset`|* |  *Integer, Object* Provide additional margin for axis with long keys. Expected object structure `{top: 0, bottom:10, left:10, right:0}`| | [![Preview of Inset](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[{%22x%22:%22a1%22,%22y%22:%22b1%22,%22z%22:10},{%22x%22:%22c1%22,%22y%22:%22d1%22,%22z%22:30}]\u0026inset=20)](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[{%22x%22:%22a1%22,%22y%22:%22b1%22,%22z%22:10},{%22x%22:%22c1%22,%22y%22:%22d1%22,%22z%22:30}]\u0026inset=20)\u003cbr\u003eExamples: [Bricks](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[{%22x%22:%22a1%22,%22y%22:%22b1%22,%22z%22:10},{%22x%22:%22c1%22,%22y%22:%22d1%22,%22z%22:30}]\u0026inset=20) / [CodePen](http://codepen.io/geervesh/pen/kkrApj) \n|`zfield`| matrix.* |*String* When `z` field is an object this parameter gives you the ability to use the value under a different key e.g. for `{x:'',y:'',z:{prop1:''}}` to use the value of the `prop1` key pass the name of the key `'prop1'` to the parameter| | Example: [CodePen](http://codepen.io/geervesh/pen/vXNQOy)\n|`cellSize`|* | *Integer* Get or override calculated size of cells | | Example: [CodePen](http://codepen.io/geervesh/pen/YGydbg)\n|`type`| |`'calendar.days'`, `'calendar.hours'`, `'matrix.cooc'`, `'matrix'`(default)|  | [![Preview of type](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[%20{%22d%22:%201462057200000,%20%22v%22:%2010},%20{%22d%22:%201462402800000,%20%22v%22:%205},%20{%22d%22:%201464822000000,%20%22v%22:%2015}%20]\u0026type=calendar.days)](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[%20{%22d%22:%201462057200000,%20%22v%22:%2010},%20{%22d%22:%201462402800000,%20%22v%22:%205},%20{%22d%22:%201464822000000,%20%22v%22:%2015}%20]\u0026type=calendar.days)\u003cbr\u003eExamples: [Calendar Bricks](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[%20{%22d%22:%201462057200000,%20%22v%22:%2010},%20{%22d%22:%201462402800000,%20%22v%22:%205},%20{%22d%22:%201464822000000,%20%22v%22:%2015}%20]\u0026type=calendar.days) / [Matrix Bricks](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[{%20%22x%22:%20%22jeff.dasovich%22,%22y%22:%20%22jeff.dasovich%22,%22z%22:%20491},{%20%22x%22:%20%22jeff.dasovich%22,%22y%22:%20%22lynn.blair%22,%22z%22:%200},{%20%22x%22:%20%22james.d.steffes%22,%20%22y%22:%20%22kay.mann%22,%22z%22:%200},{%20%22x%22:%20%22james.d.steffes%22,%20%22y%22:%20%22sally.beck%22,%22z%22:%2015}]\u0026type=matrix.cooc) / [Matrix CodePen](http://codepen.io/geervesh/pen/ORrgjO) / [Calendar CodePen](http://codepen.io/geervesh/pen/ORydJV)\n|`minDate`| `'calendar.days'` | *Timestamp* Override the earliest day of the dataset | Y| [![Preview of minDate](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[{%22d%22:%201462057100000,%20%22v%22:%202},%20{%22d%22:%201462057200000,%20%22v%22:%2020},%20{%22d%22:%201462402800000,%20%22v%22:%205},%20{%22d%22:%201464822000000,%20%22v%22:%2015}]\u0026nice=false\u0026type=calendar.days\u0026minDate=1462402800000)](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[{%22d%22:%201462057100000,%20%22v%22:%202},%20{%22d%22:%201462057200000,%20%22v%22:%2020},%20{%22d%22:%201462402800000,%20%22v%22:%205},%20{%22d%22:%201464822000000,%20%22v%22:%2015}]\u0026nice=false\u0026type=calendar.days\u0026minDate=1462402800000)\u003cbr\u003e Examples: [Bricks](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[{%22d%22:%201462057100000,%20%22v%22:%202},%20{%22d%22:%201462057200000,%20%22v%22:%2020},%20{%22d%22:%201462402800000,%20%22v%22:%205},%20{%22d%22:%201464822000000,%20%22v%22:%2015}]\u0026nice=false\u0026type=calendar.days\u0026minDate=1462402800000) / [CodePen](http://codepen.io/geervesh/pen/WGAExB)\n|`maxDate`| `'calendar.days'` | *Timestamp* Override the latest day of the dataset | Y | [![Preview of minDate](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[{%22d%22:%201462057100000,%20%22v%22:%202},%20{%22d%22:%201462057200000,%20%22v%22:%2020},%20{%22d%22:%201462402800000,%20%22v%22:%205},%20{%22d%22:%201464822000000,%20%22v%22:%2015}]\u0026nice=false\u0026type=calendar.days\u0026maxDate=1462057200000)](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[{%22d%22:%201462057100000,%20%22v%22:%202},%20{%22d%22:%201462057200000,%20%22v%22:%2020},%20{%22d%22:%201462402800000,%20%22v%22:%205},%20{%22d%22:%201464822000000,%20%22v%22:%2015}]\u0026nice=false\u0026type=calendar.days\u0026maxDate=1462057200000)\u003cbr\u003e Examples: [Bricks](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[{%22d%22:%201462057100000,%20%22v%22:%202},%20{%22d%22:%201462057200000,%20%22v%22:%2020},%20{%22d%22:%201462402800000,%20%22v%22:%205},%20{%22d%22:%201464822000000,%20%22v%22:%2015}]\u0026nice=false\u0026type=calendar.days\u0026maxDate=1462057200000) / [CodePen](http://codepen.io/geervesh/pen/WGAExB)\n|`nice` | `'calendar.days'`  | *Boolean* (deault: yes) Extend range of calendar to display whole months | N | Example: [CodePen](http://codepen.io/geervesh/pen/NRxydA)\n|`monthSeparation` | `'calendar.days'`| *Boolean* (deault: yes) Add extra space between months| N | [![Preview of monthSeparation](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[{%22d%22:%20978307200000,%22v%22:%208},%20{%22d%22:%20980985600000,%22v%22:%208219},%20{%22d%22:%20983404800000,%22v%22:%2010686}]\u0026nice=false\u0026type=calendar.days\u0026monthSeparation=false)](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[{%22d%22:%20978307200000,%22v%22:%208},%20{%22d%22:%20980985600000,%22v%22:%208219},%20{%22d%22:%20983404800000,%22v%22:%2010686}]\u0026nice=false\u0026type=calendar.days\u0026monthSeparation=false)\u003cbr\u003eExamples: [Bricks](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[{%22d%22:%20978307200000,%22v%22:%208},%20{%22d%22:%20980985600000,%22v%22:%208219},%20{%22d%22:%20983404800000,%22v%22:%2010686}]\u0026nice=false\u0026type=calendar.days\u0026monthSeparation=false) / [CodePen](http://codepen.io/geervesh/pen/yaZjgy)  \n|`starting`| calendar.* | *String* First day of the week. Default is `'timeSunday'` Available options: (`'timeMonday'`, `'timeTuesday'`, ...) or the utc counterparts: (`'utcMonday'`, `'utcTuesday'`, ...) based on the [d3-time](https://github.com/d3/d3-time) package| | [![Preview of Starting](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[{%22d%22:%20978307200000,%22v%22:%208},%20{%22d%22:%20980985600000,%22v%22:%208219},%20{%22d%22:%20983404800000,%22v%22:%2010686}]\u0026nice=false\u0026type=calendar.days\u0026starting=utcMonday)](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[{%22d%22:%20978307200000,%22v%22:%208},%20{%22d%22:%20980985600000,%22v%22:%208219},%20{%22d%22:%20983404800000,%22v%22:%2010686}]\u0026nice=false\u0026type=calendar.days\u0026starting=utcMonday)\u003cbr\u003eExamples: [Bricks](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[{%22d%22:%20978307200000,%22v%22:%208},%20{%22d%22:%20980985600000,%22v%22:%208219},%20{%22d%22:%20983404800000,%22v%22:%2010686}]\u0026nice=false\u0026type=calendar.days\u0026starting=utcMonday) / [CodePen](http://codepen.io/geervesh/pen/JRGkWm)\n|`rangeIndex`, `rangeValue`| matrix | *String, Function, Array* ranges from [d3-time#ranges](https://github.com/d3/d3-time#ranges) (Milliseconds not supported) Custom ranges need to follow the [d3-time#range](https://github.com/d3/d3-time#interval_range) paradigm. If an array is supplied first expected element is the range function and second a cardinality override of the range unit e.g. `[d3.timeYear, 2]` for a range of 2 years | | [![Preview of Index \u0026 Value Range](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[{%22x%22:%20993999486000,%20%22y%22:993999486000%20,%20%22z%22:8},%20{%22x%22:%20996677886000,%20%22y%22:996677886000,%20%22z%22:17},%20{%22x%22:%201000553960000,%20%22y%22:996677886000,%20%22z%22:%2050}]\u0026rangeIndex=timeYear\u0026intervalIndex=timeMonth\u0026rangeValue=timeWeek\u0026intervalValue=timeDay\u0026tickAxisFormatValue=%25a%0D%0A\u0026tickAxisFormatIndex=%25b)](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[{%22x%22:%20993999486000,%20%22y%22:993999486000%20,%20%22z%22:8},%20{%22x%22:%20996677886000,%20%22y%22:996677886000,%20%22z%22:17},%20{%22x%22:%201000553960000,%20%22y%22:996677886000,%20%22z%22:%2050}]\u0026rangeIndex=timeYear\u0026intervalIndex=timeMonth\u0026rangeValue=timeWeek\u0026intervalValue=timeDay\u0026tickAxisFormatValue=%25a%0D%0A\u0026tickAxisFormatIndex=%25b)\u003cbr\u003eExamples: [Bricks](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[{%22x%22:%20993999486000,%20%22y%22:993999486000%20,%20%22z%22:8},%20{%22x%22:%20996677886000,%20%22y%22:996677886000,%20%22z%22:17},%20{%22x%22:%201000553960000,%20%22y%22:996677886000,%20%22z%22:%2050}]\u0026rangeIndex=timeYear\u0026intervalIndex=timeMonth\u0026rangeValue=timeWeek\u0026intervalValue=timeDay\u0026tickAxisFormatValue=%25a%0D%0A\u0026tickAxisFormatIndex=%25b) / [CodePen](http://codepen.io/geervesh/pen/YGqKao)\n|`intervalIndex`, `intervalValue`| matrix | *String, Array* intervals from [d3-time#intervals](https://github.com/d3/d3-time#intervals) (Milliseconds not supported). For custom intervals an array is expected with the interval and range functions following the paradigm in [d3-time](https://github.com/d3/d3-time) e.g. `[timeHour, timeHours]` | | [![Preview of Index and Value intervals](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[{%22x%22:%20993999486000,%20%22y%22:993999486000%20,%20%22z%22:8},%20{%22x%22:%20996677886000,%20%22y%22:996677886000,%20%22z%22:17},%20{%22x%22:%201000553960000,%20%22y%22:996677886000,%20%22z%22:%2050}]\u0026rangeIndex=timeYear\u0026intervalIndex=timeWeek\u0026rangeValue=timeWeek\u0026intervalValue=timeDay\u0026tickAxisFormatIndex=%25U\u0026tickAxisFormatValue=%25a)](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[{%22x%22:%20993999486000,%20%22y%22:993999486000%20,%20%22z%22:8},%20{%22x%22:%20996677886000,%20%22y%22:996677886000,%20%22z%22:17},%20{%22x%22:%201000553960000,%20%22y%22:996677886000,%20%22z%22:%2050}]\u0026rangeIndex=timeYear\u0026intervalIndex=timeWeek\u0026rangeValue=timeWeek\u0026intervalValue=timeDay\u0026tickAxisFormatIndex=%25U\u0026tickAxisFormatValue=%25a)\u003cbr\u003eExamples: [Bricks](https://bricks.redsift.cloud/reusable/d3-rs-squares.svg?_datum=[{%22x%22:%20993999486000,%20%22y%22:993999486000%20,%20%22z%22:8},%20{%22x%22:%20996677886000,%20%22y%22:996677886000,%20%22z%22:17},%20{%22x%22:%201000553960000,%20%22y%22:996677886000,%20%22z%22:%2050}]\u0026rangeIndex=timeYear\u0026intervalIndex=timeWeek\u0026rangeValue=timeWeek\u0026intervalValue=timeDay\u0026tickAxisFormatIndex=%25U\u0026tickAxisFormatValue=%25a) / [CodePen](http://codepen.io/geervesh/pen/YGqKao) \n|`onClick`| |*Function* handler for a click event on the data series| |\n\n\n\n\\* In the default orientation *\\*Index* and *\\*Value* apply respectively to the the *x* and *y* axis \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fredsift%2Fd3-rs-squares","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fredsift%2Fd3-rs-squares","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fredsift%2Fd3-rs-squares/lists"}