Open Source Javascript library to render Dot Matrix Charts
Switch branches/tags
Nothing to show
Clone or download
Permalink
Failed to load latest commit information.
dist initial commit Mar 1, 2017
.gitignore initial commit Mar 1, 2017
LICENSE initial commit Mar 1, 2017
README.md changes in README.md May 29, 2017
bower.json initial commit Mar 1, 2017

README.md

d3-dotmatrix

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

Check out an Example 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:

<script src="/path/to/d3.min.js"></script>
<script src="/path/to/dist/DotMatrix.css"></script>
<script src="/path/to/dist/DotMatrix.js"></script>

Usage

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

<div id="DotMatrix"></div>

    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

        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 arpitnarechania@gmail.com

License

MIT license.