How to use @vx/hierarchy - 2 common examples
To help you get started, we’ve selected a few @vx/hierarchy examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
hshoff / vx / packages / vx-demo / src / components / tiles / treemap.js View on Github 
height,
// events = false,
margin = {
top: 0,
left: 30,
right: 40,
bottom: 80,
},
} = this.props;
const { tileMethod } = this.state;
if (width < 10) return null;
const yMax = height - margin.top - margin.bottom;
const root = hierarchy(data).sort((a, b) => b.value - a.value);
return (
<div>
<label>tile method</label>{' '}
<select> e.stopPropagation()}
onChange={e => this.setState({ tileMethod: e.target.value })}
value={tileMethod}
>
{Object.keys(tileMethods).map(tile => (
<option value="{tile}">
{tile}
</option>
))}
</select>
<div></div></div>treemapSliceDice,
} from '@vx/hierarchy';
import { shakespeare } from '@vx/mock-data';
import { scaleLinear } from '@vx/scale';
const blue = '#0373d9';
const green = '#00ff70';
const bg = '#3436b8';
const colorScale = scaleLinear({
domain: [0, Math.max(...shakespeare.map(d => d.size || 0))],
range: [blue, green],
});
const data = stratify()
.id(d => d.id)
.parentId(d => d.parent)(shakespeare)
.sum(d => d.size || 0);
const tileMethods = {
treemapSquarify,
treemapBinary,
treemapDice,
treemapResquarify,
treemapSlice,
treemapSliceDice,
};
export default class extends React.Component {
state = {
tileMethod: 'treemapSquarify',
