d3-spotmatrix

d3-spotmatrix is an open-source JavaScript library for rendering custom Spot Matrix Charts using the D3.js library.

Check out an Example where you can test various configuration options.

Installation

Download d3-spotmatrix using bower.

bower install d3-spotmatrix --save

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

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

Usage

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

<div id="SpotMatrix"></div>

Data

var dataset = [{
        "Options": "Option 1",
        "Usable": 82,
        "Scalable": 32,
        "Flexible": 34,
        "Durable": 10,
        "Capable": 73,
        "Stable": 17
    }, {
        "Options": "Option 2",
        "Usable": 55,
        "Scalable": 12,
        "Flexible": 42,
        "Durable": 50,
        "Capable": 19,
        "Stable": 61
    }]

Setting chart parameters

        var chart_options = {
            spot_radius : 15,
            spot_cell_padding : 5,
            spot_cell_margin : 5,
            min_color : '#efefef',
            max_color : '#01579b',
            stroke_color : '#01579b',
            spot_matrix_type : 'ring'
        }
        SpotMatrix(dataset,chart_options);

Options

Author

Arpit Narechania [email protected]

License

MIT license.