https://github.com/arpitnarechania/d3-matrix
Open Source Javascript library to render matrices using D3.js
https://github.com/arpitnarechania/d3-matrix
columns d3 d3-matrix grid matrix opensource rows table
Last synced: 5 months ago
JSON representation
Open Source Javascript library to render matrices using D3.js
- Host: GitHub
- URL: https://github.com/arpitnarechania/d3-matrix
- Owner: arpitnarechania
- License: mit
- Created: 2017-02-25T11:10:29.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-02-28T05:00:50.000Z (over 8 years ago)
- Last Synced: 2025-02-11T17:18:16.535Z (5 months ago)
- Topics: columns, d3, d3-matrix, grid, matrix, opensource, rows, table
- Homepage: https://arpitnarechania.github.io/d3-matrix
- Size: 64.5 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# d3-matrix
**d3-matrix** is an open-source JavaScript library for rendering Matrices using the D3.js library.
Check out an [Example](https://arpitnarechania.github.io/d3-matrix/) where you can test various configuration options.
# Installation
Using Bower:
```
bower install d3-matrix --save
```
To use this library then, simply include d3.js, matrix.js and matrix.css:
``` html
```
# Usage
To use this library, you must create a container element and instantiate a new
Matrix:
```html
```
Data in .json format
``` javascript
var data = {
values: [[1, 0.3],
[0.3, 1]],
labels: ['Var 1', 'Var 2']
};
```
Setting chart parameters
``` javascript
var chart_options = {
container: "#Matrix",
show_labels : true,
start_color : '#ffffff',
end_color : '#3498db',
width: 400,
height: 400,
margin: {top: 50, right: 50, bottom: 100, left: 100},
highlight_cell_on_hover: true,
highlight_cell_color: '#2ecc71'
};
Matrix(data,chart_options);
```
## Options
| Option | Description | Type | Example
| -------------------------- | ------------------------------------------------------------------------- | -------- | ----------------------------- |
| `container` | The DOM element id/ class to append the chart to | string | `#Matrix` |
| `width` | The width of the chart in pixels | number | `900` |
| `height` | The height of the chart in pixels | number | `500` |
| `margin.top` | The top margin | number | `75` |
| `margin.bottom` | The bottom margin | number | `50` |
| `margin.left` | The left margin | number | `100` |
| `margin.right` | The right margin | number | `50` |
| `show_labels` | Whether the labels are to be shown. | bool | `true` |
| `start_color` | The color for the minimum value | string | `'white'` |
| `end_color` | The color for the maximum value | string | `'blue'` |
| `highlight_cell_on_hover` | Whether the cells are to be highlighted on mouseover | bool | `true` |
| `highlight_cell_color` | The color of the cells on mouseover | string | `'green'` |
# Author
Arpit Narechania
[email protected]
# License
MIT license.