12 | D3 icon array
13 | Tom Pearson Mar 2016
14 | A D3 plugin helping you to draw an array of icons. Works fine with v4 or v5 (possibly later?)
15 | Check out the readme file for usage examples, API docs, and more information on the rationale behind using icon arrays.
16 |
17 |
18 |
19 |
20 |
21 |
60 |
61 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | export {default as layout} from "./src/icon-array-layout";
2 | export {default as scale} from "./src/icon-array-scale";
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "d3-iconarray",
3 | "version": "0.0.3",
4 | "description": "Layout a grid of icons",
5 | "keywords": [
6 | "d3","visualization","iconarray","layout"
7 | ],
8 | "author": "Tom G Pearson",
9 | "license": "BSD-3-Clause",
10 | "main": "build/d3-iconarray.js",
11 | "jsnext:main": "index",
12 | "homepage": "https://www.github.com/tomgp/d3-iconarray",
13 | "repository": {
14 | "type": "git",
15 | "url": "https://www.github.com/tomgp/d3-iconarray.git"
16 | },
17 | "scripts": {
18 | "pretest": "mkdir -p build && node -e 'process.stdout.write(\"var version = \\\"\" + require(\"./package.json\").version + \"\\\"; export * from \\\"../index\\\"; export {version};\");' > build/bundle.js && rollup -f umd -n d3_iconarray -o build/d3-iconarray.js -- build/bundle.js",
19 | "test": "faucet `find test -name '*-test.js'`",
20 | "prepublish": "npm run test && uglifyjs build/d3-iconarray.js -c -m -o build/d3-iconarray.min.js && rm -f build/d3-iconarray.zip && zip -j build/d3-iconarray.zip -- LICENSE README.md build/d3-iconarray.js build/d3-iconarray.min.js"
21 | },
22 | "devDependencies": {
23 | "faucet": "0.0",
24 | "rollup": "0.25",
25 | "tape": "4",
26 | "uglify-js": "2.6"
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/icon-array-layout.js:
--------------------------------------------------------------------------------
1 | export default function() {
2 | var width = undefined;
3 | var height = undefined;
4 | var widthFirst = true;
5 | var maxDimension = undefined;
6 |
7 | function layout(data){
8 | //work our missing height, width stuff
9 |
10 | setDimensions(data.length);
11 |
12 | return data.map(function(d,i){
13 | return {
14 | data:d,
15 | position:position(i)
16 | };
17 | });
18 | }
19 |
20 | function position(i){
21 | if(isNaN(width) || isNaN(height)){
22 | console.log('Warning: width/height undefined')
23 | return 0;
24 | }
25 | if(widthFirst){
26 | return {
27 | x: i % width,
28 | y: Math.floor( i/width )
29 | };
30 | }else{
31 | return {
32 | x: Math.floor( i/height ),
33 | y: i % height
34 | };
35 | }
36 | }
37 |
38 | function setDimensions(l){
39 | //neither width or height is defined
40 | if(isNaN(width) && isNaN(height)){
41 | console.log('no width or height');
42 | if(widthFirst){
43 | width = Math.ceil( Math.sqrt(l) );
44 | height = Math.ceil( l / width );
45 | }else{
46 | height = Math.ceil( Math.sqrt(l) );
47 | width = Math.ceil( l / height );
48 | }
49 | }else if(isNaN(width)){ //width undefined
50 | width = Math.ceil( l / height );
51 | }else if(isNaN(height)){ //height undefined
52 | height = Math.ceil( l / width );
53 | }
54 | }
55 |
56 | layout.maxDimension = function(x){
57 | var itemPosition = position(x);
58 | if(widthFirst){
59 | var x = Math.max(itemPosition.x, width);
60 | return Math.max(x, itemPosition.y);
61 | }
62 | var y = Math.max(itemPosition.y, height);
63 | return Math.max(y, itemPosition.x);
64 |
65 | }
66 |
67 | layout.position = function(x){
68 | return position(x);
69 | }
70 |
71 | layout.width = function(x){
72 | if(x === undefined) return width;
73 | width = x;
74 | return layout;
75 | };
76 |
77 | layout.height = function(x){
78 | if(x === undefined) return height;
79 | height = x;
80 | return layout;
81 | };
82 |
83 | layout.widthFirst = function(b){
84 | if(b === undefined) return widthFirst;
85 | widthFirst = b;
86 | return layout;
87 | };
88 |
89 | return layout;
90 | };
91 |
92 |
93 |
94 | function position(item, width, height, widthFirst){
95 | return i;
96 | }
--------------------------------------------------------------------------------
/src/icon-array-scale.js:
--------------------------------------------------------------------------------
1 | import * as d3 from 'd3-scale';
2 |
3 | export default function(){
4 |
5 | var domain = [0,100];
6 | var range = [0,100];
7 | var gapInterval = 10;
8 | var gapSize = 0; //default no change
9 | var notionalScale = d3.scaleLinear()
10 | .domain(domain)
11 | .range(range);
12 |
13 | function scale(domainValue){
14 | var rangeValue = 20;
15 | var adjustedDomainValue = domainValue + Math.floor(domainValue/gapInterval)*gapSize;
16 | //console.log(notionalScale.domain());
17 | return rangeValue = notionalScale(adjustedDomainValue);
18 | }
19 |
20 | function rescale(){
21 | //calculate an adjusted domain
22 | var domainLength = (domain[1] - domain[0]) * gapSize;
23 | var gaps = Math.ceil( domainLength/ gapInterval );
24 | var adjustedDomain = [ domain[0], domain[1] + gaps ];
25 |
26 | //calculate an adjusted range
27 |
28 | notionalScale.domain(adjustedDomain)
29 | .range(range);
30 | }
31 |
32 | scale.gapInterval = function(x){
33 | if(!x) return gapInterval;
34 | gapInterval = x;
35 | rescale();
36 | return scale;
37 | };
38 |
39 | scale.gapSize = function(x){
40 | if(isNaN(x)) return gapSize;
41 | gapSize = x;
42 | rescale();
43 | return scale;
44 | }
45 |
46 | scale.domain = function(array){
47 | if(!array) return domain;
48 | domain = array;
49 | rescale();
50 | return scale;
51 | };
52 |
53 | scale.range = function(array){
54 | if(!array) return range;
55 | range = array;
56 | rescale();
57 | return scale;
58 | };
59 |
60 | rescale();
61 | return scale;
62 | }
--------------------------------------------------------------------------------
/test/iconarray-test.js:
--------------------------------------------------------------------------------
1 | var tape = require("tape"),
2 | iconArray = require("../");
3 |
4 | tape("check empty layout", function(test) {
5 | var myArray = iconArray.layout();
6 | test.equal( myArray([]).length, 0 );
7 | test.end();
8 | });
9 | //TODO check default layout i.e. no width height specified
10 |
11 | tape("check 10x10 layout", function(test) { // a nice neat 10x10
12 | var myArray = iconArray.layout()
13 | .width(10)
14 | .height(10);
15 |
16 | var layout = myArray(getTestData(100));
17 |
18 | test.equal( layout.length, 100 );
19 | test.equal( layout[0].position.x, 0);
20 | test.equal( layout[0].position.y, 0);
21 | test.equal( layout[10].position.x, 0);
22 | test.equal( layout[10].position.y, 1);
23 |
24 | test.equal( myArray.position(25).x, 5);
25 | test.equal( myArray.position(25).y, 2);
26 | test.equal( myArray.width(), 10);
27 | test.equal( myArray.height(), 10);
28 | test.end();
29 | });
30 |
31 | tape("check 10x? layout", function(test){
32 | var myArray = iconArray.layout()
33 | .width(10);
34 |
35 | var layout = myArray(getTestData(900));
36 | test.equal( layout.length, 900 );
37 | test.equal( myArray.position(320).x, 0);
38 | test.equal( myArray.position(320).y, 32);
39 | test.equal( myArray.width(), 10);
40 | test.equal( myArray.height(), 90);
41 | test.end();
42 | });
43 |
44 |
45 | tape("check empty scale", function(test){
46 | var myScale = iconArray.scale();
47 | test.equal( myScale(20), 20 );
48 | test.end();
49 | });
50 |
51 | //TODO more scale tests
52 |
53 | function getTestData(n){
54 | var a = [];
55 | for(var i=0; i