Supergroup.js를 사용한 궁극의 인메모리 데이터 수집 조작

메모리 내 데이터 조작으로 인해 스파게티 코드가 쌓이는 경우가 많습니다. 조작 자체는 충분히 간단할 수 있습니다. 그룹화, 집계, 계층 생성 및 계산 수행; 그러나 데이터 munging 코드가 작성되고 결과가 필요한 응용 프로그램 부분으로 보내지면 관련 요구 사항이 계속 발생합니다. 응용 프로그램의 다른 부분에서 유사한 데이터 변환이 필요할 수 있거나 메타데이터, 컨텍스트, 상위 또는 하위 데이터 등 더 자세한 정보가 필요할 수 있습니다. 특히 시각화 또는 복잡한 보고 응용 프로그램에서 데이터를 특정 구조로 구부린 후 필요한 경우 도구 설명이나 동기화된 하이라이트 또는 드릴다운이 변환된 데이터에 예상치 못한 압력을 가한다는 것을 깨닫게 됩니다. 다음을 통해 이러한 요구 사항을 해결할 수 있습니다.

1. 변환된 데이터가 거대하고 보기 흉하지만 결국 방문하는 애플리케이션의 구석구석 요구 사항을 충족할 때까지 변환된 데이터에 더 많은 세부 정보와 수준을 추가합니다.
2. 새로운 세부 정보를 가져오기 위해 이미 처리된 일부 노드를 전역 데이터 소스에 조인해야 하는 새로운 변환 기능을 작성합니다.
3. 모든 컨텍스트를 처리하는 방법을 어떻게든 알고 있는 복잡한 객체 클래스 설계

나처럼 20년 또는 30년 동안 데이터 중심 소프트웨어를 구축한 후, 누군가는 그들이 동일한 문제 세트를 계속해서 해결하고 있다는 의심을 갖기 시작합니다. 우리는 복잡한 루프, 목록 이해, 데이터베이스 분석 기능, map 또는 groupBy 기능 또는 완전한 보고 엔진을 제공합니다. 우리의 기술이 발전함에 따라 우리는 데이터 통합 ​​코드의 모든 덩어리를 영리하고 간결하게 만드는 데 능숙해졌지만 스파게티는 여전히 급증하는 것 같습니다.

이 기사에서는 강력한 인메모리 데이터 수집 조작, 그룹화 및 집계 기능을 갖춘 JavaScript 라이브러리 Supergroup.js를 살펴보고 이 라이브러리가 제한된 데이터세트에서 몇 가지 일반적인 조작 문제를 해결하는 데 어떻게 도움이 되는지 살펴보겠습니다.

문제

Toptal에 처음 참여하는 동안, 나는 내가 추가하고 있는 코드베이스의 API와 데이터 관리 루틴이 절망적으로 과도하게 지정되었다는 것을 첫날부터 확신했습니다. 마케팅 데이터 분석을 위한 D3.js 어플리케이션이었습니다. 애플리케이션에는 이미 매력적인 그룹화/누적 막대 차트 시각화가 있었고 구축하려면 등치 맵 시각화가 필요했습니다. 막대 차트를 통해 사용자는 내부적으로 x0, x1, y0 및 y1이라고 하는 2, 3 또는 4개의 임의 차원을 표시할 수 있으며 x1 및 y1은 선택 사항입니다.

범례, 필터, 툴팁, 제목의 구성 및 합계 또는 연도별 차이 계산에서 x0, x1, y0 및 y1은 코드 전체에서 참조되었으며 코드 전체에서 유비쿼터스 처리할 조건부 논리였습니다. 선택적 차원의 존재 여부.

하지만 더 나쁠 수도 있습니다. 코드는 특정 기본 데이터 차원(예: 연도, 예산, 계층, 제품 범주 등)을 직접 참조했을 수 있습니다. 오히려 이 그룹화/누적 막대 차트의 표시 차원으로 일반화되었습니다. 그러나 x0, x1, y0 및 y1의 차원이 의미가 없는 다른 차트 유형이 요구 사항이 되었을 때 코드의 상당 부분을 완전히 다시 작성해야 했습니다(범례, 필터, 도구 설명, 제목을 처리하는 코드). , 요약 계산, 차트 구성 및 렌더링.

아무도 고객에게 이렇게 말하고 싶어하지 않습니다. "여기에 온 첫날이지만, 요청한 것을 구현하기 전에 내가 직접 작성한 Javascript 데이터 조작 라이브러리를 사용하여 모든 코드를 리팩토링할 수 있나요?" 어쨌든 코드를 리팩토링하기 직전인 클라이언트 프로그래머를 소개받았을 때 운이 좋게도 나는 이 당혹감에서 벗어났습니다. 흔하지 않은 열린 마음과 은혜로 클라이언트는 일련의 쌍 프로그래밍 세션을 통해 리팩토링 프로세스에 나를 초대했습니다. 그는 기꺼이 Supergroup.js를 시도했고 몇 분 안에 우리는 엄청나게 많은 코드를 Supergroup에 대한 간단한 호출로 대체하기 시작했습니다.

우리가 코드에서 본 것은 계층적 또는 그룹화된 데이터 구조를 다룰 때 발생하는 엉킴의 전형이었습니다. 특히 데모보다 커지면 D3 애플리케이션에서 그렇습니다. 이러한 문제는 일반적으로 보고 응용 프로그램, 특정 화면이나 레코드에 대한 필터링 또는 드릴링을 포함하는 CRUD 응용 프로그램, 분석 도구, 시각화 도구, 데이터베이스를 필요로 하는 데 충분한 데이터가 사용되는 거의 모든 응용 프로그램에서 발생합니다.

메모리 내 조작

예를 들어 패싯 검색 및 CRUD 작업을 위한 Rest API를 사용하면 모든 검색 매개변수에 대한 필드 및 값(레코드 수 포함) 세트를 가져오기 위한 하나 이상의 API 호출로 끝날 수 있습니다. 특정 레코드, 보고 등을 위해 레코드 그룹을 가져오기 위한 기타 호출. 그런 다음 사용자 선택 또는 권한에 따라 임시 필터를 적용해야 하므로 이 모든 것이 복잡해질 수 있습니다.

데이터베이스가 수만 또는 수십만 개의 레코드를 초과할 가능성이 없거나 해당 크기의 데이터 세트로 즉각적인 관심 영역을 제한하는 쉬운 방법이 있는 경우 복잡한 Rest API 전체를 버릴 수 있습니다(권한 부분 제외 ) "모든 기록 가져오기"라는 전화 한 통을 받습니다. 우리는 빠른 압축, 빠른 전송 속도, 프론트 엔드에 충분한 메모리, 빠른 Javascript 엔진이 있는 세상에 살고 있습니다. 클라이언트와 서버가 이해하고 유지해야 하는 복잡한 쿼리 체계를 설정하는 것은 종종 불필요합니다. 대부분의 경우 RDBMS의 모든 최적화가 필요하지 않기 때문에 사람들은 JSON 레코드 컬렉션에서 직접 SQL 쿼리를 실행하는 라이브러리를 작성했습니다. 하지만 그마저도 과하다. 엄청나게 거창하게 들릴 위험이 있지만 Supergroup은 대부분의 경우 SQL보다 사용하기 쉽고 강력합니다.

Supergroup은 기본적으로 스테로이드의 d3.nest, underscore.groupBy 또는 underscore.nest입니다. 후드 아래에서는 그룹화 작업에 lodash의 groupBy를 사용합니다. 핵심 전략은 원본 데이터의 모든 부분을 메타데이터로 만들고 모든 노드에서 트리의 나머지 부분에 대한 링크를 즉시 액세스할 수 있도록 하는 것입니다. 모든 노드 또는 노드 목록은 구문 설탕의 웨딩 케이크로 오버로드되어 트리의 어느 위치에서나 알고 싶은 대부분의 모든 것이 짧은 표현으로 제공됩니다.

행동하는 슈퍼그룹

Supergroup의 구문론적 달콤함을 보여주기 위해 Shan Carter의 Mister Nester 사본을 하이재킹했습니다. d3.nest를 사용하는 간단한 2단계 중첩은 다음과 같습니다.

 d3.nest() .key(function(d) { return d.year; }) .key(function(d) { return d.fips; }) .map(data);

Supergroup과 동등한 것은 다음과 같습니다.

 _.supergroup(data,['year','fips']).d3NestMap();

거기에서 d3NestMap()에 대한 후행 호출은 Supergroup 출력을 d3의 nest.map()과 동일한 형식(내 의견으로는 그다지 유용하지 않음)으로 넣습니다.

 { "1970": { "6001": [ { "fips": "6001", "totalpop": "1073180", "pctHispanic": "0.126", "year": "1970" } ], "6003": [ { "fips": "6003", "totalpop": "510", "pctHispanic": "NA", "year": "1970" } ], ... } }

D3 선택은 맵이 아니라 배열에 연결되어야 하기 때문에 "별로 유용하지 않음"이라고 말합니다. 이 지도 데이터 구조에서 "노드"는 무엇입니까? "1970" 또는 "6001"은 최상위 또는 두 번째 레벨 맵에 대한 문자열 및 키입니다. 따라서 노드는 키가 가리키는 것이 됩니다. "1970"은 두 번째 수준 맵을 가리키고 "6001"은 원시 레코드 배열을 가리킵니다. 이 맵 중첩은 콘솔에서 읽을 수 있고 값을 조회하는 데 문제가 없지만 D3 호출의 경우 배열 데이터가 필요하므로 nest.map() 대신 nest.entries()를 사용합니다.

 [ { "key": "1970", "values": [ { "key": "6001", "values": [ { "fips": "6001", "totalpop": "1073180", "pctHispanic": "0.126", "year": "1970" } ] }, { "key": "6003", "values": [ { "fips": "6003", "totalpop": "510", "pctHispanic": "NA", "year": "1970" } ] }, ... ] }, ... ]

이제 키/값 쌍의 중첩 배열이 있습니다. 1970 노드에는 "1970"의 키와 두 번째 수준 키/값 쌍의 배열로 구성된 값이 있습니다. 6001은 또 다른 키/값 쌍입니다. 키는 그것을 식별하는 문자열이기도 하지만 값은 원시 레코드의 배열입니다. 이러한 두 번째 리프 수준 노드와 리프 수준 노드를 트리 상위 노드와 다르게 처리해야 합니다. 그리고 노드 자체에는 "1970"이 연도이고 "6001"이 fips 코드이거나 1970이 이 특정 6001 노드의 부모라는 증거가 없습니다. Supergroup이 이러한 문제를 해결하는 방법을 보여주겠지만 먼저 Supergroup 호출의 즉각적인 반환 값을 살펴보겠습니다. 언뜻보기에는 최상위 "키"의 배열 일뿐입니다.

 _.supergroup(data,['year','fips']); // [ 1970, 1980, 1990, 2000, 2010 ]

"좋아요."라고 당신은 말합니다. "그런데 나머지 데이터는 어디 있지?" Supergroup 목록의 문자열 또는 숫자는 실제로 더 많은 속성과 메서드로 오버로드된 문자열 또는 숫자 개체입니다. 리프 수준 위에 있는 노드의 경우 두 번째 수준 노드의 다른 Supergroup 목록을 포함하는 children 속성("children"이 기본 이름, 다른 이름으로 부를 수 있음)이 있습니다.

 _.supergroup(data,['year','fips'])[0].children; // [ 6001, 6003, 6005, 6007, 6009, 6011, ... ] 

작동하는 툴팁 기능

다른 기능과 이 모든 것이 어떻게 작동하는지 보여주기 위해 D3를 사용하여 간단한 중첩 목록을 만들고 목록의 모든 노드에서 작동할 수 있는 유용한 도구 설명 기능을 만드는 방법을 살펴보겠습니다.

 d3.select('body') .selectAll('div.year') .data(_.supergroup(data,['year','fips'])) .enter() .append('div').attr('class','year') .on('mouseover', tooltip) .selectAll('div.fips') .data(function(d) { return d.children; }) .enter() .append('div').attr('class','fips') .on('mouseover', tooltip); function tooltip(node) { // comments show values for a second-level node var typeOfNode = node.dim; // fips var nodeValue = node.toString(); // 6001 var totalPopulation = node.aggregate(d3.sum, 'totalpop'); // 1073180 var pathToRoot = node.namePath(); // 1970/6001 var fieldPath = node.dimPath(); // year/fips var rawRecordCount = node.records.length; var parentPop = node.parent.aggregate(d3.sum, 'totalpop'); var percentOfGroup = 100 * totalPopulation / parentPop; var percentOfAll = 100 * totalPopulation / node.path()[0].aggregate(d3.sum,'totalPop'); ... };

이 도구 설명 기능은 깊이에 관계없이 거의 모든 노드에서 작동합니다. 최상위 노드에는 부모가 없으므로 이를 해결하기 위해 다음과 같이 할 수 있습니다.

 var byYearFips = _.supergroup(data,['year','fips']); var root = byYearFips.asRootVal();

이제 모든 Year 노드의 부모인 루트 노드가 있습니다. 우리는 이것으로 아무 것도 할 필요가 없지만 이제 node.parent가 가리킬 것이 있기 때문에 툴팁이 작동할 것입니다. 그리고 전체 데이터 세트를 나타내는 노드를 가리킬 것으로 예상되었던 node.path()[0]이 실제로 그렇게 합니다.

위의 예에서 명확하지 않은 경우 namePath, dimPath 및 path는 루트에서 현재 노드까지의 경로를 제공합니다.

 var byYearFips = _.supergroup(data,['year','fips']); // BTW, you can give a delimiter string to namePath or dimPath otherwise it defaults to '/': byYearFips[0].children[0].namePath(' --> '); // ==> "1970 --> 6001" byYearFips[0].children[0].dimPath(); // ==> "year/fips" byYearFips[0].children[0].path(); // ==> [1970,6001] // after calling asRootVal, paths go up one more level: var root = byYearFips.asRootVal('Population by Year/Fips'); // you can give the root node a name or it defaults to 'Root' byYearFips[0].children[0].namePath(' --> '); // ==> undefined byYearFips[0].children[0].dimPath(); // ==> "root/year/fips" byYearFips[0].children[0].path(); // ==> ["Population by Year/Fips",1970,6001] // from any node, .path()[0] will point to the root: byYearFips[0].children[0].path()[0] === root; // ==> true

필요할 때 제자리에서 집계

위의 툴팁 코드도 "집계" 방법을 사용했습니다. "aggregate"는 단일 노드에서 호출되며 두 개의 매개변수를 사용합니다.

1. 배열(일반적으로 숫자)을 예상하는 집계 함수입니다.
2. 해당 노드 아래에 그룹화된 레코드에서 뽑아낼 필드의 필드 이름 또는 각 레코드에 적용할 함수입니다.

목록(최상위 수준의 그룹 목록 또는 모든 노드의 하위 그룹)에 대한 "집계" 편의 방법도 있습니다. 목록이나 지도를 반환할 수 있습니다.

 _.supergroup(data,'year').aggregates(d3.sum,'totalpop'); // ==> [19957304,23667902,29760021,33871648,37253956] _.supergroup(data,'year').aggregates(d3.sum,'totalpop','dict'); // ==> {"1970":19957304,"1980":23667902,"1990":29760021,"2000":33871648,"2010":37253956}

지도처럼 작동하는 배열

d3.nest를 사용하면 앞서 말했듯이 .map() 대신 .entries()를 사용하는 경향이 있습니다. "지도"를 사용하면 배열에 의존하는 모든 D3(또는 밑줄) 기능을 사용할 수 없기 때문입니다. 그러나 .entries()를 사용하여 배열을 생성할 때 키 값으로 간단한 조회를 수행할 수 없습니다. 물론 Supergroup은 원하는 구문 설탕을 제공하므로 단일 값을 원할 때마다 전체 배열을 헤매지 않아도 됩니다.

 _.supergroup(data,['year','fips']).lookup(1980); // ==> 1980 _.supergroup(data,['year','fips']).lookup([1980,6011]).namePath(); // ==> "1980/6011"

시간에 따른 노드 비교

노드의 .previous() 메서드를 사용하면 슈퍼그룹 목록의 이전 노드에 액세스할 수 있습니다. .sort( ) 또는 .sortBy( ) .previous()를 호출하기 전에 노드가 올바른 순서인지 확인하기 위해 슈퍼그룹 목록(주어진 노드의 자식 목록 포함)에 추가합니다. 다음은 fips 지역별 인구의 연간 변화를 보고하는 몇 가지 코드입니다.

 _.chain(data) .supergroup(['fips','year']) .map(function(fips) { return [fips, _.chain(fips.children.slice(1)) .map(function(year) { return [year, year.aggregate(d3.sum,'totalpop') + ' (' + Math.round( (year.aggregate(d3.sum, 'totalpop') / year.previous().aggregate(d3.sum,'totalpop') - 1) * 100) + '% change from ' + year.previous() + ')' ]; }).object().value() ] }).object().value(); ==> { "6001": { "1980": "1105379 (3% change from 1970)", "1990": "1279182 (16% change from 1980)", "2000": "1443741 (13% change from 1990)", "2010": "1510271 (5% change from 2000)" }, "6003": { "1980": "1097 (115% change from 1970)", "1990": "1113 (1% change from 1980)", "2000": "1208 (9% change from 1990)", "2010": "1175 (-3% change from 2000)" }, ... }

D3.js 계층 구조 레이아웃에 대한 테이블 형식 데이터

Supergroup은 내가 여기에서 지금까지 보여준 것보다 훨씬 더 많은 일을 합니다. d3.layout.hierarchy를 기반으로 하는 D3 시각화의 경우 D3 갤러리의 예제 코드는 일반적으로 트리 형식의 데이터로 시작합니다(예: 이 Treemap 예제). Supergroup을 사용하면 d3.layout.hierarchy 시각화를 위해 준비된 표 형식 데이터를 쉽게 얻을 수 있습니다(예). 필요한 것은 .asRootVal()에 의해 반환된 루트 노드와 root.addRecordsAsChildrenToLeafNodes()를 실행하는 것뿐입니다. d3.layout.hierarchy는 하위 노드의 최하위 수준이 원시 레코드의 배열일 것으로 예상합니다. addRecordsAsChildrenToLeafNodes는 슈퍼그룹 트리의 리프 노드를 가져와 .records 배열을 .children 속성에 복사합니다. Supergroup이 일반적으로 좋아하는 방식은 아니지만 트리맵, 클러스터, 파티션 등에 대해서는 잘 작동합니다(d3.layout.hierarchy 문서).

트리의 모든 노드를 단일 배열로 반환하는 d3.layout.hierarchy.nodes 메서드와 마찬가지로 Supergroup은 .descendants()를 제공하여 특정 노드에서 시작하는 모든 노드를 가져오고 .flattenTree()가 모든 노드를 시작하도록 제공합니다. 일반 수퍼그룹 목록에서 .leafNodes()를 사용하여 리프 노드의 배열만 가져옵니다.

다중 값 필드로 그룹화 및 집계

철저한 세부 사항에 대해 설명하지 않고 Supergroup에는 덜 일반적이지만 특별 대우를 받을 만큼 충분히 일반적으로 발생하는 상황을 처리하기 위한 몇 가지 기능이 있다는 점을 언급하겠습니다.

때로는 둘 이상의 값을 가질 수 있는 필드를 기준으로 그룹화하려는 경우가 있습니다. 관계형 또는 테이블 형식에서 다중값 필드는 일반적으로 발생하지 않아야 하지만(첫 번째 정규 형식을 깨짐) 유용할 수 있습니다. Supergroup이 이러한 경우를 처리하는 방법은 다음과 같습니다.

 var bloggers = [ { name:"Ridwan", profession:["Programmer"], articlesPublished:73 }, { name:"Sigfried", profession:["Programmer","Spiritualist"], articlesPublished:2 }, ]; // the regular way _.supergroup(bloggers, 'profession').aggregates(_.sum, 'articlesPublished','dict'); // ==> {"Programmer":73,"Programmer,Spiritualist":2} // with multiValuedGroups _.supergroup(bloggers, 'profession',{multiValuedGroups:true}).aggregates(_.sum, 'articlesPublished','dict'); // ==> {"Programmer":75,"Spiritualist":2}

보시다시피 multiValuedGroup을 사용하면 Sigfried 레코드가 두 번 계산되기 때문에 그룹 목록에 게시된 모든 기사의 합계가 실제 총 출판된 기사 수보다 높습니다. 때로는 이것이 원하는 동작입니다.

계층적 테이블을 트리로 변환

때때로 나타날 수 있는 또 다른 것은 레코드 간의 명시적 부모/자식 관계를 통해 트리를 나타내는 테이블 구조입니다. 다음은 작은 분류의 예입니다.

 tree = _.hierarchicalTableToTree(taxonomy, 'p', 'c'); // top-level nodes ==> ["animal","plant"] _.invoke(tree.flattenTree(), 'namePath'); // call namePath on every node ==> ["animal", "animal/mammal", "animal/mammal/primate", "animal/mammal/primate/monkey", "animal/mammal/primate/ape", "animal/mammal/primate/ape/chimpanzee", "animal/mammal/primate/ape/gorilla", "animal/mammal/primate/ape/me", "animal/mammal/bovine", "animal/mammal/bovine/cow", "animal/mammal/bovine/ox", "animal/reptile", "animal/fish", "animal/bird", "plant", "plant/tree", "plant/tree/oak", "plant/tree/oak/pin oak", "plant/tree/maple", "plant/grass"]

결론

그래서, 우리는 그것을 가지고 있습니다. 저는 지난 3년 동안 작업한 모든 Javascript 프로젝트에서 Supergroup을 사용하고 있습니다. 데이터 중심 프로그래밍에서 지속적으로 발생하는 많은 문제를 해결한다는 것을 알고 있습니다. API와 구현은 전혀 완벽하지 않으며 저와 함께 작업하는 데 관심이 있는 공동 작업자를 찾게 되어 기쁩니다.

해당 클라이언트 프로젝트에서 며칠 동안 리팩토링한 후 함께 작업하고 있던 프로그래머인 Dave로부터 다음과 같은 메시지를 받았습니다.

Dave: 나는 슈퍼그룹의 꽤 큰 팬이라고 말해야 합니다. 그것은 톤을 청소하고 있습니다.

지그프리드: 야. 언젠가는 후기를 부탁드리겠습니다. :).

데이브: 하하 절대적으로.

스핀을 주고 질문이나 문제가 발생하면 댓글 섹션에 한 줄을 추가하거나 GitHub 리포지토리에 문제를 게시하세요.