2b:null 2c:["$","title",null,{"children":"d3 Group and Rollup SortBy, get topN | t829702 | Observable"}] 31:T587,// then put the mapper whenever needed, can be a getTopN or any other kind of generic mapper statesRollupByApprovalsCount = rollup( data, // reducer items => Object.assign(items, { employersCount: 1, approvalsCount: d3.sum(items, o => +o['Initial Approvals'] + o['Continuing Approvals']), }), // ...keys [ o => o.State, // key function items => Object.assign( // mapper function new Map( Array.from(items) .sort(([_a,a],[_b,b]) => d3.descending(a.approvalsCount, b.approvalsCount)) .slice(0, 10) ), { employersCount: d3.sum(items, ([_o,o]) => o.employersCount), approvalsCount: d3.sum(items, ([_o,o]) => o.approvalsCount), }), ], [ o => o.City, // key function items => Object.assign( // mapper function new Map( Array.from(items) .sort(([_a,a],[_b,b]) => d3.descending(a.approvalsCount, b.approvalsCount)) .slice(0, 10) ), { employersCount: d3.sum(items, ([_o,o]) => o.employersCount), approvalsCount: d3.sum(items, ([_o,o]) => o.approvalsCount), }), ], [ o => o.Employer, // key function items => Object.assign( // mapper function items, { employersCount: d3.sum(items, ([_o,o]) => o.employersCount), approvalsCount: d3.sum(items, ([_o,o]) => o.approvalsCount), }), ], )32:T580,statsMapTop100Cities = rollup( data, // reducer items => Object.assign(items, { employersCount: 1, approvalsCount: d3.sum(items, o => +o['Initial Approvals'] + o['Continuing Approvals']), denialsCount: d3.sum(items, o => +o['Initial Denials'] + o['Continuing Denials']), casesTotalCount: d3.sum(items, o => ( +o['Initial Approvals'] + o['Initial Denials'] + o['Continuing Approvals'] + o['Continuing Denials']) ), }), // ...keys [ d => `${ _.startCase( _.lowerCase(d.City)) }, ${d.State}`, items => Object.assign( new Map( Array.from(items) .sort(([_a,a],[_b,b]) => d3.descending(a.approvalsCount, b.approvalsCount)) .slice(0, 100), ), { employersCount: d3.sum(items, ([_o,o]) => o.employersCount), approvalsCount: d3.sum(items, ([_o,o]) => o.approvalsCount), denialsCount: d3.sum(items, ([_o,o]) => o.denialsCount), casesTotalCount: d3.sum(items, ([_o,o]) => o.casesTotalCount), }), ], [ o => o.Employer, // key function items => Object.assign( // mapper function items, { employersCount: d3.sum(items, ([_o,o]) => o.employersCount), approvalsCount: d3.sum(items, ([_o,o]) => o.approvalsCount), denialsCount: d3.sum(items, ([_o,o]) => o.denialsCount), casesTotalCount: d3.sum(items, ([_o,o]) => o.casesTotalCount), }), ], )33:T1510,placesStat = [{"place":"New York, NY","center":[-73.9808,40.7648]},{"place":"Chicago, IL","center":[-87.6244,41.8756]},{"place":"Edison, NJ","center":[-74.4121,40.5187]},{"place":"Boston, MA","center":[-71.0596,42.3605]},{"place":"San Francisco, CA","center":[-122.463,37.7648]},{"place":"San Jose, CA","center":[-121.8261,37.2751]},{"place":"South Plainfield, NJ","center":[-74.4115,40.5793]},{"place":"Seattle, WA","center":[-122.3301,47.6038]},{"place":"Plano, TX","center":[-96.6925,33.0137]},{"place":"Mountain View, CA","center":[-122.082,37.3856]},{"place":"East Brunswick, NJ","center":[-74.416,40.4279]},{"place":"Houston, TX","center":[-95.3677,29.7589]},{"place":"Sunnyvale, CA","center":[-122.0363,37.3688]},{"place":"Redmond, WA","center":[-122.1239,47.6694]},{"place":"Santa Clara, CA","center":[-121.9552,37.3541]},{"place":"Secaucus, NJ","center":[-74.0567,40.7899]},{"place":"Durham, NC","center":[-78.8986,35.994]},{"place":"Tampa, FL","center":[-82.4584,27.9478]},{"place":"Troy, MI","center":[-83.1499,42.6056]},{"place":"Dallas, TX","center":[-96.7969,32.7763]},{"place":"Irving, TX","center":[-96.9489,32.814]},{"place":"Atlanta, GA","center":[-84.3902,33.7491]},{"place":"Iselin, NJ","center":[-74.3224,40.5754]},{"place":"Piscataway, NJ","center":[-74.466,40.5463]},{"place":"Princeton, NJ","center":[-74.6593,40.3493]},{"place":"Menlo Park, CA","center":[-122.1822,37.4538]},{"place":"Chandler, AZ","center":[-111.8408,33.3067]},{"place":"San Diego, CA","center":[-117.1628,32.7174]},{"place":"Cupertino, CA","center":[-122.0323,37.323]},{"place":"Palo Alto, CA","center":[-122.1634,37.4422]},{"place":"Redwood City, CA","center":[-122.2364,37.4852]},{"place":"Herndon, VA","center":[-77.3859,38.9695]},{"place":"Charlotte, NC","center":[-80.8431,35.2271]},{"place":"Jersey City, NJ","center":[-74.0776,40.7282]},{"place":"Richardson, TX","center":[-96.7297,32.9482]},{"place":"Pittsburgh, PA","center":[-79.9901,40.4417]},{"place":"Los Angeles, CA","center":[-118.2439,34.0544]},{"place":"Alpharetta, GA","center":[-84.2747,34.071]},{"place":"Austin, TX","center":[-97.7437,30.2711]},{"place":"Philadelphia, PA","center":[-75.1327,40.0115]},{"place":"Nashville, TN","center":[-86.7744,36.1622]},{"place":"Cambridge, MA","center":[-71.1056,42.3751]},{"place":"Minneapolis, MN","center":[-93.2655,44.9773]},{"place":"Mc Lean, VA","center":[-77.22,38.92]},{"place":"Fairfax, VA","center":[-77.3064,38.8462]},{"place":"Washington, DC","center":[-77.0366,38.895]},{"place":"Fremont, CA","center":[-121.9886,37.5483]},{"place":"Warren, NJ","center":[-74.5163,40.6084]},{"place":"Southborough, MA","center":[-71.5245,42.3057]},{"place":"Irvine, CA","center":[-117.826,33.6857]},{"place":"Farmington Hills, MI","center":[-83.324725,42.444317]},{"place":"Somerset, NJ","center":[-74.4885,40.4976]},{"place":"Newtown Square, PA","center":[-75.4008,39.9868]},{"place":"Bellevue, WA","center":[-122.1923,47.6144]},{"place":"Woburn, MA","center":[-71.1523,42.4793]},{"place":"Sterling, VA","center":[-77.4032,39.0016]},{"place":"San Mateo, CA","center":[-122.3091,37.5446]},{"place":"Charlestown, MA","center":[-71.062,42.3779]},{"place":"Plainsboro, NJ","center":[-74.6004,40.3334]},{"place":"Wilmington, DE","center":[-75.5466,39.7459]},{"place":"Saint Louis, MO","center":[-90.19,38.63]},{"place":"Brooklyn, NY","center":[-73.9496,40.6501]},{"place":"Round Rock, TX","center":[-97.6789,30.5082]},{"place":"Detroit, MI","center":[-83.0567,42.3487]},{"place":"Pleasanton, CA","center":[-121.8747,37.6624]},{"place":"Columbus, OH","center":[-83.0007,39.9623]},{"place":"Bentonville, AR","center":[-94.2088,36.3729]},{"place":"Omaha, NE","center":[-95.9379,41.2587]},{"place":"Southfield, MI","center":[-83.2219,42.4734]},{"place":"Ashburn, VA","center":[-77.4875,39.0437]},{"place":"Frisco, TX","center":[-96.8236,33.1507]},{"place":"Chantilly, VA","center":[-77.4305,38.8944]},{"place":"Milpitas, CA","center":[-121.9066,37.4283]},{"place":"Dublin, OH","center":[-83.1141,40.0992]},{"place":"Reston, VA","center":[-77.358,38.9584]},{"place":"Newtown, PA","center":[-74.9404,40.2296]},{"place":"Rockville, MD","center":[-77.1528,39.084]},{"place":"Miami, FL","center":[-80.1937,25.7743]},{"place":"Baltimore, MD","center":[-76.6108,39.2909]},{"place":"Phoenix, AZ","center":[-112.0773,33.4486]},{"place":"Louisville, KY","center":[-85.7594,38.2542]},{"place":"Basking Ridge, NJ","center":[-74.5493,40.7064]},{"place":"Richmond, VA","center":[-77.4343,37.5385]},{"place":"Duluth, GA","center":[-84.1441,34.0029]},{"place":"Schaumburg, IL","center":[-88.0834,42.0334]},{"place":"North Brunswick, NJ","center":[-74.482,40.454]},{"place":"Foster City, CA","center":[-122.278096,37.537391]},{"place":"Cincinnati, OH","center":[-84.5125,39.1015]},{"place":"Aliso Viejo, CA","center":[-117.7258,33.5761]},{"place":"Memphis, TN","center":[-90.0516,35.149]},{"place":"Cleveland, OH","center":[-81.6934,41.5052]},{"place":"Ann Arbor, MI","center":[-83.7312,42.2682]},{"place":"Novi, MI","center":[-83.4755,42.4806]},{"place":"Orlando, FL","center":[-81.379,28.5421]},{"place":"Waltham, MA","center":[-71.2358,42.3756]},{"place":"Shrewsbury, MA","center":[-71.7139,42.2971]},{"place":"Raleigh, NC","center":[-78.6391,35.7804]},{"place":"Coraopolis, PA","center":[-80.1667,40.5184]},{"place":"Denver, CO","center":[-104.9653,39.7348]},{"place":"Short Hills, NJ","center":[-74.3254,40.7479]}]34:[] 2f:{"id":"a988a6b35175cbbf","slug":"d3-group-and-rollup-sortby-get-topn","title":"d3 Group and Rollup SortBy, get topN","thumbnail":"c040a5e5364c6dee8b20c83a18fa6a4872570b1971cc34763ce867f5bf70e3f7","access_level":"public","create_time":"$D2020-09-24T04:45:31.880Z","update_time":"$D2020-09-27T05:12:52.351Z","view_time":null,"first_public_time":"$D2020-09-24T08:24:59.724Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"dce683c2e50a0b76","login":"t829702","name":"","avatar_url":"https://avatars-next.observableusercontent.com/f4bc3cc73efe18a34e58d121d3fa2fe8f759eb5a6a3764dd7e4178a905a1ae80","tier":"starter_2024"},"version":504,"publish_version":504,"role":null,"authored":false,"authors":[{"type":"individual","id":"4f91695597e4d559","login":"t829702","name":"","avatar_url":"https://avatars-next.observableusercontent.com/f4bc3cc73efe18a34e58d121d3fa2fe8f759eb5a6a3764dd7e4178a905a1ae80","tier":null}],"members":[{"type":"individual","id":"4f91695597e4d559","login":"t829702","name":"","avatar_url":"https://avatars-next.observableusercontent.com/f4bc3cc73efe18a34e58d121d3fa2fe8f759eb5a6a3764dd7e4178a905a1ae80","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"d3 Group and Rollup SortBy, get topN","cells":[{"id":0,"value":"md`# d3 Group and Rollup SortBy, get topN`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"md`The d3.group and d3.rollup are generally great helpers we want, but sometimes we want a summary of the data, like topN elements if sort by order X, Y, Z; let's try and see what can we get from the d3 and what can we make some additinoal helpers, for those who want to see the results, may jump to [the Key and Mapper Function Pattern](#keyMapperPattern)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md`Let's play with Mike's H1B employers data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"import { data } from \"@mbostock/2019-h-1b-employers\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3-array\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"md`After get the data and d3, load some more helpers from **lodash** and **@uwdata/data-utilities** are very useful`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"_ = require(\"lodash\") // lodash","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"import {printTable} from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"printTable( _.sampleSize(data, 10) ) // click run again (Shift-Enter) to see more samples from this dataset","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`This data has many columns, I picked this as a good example to play with multi-dimension folding.\n\nThe first questions I want to know is which states are the top ones have the most H1B employers?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"d3.group(\n data,\n o => o.State,\n o => o.Employer,\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"md`By default, Observable shows 20 entries from a larger set, we can clearly see the \"CA\" from the list with Map(4150) must be the largest, but then which State is the 2nd, and 3rd? That's not so obvious.\n\nOr if we ask, which top N States' top N cities have the most H1B employers? we can add one more key after the State`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"d3.group(\n data,\n o => o.State,\n o => o.City,\n o => o.Employer,\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"md`We can see the results at the top level is organized by State: \"AL\" has Map(32) cities, and \"CA\" has Map(304); then at \"CA\" State level, which cities have the most H1B employers?\n\nBy click to expand the Map(304) we can see it, seems to be \"SAN JOSE\" => Map(291) is the top City, but again, but so obvious which City is 2nd, and 3rd.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"md`the Map returned from d3.group or d3.rollup does not have a sort method, which is not so easy to sort and get a slice of top N.\n\nFortunately, d3 also provided d3.groups and d3.rollups to return the Array to play further`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"d3.groups(\n data,\n o => o.State,\n o => o.City,\n o => o.Employer,\n)\n .sort(([_a,a],[_b,b]) => d3.descending(a.length, b.length)) // here (a, b) are each State's cities Array\n .slice(0, 10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md`About this nested object, it's relatively easy to get it sorted at the top State level;\n\nBut then how about each City level?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"statsArr = d3.groups(\n data,\n o => o.State,\n o => o.City,\n o => o.Employer,\n)\n .sort(([_a,a],[_b,b]) => d3.descending(a.length, b.length)) // here (a, b) are each State's cities Array\n .slice(0, 10)\n .map(([_o, obj]) => [\n _o,\n obj .sort(([_a,a],[_b,b]) => d3.descending(a.length, b.length))\n .slice(0, 10),\n ])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"md`At each additional level, we can apply the same technique to sort and get top 10, but it's just not very intuitive; Can imagine if we do more than 3 levels of keys function, get even more deeply nested objects, would be more complicated if we still want to sort and get top N elements at each level`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"md`By the way, the answer for top City in CA is not San Jose, but San Franciscoo at 1st, San Jose 2nd, Los Angeles at 3rd.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"html`

The Top 10 States, and the Top 10 Cities of most H1B Employers for each state

${stateName}'s top ${stateStat.length} cities:\n
1. ${cityName.toLowerCase()} has ${cityStat.length} (H1B Employers)
\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"md`And, the arrays returned at each level is not so good for accessing, for example if want \"New York\"'s stats, we have to loop 2 levels, at State level to loop and find \"NY\", then at City, to loop and find \"New York\"`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"md`How can we turn back Map(...) at each level? Yes, we can do that with new Map constructor from the array of key value pairs, and because d3.groups returned Array instead of Map at all the levels, we have to manually create Map at all the levels`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"statsMap = new Map(d3.groups(\n data,\n o => o.State,\n o => o.City,\n o => o.Employer,\n)\n .sort(([_a,a],[_b,b]) => d3.descending(a.length, b.length)) // here (a, b) are each State's cities Array\n .slice(0, 10)\n .map(([_o, obj]) => [\n _o,\n new Map(\n obj .sort(([_a,a],[_b,b]) => d3.descending(a.length, b.length))\n .slice(0, 10)\n .map(([_o,o]) => [_o, new Map(o)]),\n )\n ])\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"md`then, to get New York's data would be one liner:\n\n~~~js\nstatsMap.get(\"NY\").get(\"NEW YORK\")\n~~~`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"keyMapperPattern = md`# the Key and Mapper Function Pattern`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"md`The Pattern is to get top N is a mapper function followed with \\`slice(0, N)\\`, but how can we make each key function and mapper function to be written together?\n\nSomething like\n\n~~~js\nd3.group(\n data,\n [ key1, mapper1 ],\n [ key2, mapper2 ],\n [ key3, mapper3 ],\n key4, // same as before, if omitted, the mapper would be default (do nothing)\n)\n~~~\n\nCan we implement such a \\`group\\` function?`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"md`From the [d3 group implementation](https://github.com/d3/d3-array/blob/master/src/group.js#L3-L5), we can see all the family of **\\`[ group, groups, rollup, rollups ]\\`** are all relying on \\`function nest\\`;\n\nBut the nest is not exported, let's copy the code here: it's an internally recursive function regroup\n\n~~~js\nfunction nest(values, map, reduce, keys) {\n return (function regroup(values, i) {\n if (i >= keys.length) return reduce(values);\n const groups = new Map();\n const keyof = keys[i++];\n let index = -1;\n for (const value of values) {\n const key = keyof(value, ++index, values);\n const group = groups.get(key);\n if (group) group.push(value);\n else groups.set(key, [value]);\n }\n for (const [key, values] of groups) {\n groups.set(key, regroup(values, i));\n }\n return map(groups);\n })(values, 0);\n}\n~~~\n\nWe make a slightly changed one:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"function nest(values, map, reduce, ...keys) {\n return (function regroup(values, i) {\n if (i >= keys.length) return reduce(values);\n const groups = new Map();\n const keyofdata = keys[i++];\n let [ keyof, mapper ] = Array.isArray(keyofdata) ?\n keyofdata : [ keyofdata, map ]; // this is the line changed\n if (!mapper) mapper = map;\n let index = -1;\n for (const value of values) {\n const key = keyof(value, ++index, values);\n const group = groups.get(key);\n if (group) group.push(value);\n else groups.set(key, [value]);\n }\n for (const [key, values] of groups) {\n groups.set(key, regroup(values, i));\n }\n return mapper(groups);\n })(values, 0);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"// then redefine a group\nfunction group(values, ...keys) {\n return nest(values, _.identity, _.identity, ...keys); // the lodash's identity is exactly same, but d3.identity is not exported\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"group(\n data,\n o => o.State,\n o => o.City,\n o => o.Employer,\n) // got exactly same as d3.group","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"// then put the mapper whenever needed, can be a getTopN or any other kind of mapper\n\ngroup(\n data,\n [\n o => o.State,\n items => new Map(\n Array.from(items)\n .sort(([_a,a],[_b,b]) => d3.descending(_.size(a), _.size(b))) // lodash .size to get .size or .length\n .slice(0, 10)\n ),\n ],\n o => o.City,\n o => o.Employer,\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"md`However, if we want to use this pattern to group more levels, if we already get topN for lower levels, then topper level's sort function will not work, because all elements will probably get same size of N; Then, we have to bring in the rollup function, it is the same implementation as d3.rollup, but just use the modified low level \\`nest\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"// but if want 2 above levels, need the rollup to get more aggregated summary from lower levels objects\n\nfunction rollup(values, reduce, ...keys) {\n return nest(values, _.identity, reduce, ...keys);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"md`Then, with its reducer function, we can rollup the original size information into the reduced object, whatever it's a Map or an Array, we can use Object.assign to let it carry some more information about the lower level statistics.\n\nBelow is the same top 10 of States, and top 10 cities of each State's top H1B employers.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"md`In this example, in the reducer function, it can collect the \\`employersCount\\` and \\`approvalsCount\\` of each low level group, then roll it up in each level of Key and Mapper function, within each level's mapper, it can easily do sort by \\`employersCount\\` also easy change to sort by \\`approvalsCount\\`;\n\nSuprisingly, NY state dropped to the 4th, with a total \\`approvalsCount\\` of 5930. This data might be more interesting to visualize in some charts or Geo map (with employersCount or approvalsCount as different sizes of circles), but is a topic beyond scope of this writing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"html`

statesRollupByApprovalsCount

${stateName}, with ${stateStat.employersCount} h1b employers, ${stateStat.approvalsCount} approvals in Total;\n
1. ${cityName.toLowerCase()}, with ${cityStat.employersCount} h1b employers, ${cityStat.approvalsCount} approvals
\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"md`\nAbove top 10 States' top 10 cities is not the country's top 100,\n\nIf the top 100 H1B employers cities are wanted, that can be achieved by a different key function, to combine City and State. Here it comes \"New York, NY\" => Map(1701) is Number1, followed by \"San Francisco, CA\" => Map(539).\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"md`Re-organize all the top 100 cities' employers, to be able to group again by State and by City`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"top100CitiesEmployers = Array.from(\n statsMapTop100Cities,\n ([name,obj]) => Array.from(\n obj, ([empName,empObj]) => empObj)\n) .flat(2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"JSON.stringify(Array.from(\n statsMapTop100Cities,\n ([name,obj]) => name,\n))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"md`Group by State and by City`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"group(\n top100CitiesEmployers,\n o => o.State,\n o => o.City,\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"{\n // base map of the United States\n const map = vl.markGeoshape({fill: '#ddd', stroke: '#fff', strokeWidth: 1})\n .data(vl.topojson('data/us-10m.json').feature('states'));\n\n // shared data reference for lookup transforms\n const foreign = vl.data(statsMapTop100Cities).key('iata').fields('latitude', 'longitude');\n\n const points = vl.markCircle()\n .data( placesStat )\n .transform(\n vl.calculate(\"datum.center[0]\").as(\"longitude\"),\n vl.calculate(\"datum.center[1]\").as(\"latitude\"),\n // vl.lookup(\"size\").from(foreign),\n )\n .encode(\n vl.latitude().fieldQ('latitude'),\n vl.longitude().fieldQ('longitude'),\n );\n\n return vl.layer(map, points)\n .project(vl.projection('albersUsa'))\n .width(width) .height(width*3/4) // .height(500)\n .config({view: {stroke: null}})\n .render();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"md`# Conclusion\n\nd3.group(s) d3.rollup(s) are good utils to operate on data, while in some deeply nesting cases it can be enhanced to allow pass in a more flexible mapper functions; not sure will it be a good feature for the general, please like, and comment`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"md`## Appendix`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"import {vl} from '@vega/vega-lite-api'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"