React-vis: Treemap example does not work

[codewithsk]

I was trying out the treemap example today as given in the repo and for some reason the treemaps won't render properly. Here's what I'm getting:

https://imgur.com/vdrhJCv

My code for reference:

`// Copyright (c) 2016 - 2017 Uber Technologies, Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.

import React from 'react';

import {Treemap} from 'react-vis';

function _getRandomData(total) {
const totalLeaves = total || Math.random() * 20;
const leaves = [];
for (let i = 0; i < totalLeaves; i++) {
leaves.push({
name: total ? total : String(Math.random()).slice(0, 3),
size: Math.random() * 1000,
color: Math.random(),
style: {
border: 'thin solid red'
}
});
}
return {
title: '',
color: 1,
children: leaves
};
}

export default class DynamicTreemapExample extends React.Component {
state = {
hoveredNode: false,
treemapData: _getRandomData(20),
useCirclePacking: false
}

render() {
const {hoveredNode, useCirclePacking} = this.state;
const treeProps = {
animation: {
damping: 9,
stiffness: 300
},
data: this.state.treemapData,
onLeafMouseOver: x => this.setState({hoveredNode: x}),
onLeafMouseOut: () => this.setState({hoveredNode: false}),
onLeafClick: () => this.setState({treemapData: _getRandomData()}),
height: 300,
mode: this.state.useCirclePacking ? 'circlePack' : 'squarify',
getLabel: x => x.name,
width: 350
};
return (

click above to the update data
{hoveredNode && hoveredNode.value}

);
}

}
`

[mcnuttandrew]

If you are using dom mode (the default) you need to make sure to import the style sheet

[codewithsk]

Thanks! That solved the issue. :)

[shreya-shah]

If you are using dom mode (the default) you need to make sure to import the style sheet

Which stylesheet do I need to use?

[mcnuttandrew]

Just the regular one! You can import (among other ways) by including it in the html with

<link rel="stylesheet" href="https://unpkg.com/react-vis/dist/style.css">

[ahkaneti]

Hi,

I am using the stylesheet but I am just getting a square still. Is there anything else I have to do? Here is my code:

const myData = {
"title": "analytics",
"color": "#12939A",
"children": [
{
"title": "cluster",
"children": [
{ "title": "AgglomerativeCluster", "color": "#12939A", "size": 3938 },
{ "title": "CommunityStructure", "color": "#12939A", "size": 3812 },
{ "title": "HierarchicalCluster", "color": "#12939A", "size": 6714 },
{ "title": "MergeEdge", "color": "#12939A", "size": 743 }
]
},
{
"title": "graph",
"children": [
{ "title": "BetweennessCentrality", "color": "#12939A", "size": 3534 },
{ "title": "LinkDistance", "color": "#12939A", "size": 5731 },
{ "title": "MaxFlowMinCut", "color": "#12939A", "size": 7840 },
{ "title": "ShortestPaths", "color": "#12939A", "size": 5914 },
{ "title": "SpanningTree", "color": "#12939A", "size": 3416 }
]
},
{
"title": "optimization",
"children": [
{ "title": "AspectRatioBanker", "color": "#12939A", "size": 7074 }
]
}
]
};
render(){

...

}