Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ashiguruma/patternomaly
Easily generate patterns for use in data graphics
https://github.com/ashiguruma/patternomaly
Last synced: 18 days ago
JSON representation
Easily generate patterns for use in data graphics
- Host: GitHub
- URL: https://github.com/ashiguruma/patternomaly
- Owner: ashiguruma
- License: mit
- Created: 2016-06-02T06:14:44.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T05:53:08.000Z (almost 2 years ago)
- Last Synced: 2024-04-15T00:24:13.680Z (7 months ago)
- Language: JavaScript
- Homepage:
- Size: 658 KB
- Stars: 518
- Watchers: 12
- Forks: 37
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Patternomaly
Easily generate patterns for use in data graphics.
## But why?
[Color-blindness](http://betweentwobrackets.com/data-graphics-and-colour-vision/), that's why.
This library came about as part of [an issue in Chart.js](https://github.com/chartjs/Chart.js/issues/1323).
## Usage
npm install patternomaly
Generate a single canvas pattern
pattern.draw('square', '#1f77b4');
Generate an array of canvas patterns
```javascript
pattern.generate([
'#1f77b4',
'#ff7f0e',
'#2ca02c',
'#d62728'
]);
```
## Available Patterns
There are currently 21 pattern variants available. When using the `generate` method (above) patterns will be 'randomly' assigned.
It is however possible to provide specific patterns using the `draw` method.
```javascript
datasets: [{
data: [
300, 50, 100, 210, 140
],
backgroundColor: [
pattern.draw('square', '#1f77b4'),
pattern.draw('circle', '#ff7f0e'),
pattern.draw('diamond', '#2ca02c'),
pattern.draw('zigzag-horizontal', '#17becf'),
pattern.draw('triangle', 'rgb(255, 99, 132, 0.4)') // with opacity
]
}]
```
### Pattern Keys
- plus
- cross
- dash
- cross-dash
- dot
- dot-dash
- disc
- ring
- line
- line-vertical
- weave
- zigzag
- zigzag-vertical
- diagonal
- diagonal-right-left
- square
- box
- triangle
- triangle-inverted
- diamond
- diamond-box
*Thanks to [obedm503](https://github.com/obedm503) for generating the example pattern image.*
## Providing a Pattern Alternative
In order to provide an alternative view for visually impaired viewers it's a good idea to [provide a patterned alternative](http://betweentwobrackets.com/data-graphics-and-colour-vision/#patternstotherescue).
See the [pattern option example page](examples/optional.html) for a simple implementation of a pattern toggle switch for Chart.js.
## Typescript / Angular
A typings file is included in this package. Just insert `import {draw, generate} from 'patternomaly'` in the header of your .ts file.
Still you have to add the javascript file to your build e.g. in the scripts array in angular.cli.json e.g. `"scripts": ["node_modules/patternomaly/dist/patternomaly.js"]`.