https://github.com/arpitnarechania/d3-dotmatrix

Open Source Javascript library to render Dot Matrix Charts
https://github.com/arpitnarechania/d3-dotmatrix

chart d3 d3-dotmatrix dot-matrix javascript opensource

Last synced: 17 days ago
JSON representation

Open Source Javascript library to render Dot Matrix Charts

• Host: GitHub
• URL: https://github.com/arpitnarechania/d3-dotmatrix
• Owner: arpitnarechania
• License: mit
• Created: 2017-03-01T15:13:37.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-05-29T13:42:47.000Z (over 7 years ago)
• Last Synced: 2024-04-26T20:02:18.335Z (7 months ago)
• Topics: chart, d3, d3-dotmatrix, dot-matrix, javascript, opensource
• Size: 38.1 KB
• Stars: 14
• Watchers: 1
• Forks: 8
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# d3-dotmatrix

**d3-dotmatrix** is an open-source JavaScript library for rendering Dot Matrix Charts using the D3.js library.

Check out an [Example](https://arpitnarechania.github.io/d3-dotmatrix/) where you can test various configuration options.

# Installation

Download d3-dotmatrix using bower.

```

bower install d3-dotmatrix --save

```

To use this library then, simply include d3.js, DotMatrix.js and DotMatrix.css:

``` html

```

# Usage

To use this library, you must create a container element and instantiate a new

DotMatrixChart:

```html



```


```Data

    var dataset =

    [

        { group: "Group 1" ,category: "Category 1", count: 48},

        { group: "Group 1" ,category: "Category 2", count: 27},

        { group: "Group 1" ,category: "Category 3", count: 12},

        { group: "Group 1" ,category: "Category 4", count: 16},

        { group: "Group 2" ,category: "Category 1", count: 35},

        { group: "Group 2" ,category: "Category 2", count: 12},

        { group: "Group 2" ,category: "Category 3", count: 16},

        { group: "Group 2" ,category: "Category 4", count: 42},

        { group: "Group 3" ,category: "Category 1", count: 39},

        { group: "Group 3" ,category: "Category 2", count: 25},

        { group: "Group 3" ,category: "Category 3", count: 26},

        { group: "Group 3" ,category: "Category 4", count: 46},

    ];

```

Setting chart parameters

``` javascript

        var chart_options = {

		    dot_radius : 5,

		    no_of_circles_in_a_row: 40,

            dot_padding_left : 5,

            dot_padding_right : 5,

            dot_padding_top : 5,

            dot_padding_bottom : 5

		}

        DotMatrixChart(dataset,chart_options);

```

## Options

| Option                     | Description                                                               | Type     | Options

| -------------------------- | ------------------------------------------------------------------------- | -------- | ------------------------- |

| `dot_radius`               | The radius of the dots                                                    | number   | `5`                     |

| `no_of_circles_in_a_row`   | The number of circles in one row before line break happens                | number   | `40`                     |

| `dot_padding_left`         | The left margin between dots                                              | number   | `5`                      |

| `dot_padding_right`        | The right margin between dots                                             | number   | `5`                      |

| `dot_padding_top`          | The top margin between dots                                               | number   | `5`                      |

| `dot_padding_bottom`       | The bottom margin between dots                                            | number   | `5`                      |

# Author

Arpit Narechania

[email protected]

# License

MIT license.