Add partition mode to treemap (#284)

uber · Mar 7, 2017 · 02bce16 · 02bce16
1 parent 64e87fe
commit 02bce16
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 54 deletions.
diff --git a/showcase/index.js b/showcase/index.js
@@ -53,7 +53,6 @@ import VoronoiLineChart from './plot/voronoi-line-chart';
 
 import SimpleTreemap from './treemap/simple-treemap';
 import TreemapExample from './treemap/dynamic-treemap';
-import CirclePacking from './treemap/circle-packed-treemap';
 
 import SimpleRadialChart from './radial-chart/simple-radial-chart';
 import DonutChartExample from './radial-chart/donut-chart';
@@ -249,10 +248,6 @@ const App = (
         <h3>Animated Treemap</h3>
         <TreemapExample />
       </section>
-      <section>
-        <h3>Circle Packing</h3>
-        <CirclePacking />
-      </section>
     </article>
 
     <article id="legends">

diff --git a/showcase/treemap/circle-packed-treemap.js b/showcase/treemap/circle-packed-treemap.js
diff --git a/showcase/treemap/simple-treemap.js b/showcase/treemap/simple-treemap.js
@@ -24,17 +24,55 @@ import Treemap from 'treemap';
 
 import D3FlareData from './d3-flare-example.json';
 
+const MODE = [
+  'circlePack',
+  'partition',
+  'partition-pivot',
+  'squarify',
+  'resquarify',
+  'slice',
+  'dice',
+  'slicedice',
+  'binary'
+];
+
 export default class SimpleTreemapExample extends React.Component {
+  state = {
+    modeIndex: 0
+  }
+
+  updateModeIndex = increment => () => {
+    const newIndex = this.state.modeIndex + (increment ? 1 : -1);
+    const modeIndex = newIndex < 0 ? MODE.length - 1 : newIndex >= MODE.length ? 0 : newIndex;
+    this.setState({modeIndex});
+  }
 
   render() {
+    const {modeIndex} = this.state;
     return (
-      <Treemap
-        className="nested-tree-example"
-        colorType="literal"
-        data={D3FlareData}
-        mode="slicedice"
-        height={300}
-        width={350}/>
+      <div className="simple-treemap-example">
+        <div className="simple-treemap-example-controls">
+          <div
+            className="simple-treemap-example-button"
+            onClick={this.updateModeIndex(false)}>
+            {'PREV MODE'}
+          </div>
+          <div> {MODE[modeIndex]} </div>
+          <div
+            className="simple-treemap-example-button"
+            onClick={this.updateModeIndex(true)}>
+            {'NEXT MODE'}
+          </div>
+        </div>
+        <Treemap
+          animation
+          className="nested-tree-example"
+          colorType="literal"
+          data={D3FlareData}
+          mode={MODE[modeIndex]}
+          height={300}
+          width={350}/>
+      </div>
     );
   }
 

diff --git a/src/styles/examples.scss b/src/styles/examples.scss
@@ -316,9 +316,32 @@ article {
   }
 }
 
-.circle-packed-treemap-example {
-  .rv-treemap__leaf--circle {
-    border: thin solid #ddd;
+.simple-treemap-example {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0 10px;
+
+  .rv-treemap__leaf {
+    border: thin solid rgba(#ddd, .5);
+  }
+
+  .simple-treemap-example-controls {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 0;
+    width: 75%;
+  }
+
+  .simple-treemap-example-button {
+    border: thin solid #333;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 10px;
+    font-weight: 600;
+    padding: 5px 10px;
   }
 }
 

diff --git a/src/treemap/index.js b/src/treemap/index.js
@@ -22,6 +22,7 @@ import React, {PropTypes} from 'react';
 import {
   hierarchy,
   pack,
+  partition,
   treemapSquarify,
   treemapResquarify,
   treemapSlice,
@@ -47,7 +48,9 @@ const TREEMAP_TILE_MODES = {
 };
 
 const TREEMAP_LAYOUT_MODES = [
-  'circlePack'
+  'circlePack',
+  'partition',
+  'partition-pivot'
 ];
 
 const NOOP = d => d;
@@ -131,6 +134,24 @@ class Treemap extends React.Component {
    */
   _getNodesToRender() {
     const {data, height, width, mode, padding} = this.props;
+    if (data && (mode === 'partition' || mode === 'partition-pivot')) {
+      const partitionFunction = partition()
+          .size([width, height])
+          .padding(padding);
+      const structuredInput = hierarchy(data)
+        .sum(d => d.size);
+      const mappedNodes = partitionFunction(structuredInput).descendants();
+      if (mode === 'partition-pivot') {
+        return mappedNodes.map(node => ({
+          ...node,
+          x0: node.y0,
+          x1: node.y1,
+          y0: node.x0,
+          y1: node.x1
+        }));
+      }
+      return mappedNodes;
+    }
     if (data && mode === 'circlePack') {
       const packingFunction = pack()
           .size([width, height])