Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jbkunst/d3-waffle
I'm hungry for data!
https://github.com/jbkunst/d3-waffle
Last synced: about 1 month ago
JSON representation
I'm hungry for data!
- Host: GitHub
- URL: https://github.com/jbkunst/d3-waffle
- Owner: jbkunst
- License: mit
- Created: 2015-07-07T03:48:41.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2020-08-10T17:41:10.000Z (over 4 years ago)
- Last Synced: 2024-10-11T19:13:49.394Z (2 months ago)
- Homepage: http://jbkunst.github.io/d3-waffle/
- Size: 39.1 KB
- Stars: 50
- Watchers: 6
- Forks: 29
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- jimsghstars - jbkunst/d3-waffle - I'm hungry for data! (Others)
README
# d3-waflle
**d3-waffle** is a waffle (viz) maker *a la* D3.
## Live Demo
You can see how it looks [here](https://rawgit.com/jbkunst/d3-waffle/master/index.html).
## How to use
1. Choose your selector!
2. Prepare your data like `[{ name: "yay!", value: 80}, ...]`
2. Cook the `d3waffle()` with your parameters
3. And eat it!
### Simple example
```
var data = [
{ "name": "type 1", "value": 102},
{ "name": "type 2", "value": 65},
{ "name": "type 3", "value": 43},
{ "name": "type 4", "value": 12}
]
var chart = d3waffle();
d3.select("#container")
.datum(data)
.call(chart);
```
## Options
You can change:
- Values scale (a positive number)
- The icon (unicode string by now)
- The number of rows to show (an integer)
- The color palette (a d3 quantitative function)
- The timming effect (a function)
```
var chart2 = d3waffle()
.rows(6)
.icon("●")
.scale(0.5); // basically is Math.round(value/5);
d3.select("#container2")
.datum(data)
.call(chart2);
```
#### Other examples
A relative more complex:
Source https://github.com/hrbrmstr/waffle from http://www.nytimes.com/2008/07/20/business/20debt.html
```
var data = [
{ "name": "Mortgage ($84,911)", "value": 84911},
{ "name": "Auto and\ntuition loans ($14,414)", "value": 14414},
{ "name": "Home equity loans ($10,062)", "value": 10062},
{ "name": "Credit Cards ($8,565)", "value": 8565}
]
/* to color elements we use the class name ( slugigy(name) ) */
/* include in d3-waflle.js */
var domain = data.map(function(d){ return slugify(d.name); })
var range = ["#c7d4b6", "#a3aabd", "#a0d0de", "#97b5cf"]
var palette = d3.scale.ordinal().domain(domain).range(range);
var chart4 = d3waffle()
.rows(7)
.scale(1/392)
.colorscale(palette)
.appearancetimes(function(d, i){ return i*10 + Math.random()*250;})
.height(150);
d3.select("#container4")
.datum(data)
.call(chart4);
```
## Requirements
This plugin needs only [d3js](http://d3js.org/)!
## References and related workd
1. https://gist.github.com/XavierGimenez/8070956
1. http://d3js.org/
1. [Day/Hour Heatmap by tjdecke](http://bl.ocks.org/tjdecke/5558084)
1. https://github.com/hrbrmstr/waffle
1. Legends idea from http://bl.ocks.org/kramer/4745936
1. https://rud.is/b/2015/03/26/pre-cran-waffle-update-isotype-pictograms/ (yay I keep drying ;) )
## News
- Version 0.1.2 released (2015-07-13). Legend funcionality
- Version 0.1.1 released (2015-07-07). Adding better tooltips, general idea from [d3vennjs](http://benfred.github.io/venn.js/examples/intersection_tooltip.html). Now, there is FontAwesome support, using the unicode (http://fortawesome.github.io/Font-Awesome/cheatsheet/). Adding `adjust` parameter because some icons are bigger so you can (need) adjust the size font (size * factor + "px")
- Version 0.1 released (2015-07-07). Minimal functionalities.
## Future Work
- Improve tooltips
- Improve Legends
## Known bugs
- When you move the curso from left to right the mouse icon change to *text selection* reducing the UX quality.