Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/arpitnarechania/d3js-legend

An opensource javascript library to create different kinds of Legends using D3.js
https://github.com/arpitnarechania/d3js-legend

d3 d3js-legend javascript legend legends open-source

Last synced: about 2 months ago
JSON representation

An opensource javascript library to create different kinds of Legends using D3.js

Awesome Lists containing this project

README

        

# d3js-legend

**d3js-legend** is an open-source JavaScript library for rendering custom legends using the D3.js library.

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

# Installation

Download d3-legend using bower.

```
bower install d3js-legend --save
```

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

``` html

```

# Usage

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

```html


```

Setting chart parameters
``` javascript

Legend({
length : 600,
thickness: 50,
min_color : '#ffffff',
max_color : '#3498db',
max_value : 500,
min_value : 0,
margin : {top:30,bottom:50,left:30,right:50},
orientation : 'vertical',
axis_position : 'right',
axis_tick_orientation : 'right',
min_value_at_start : false
});

```

## Options

| Option | Description | Type | Options
| -------------------------- | ------------------------------------------------------------------------- | -------- | ------------------------- |
| `width` | The width of the legend in pixels | number | `200` |
| `height` | The height of the legend in pixels | number | `300` |
| `margin.top` | The top margin | number | `10` |
| `margin.bottom` | The bottom margin | number | `10` |
| `margin.left` | The left margin | number | `10` |
| `margin.right` | The right margin | number | `10` |
| `max_color` | The maximum of the color range | string | `'green'` |
| `min_color` | The minimum of the color range | string | `'white'` |
| `max_value` | The maximum value | number | `100` |
| `min_value` | The minimum value | number | `0` |
| `orientation` | The legend orientation | string | `'vertical'`/`'horizontal'` |
| `axis_position` | The position of the axis | string | `'left'`/`'right'`/`'bottom'`/`'top'`|
| `axis_tick_orientation` | The position of the axis ticks | string | `'left'`/`'right'`/`'bottom'`/`'top'`|
| `min_value_at_start` | Whether legend's minimum value is to be at the start or end | bool | `true` |

# Author

Arpit Narechania
arpitnarechania@gmail.com

# License

MIT license.