Basic Treemap
The basic Treemap requires `items`, a key accessor function, a value accessor function, and a color mapping function.
It renders a hierarchical data structure as a set of nested rectangles.
Usage
<Treemap
{items}
{keyToColorFn}
{keyToColorLabelFn}
valueAccessor={getDocCount}
/>Props
items
- (12) [ {…} ,{…} ,{…} ,{…} ,{…} , … ]
- 0: { key: "2007 onwards" ,doc_count: 21230 }
- 1: { key: "1950-1966" ,doc_count: 15088 }
- 2: { key: "England and Wales: before 1900" ,doc_count: 12206 }
- 3: { key: "1965-1975" ,doc_count: 10334 }
- 4: { key: "1930-1949" ,doc_count: 7671 }
- 5: { key: "1983-1991" ,doc_count: 5652 }
- 6: { key: "1900-1929" ,doc_count: 5572 }
- 7: { key: "1976-1983" ,doc_count: 4656 }
- 8: { key: "1996-2002" ,doc_count: 3708 }
- 9: { key: "1991-1998" ,doc_count: 3464 }
- 10: { key: "2003-2007" ,doc_count: 2769 }
- 11: { key: "Scotland: before 1919" ,doc_count: 1836 }
- length: 12
keyToColorFn
- ƒ scale(d)
- length: 1
- name: "scale"
- prototype: { constructor: ƒ }
- [[Function]]: function scale(d) { let i = index.get(d); if (i === undefined) { if (unknown !== implicit) return unknown; index.set(d, i = domain.push(d) - 1); } return range[i % range.length]; }
- [[Prototype]]: ƒ ()
keyToColorLabelFn
- ƒ scale(d)
- length: 1
- name: "scale"
- prototype: { constructor: ƒ }
- [[Function]]: function scale(d) { let i = index.get(d); if (i === undefined) { if (unknown !== implicit) return unknown; index.set(d, i = domain.push(d) - 1); } return range[i % range.length]; }
- [[Prototype]]: ƒ ()
valueAccessor
- ƒ (b)
- length: 1
- prototype: { constructor: ƒ }
- [[Function]]: function (b) { return isRightCurry ? fn.call(this, b, a) : fn.call(this, a, b); }
- [[Prototype]]: ƒ ()