Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/arpitnarechania/d3js-legend
- Owner: arpitnarechania
- License: mit
- Created: 2017-02-25T15:34:57.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-02-26T17:30:31.000Z (almost 8 years ago)
- Last Synced: 2024-10-12T08:18:20.926Z (3 months ago)
- Topics: d3, d3js-legend, javascript, legend, legends, open-source
- Homepage: https://arpitnarechania.github.io/d3js-legend
- Size: 24.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
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
``` javascriptLegend({
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.