{"id":16466533,"url":"https://github.com/arpitnarechania/d3-matrix","last_synced_at":"2025-10-27T13:30:40.265Z","repository":{"id":58234351,"uuid":"83126223","full_name":"arpitnarechania/d3-matrix","owner":"arpitnarechania","description":"Open Source Javascript library to render matrices using D3.js","archived":false,"fork":false,"pushed_at":"2017-02-28T05:00:50.000Z","size":66,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-11T17:18:16.535Z","etag":null,"topics":["columns","d3","d3-matrix","grid","matrix","opensource","rows","table"],"latest_commit_sha":null,"homepage":"https://arpitnarechania.github.io/d3-matrix","language":null,"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/arpitnarechania.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":"2017-02-25T11:10:29.000Z","updated_at":"2021-12-13T22:46:01.000Z","dependencies_parsed_at":"2022-08-31T00:31:21.357Z","dependency_job_id":null,"html_url":"https://github.com/arpitnarechania/d3-matrix","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arpitnarechania%2Fd3-matrix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arpitnarechania%2Fd3-matrix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arpitnarechania%2Fd3-matrix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arpitnarechania%2Fd3-matrix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arpitnarechania","download_url":"https://codeload.github.com/arpitnarechania/d3-matrix/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238497683,"owners_count":19482297,"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":["columns","d3","d3-matrix","grid","matrix","opensource","rows","table"],"created_at":"2024-10-11T11:44:00.355Z","updated_at":"2025-10-27T13:30:39.860Z","avatar_url":"https://github.com/arpitnarechania.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# d3-matrix\n\n**d3-matrix** is an open-source JavaScript library for rendering Matrices using the D3.js library.\n\nCheck out an [Example](https://arpitnarechania.github.io/d3-matrix/) where you can test various configuration options.\n\n# Installation\n\nUsing Bower:\n\n```\nbower install d3-matrix --save\n```\n\nTo use this library then, simply include d3.js, matrix.js and matrix.css:\n\n``` html\n\u003cscript src=\"/path/to/d3.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/path/to/dist/matrix.css\"\u003e\u003c/script\u003e\n\u003cscript src=\"/path/to/dist/matrix.js\"\u003e\u003c/script\u003e\n```\n\n# Usage\n\nTo use this library, you must create a container element and instantiate a new\nMatrix:\n\n```html\n\u003cdiv id=\"Matrix\"\u003e\u003c/div\u003e\n```\n\nData in .json format\n``` javascript\n    var data = {\n        values: [[1, 0.3],\n                [0.3, 1]],\n        labels: ['Var 1', 'Var 2']\n    };\n```\n\nSetting chart parameters\n``` javascript\n\n    var chart_options = {\n        container: \"#Matrix\",\n        show_labels : true,\n        start_color : '#ffffff',\n        end_color : '#3498db',\n        width: 400,\n        height: 400,\n        margin: {top: 50, right: 50, bottom: 100, left: 100},\n        highlight_cell_on_hover: true,\n        highlight_cell_color: '#2ecc71'\n    };\n\n    Matrix(data,chart_options);\n\n```\n\n## Options\n\n| Option                     | Description                                                               | Type     | Example\n| -------------------------- | ------------------------------------------------------------------------- | -------- | ----------------------------- |\n| `container`                | The DOM element id/ class to append the chart to                          | string   | `#Matrix`                     |\n| `width`                    | The width of the chart in pixels                                          | number   | `900`                         |\n| `height`                   | The height of the chart in pixels                                         | number   | `500`                         |\n| `margin.top`               | The top margin                                                            | number   | `75`                          |\n| `margin.bottom`            | The bottom margin                                                         | number   | `50`                          |\n| `margin.left`              | The left margin                                                           | number   | `100`                         |\n| `margin.right`             | The right margin                                                          | number   | `50`                          |\n| `show_labels`              | Whether the labels are to be shown.                                       | bool     | `true`                        |\n| `start_color`              | The color for the minimum value                                           | string   | `'white'`                     |\n| `end_color`                | The color for the maximum value                                           | string   | `'blue'`                      |\n| `highlight_cell_on_hover`  | Whether the cells are to be highlighted on mouseover                      | bool     | `true`                        |\n| `highlight_cell_color`     | The color of the cells on mouseover                                       | string   | `'green'`                     |\n\n# Author\n\nArpit Narechania\narpitnarechania@gmail.com\n\n# License\n\nMIT license.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farpitnarechania%2Fd3-matrix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farpitnarechania%2Fd3-matrix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farpitnarechania%2Fd3-matrix/lists"}