Open Source Javascript Library to render Spot Matrix Charts using D3.js
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist fix fill type Jul 10, 2017
.gitignore
LICENSE
README.md
SpotMatrix.gif add a .gif image Feb 28, 2017
bower.json

README.md

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

Option Description Type Options
spot_radius The Spot Radius (in pixels) number 15
spot_cell_padding The Spot Cell Padding (in pixels) number 5
spot_cell_margin The Spot Cell Margin (in pixels) number 5
max_color The maximum of the color range string 'green'
min_color The minimum of the color range string 'white'
stroke_color The Spot Stroke Color string 'black'
spot_matrix_type The type of Spot Matrix (ring/size/color/fill/sector) string 'fill'

Author

Arpit Narechania arpitnarechania@gmail.com

License

MIT license.