Grouping an array using lodash _.groupBy.
Creates an object composed of keys generated from the results of running each element of collection through iteratee. The corresponding value of each key is an array of the elements responsible for generating the key. The iteratee is bound to thisArg and invoked with three arguments: (value, index|key, collection).
| (function() { | |
| 'use strict'; | |
| // start with an array of mixed float values | |
| var dataA = []; // original array | |
| // generate some values | |
| _.times(50, function() { | |
| var f = _.random(1.1, 9.9); | |
| dataA.push(d3.round(f, 4)); | |
| }); | |
| // use loDash _.groupBy https://lodash.com/docs#groupBy | |
| var dataG = _.groupBy(dataA, function(n) { | |
| return Math.floor(n); | |
| }); | |
| // create reference array to keys in object | |
| var keys = _.keys(dataG); | |
| // visualise organised data | |
| _.times(keys.length, function(n) { | |
| var ul = d3.select('body').append('ul').classed('groups ul-' + n, true); | |
| ul.selectAll('ul-' + n + ' li') | |
| .data(dataG[keys[n]]) | |
| .enter().append('li') | |
| .text(function (d) { return d; }); | |
| }); | |
| // show current array | |
| d3.select('#original-array').text(dataA); | |
| })(); | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>d3 | keypress keyboard events</title> | |
| <meta name="author" content="Sundar Singh | eesur.com"> | |
| <link rel="stylesheet" href="main.css"> | |
| <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js" charset="utf-8"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.4.6/mousetrap.js" charset="utf-8"></script> | |
| </head> | |
| <header> | |
| <p>using lodash _.groupBy to group an array of float numbers: </p> | |
| </header> | |
| <section id='vis'></section> | |
| <footer> | |
| <p>Original data array: [ <span id="original-array"></span> ]</p> | |
| </footer> | |
| <script src="d3_code_lodash_groupby.js" charset="utf-8"></script> | |
| </body> | |
| </html> |
| @import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:400,600); | |
| body, h1, h3 { | |
| font-family: "Source Code Pro", Consolas, monaco, monospace; | |
| line-height: 1.5; | |
| font-weight: 400; | |
| } | |
| html, body { | |
| height: 100%; | |
| } | |
| body { | |
| position: relative; | |
| background: #130C0E; | |
| color: #FDBB30; | |
| padding: 20px; | |
| } | |
| p { | |
| padding-top: 0; | |
| margin-top: 0; | |
| font-size: 13px; | |
| line-height: 1; | |
| max-width: 600px; | |
| } | |
| ul.groups { | |
| list-style: none; | |
| display: inline-block; | |
| width: 80px; | |
| padding: 0; | |
| margin: 0; | |
| margin-right: 20px; | |
| } | |
| ul.groups li{ | |
| display: block; | |
| padding: 2px 5px 2px 10px; | |
| color: #130C0E; | |
| background: #FDBB30; | |
| margin-bottom: 2px; | |
| } | |
| footer { | |
| position: absolute; | |
| bottom: 100px; | |
| left: 20px; | |
| } |
