Issues with @nivo/treemap example

[littlecastrum]

This code which is a reproduction of the webpage example is not rendering the treemap and no error is being displayed. I don't really know what is missing. I'm passing the example root from the webpage

import React, { Component } from 'react';
import { ResponsiveTreeMap } from '@nivo/treemap'
import { useTheme } from '@nivo/core'
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import { withStyles } from '@material-ui/core/styles';
import style from './style';

function TreeMap({ classes, root }) {
  return (
    <Grid container className={classes.root}>
      <ResponsiveTreeMap
        root={data}
        identity="name"
        value="loc"
        innerPadding={3}
        outerPadding={3}
        margin={{ top: 10, right: 10, bottom: 10, left: 10 }}
        label="loc"
        labelFormat=".0s"
        labelSkipSize={12}
        labelTextColor={{ from: 'color', modifiers: [ [ 'darker', 1.2 ] ] }}
        colors={{ scheme: 'nivo' }}
        borderColor={{ from: 'color', modifiers: [ [ 'darker', 0.3 ] ] }}
        animate={true}
        motionStiffness={90}
        motionDamping={11}
      />
    </Grid>
  );
}
export default withStyles(style)(TreeMap);

[littlecastrum]

Apparently the structure is not supposed to be passed with the first part of the json object in the example

[totaland]

can you explain this a bit more? what is the correct data struc to use? do you have link to download this?

[wyze]

@totaland The website shows the data with a top level root key in the JSON, but what should be passed should be the value of the root key.

[codler]

Do you have an example in codesandbox?

[picoLizard]

Do you have an example in codesandbox?

In the website examples, the 'data' object passed simply includes a 'root' key to start with:

{
  "root": {
    "name": "nivo",
    "color": "hsl(188, 70%, 50%)",
    "children": [
      {
        "name": "viz",
        "color": "hsl(17, 70%, 50%)",
        "children": [

instead, the data object should just launch straight into the first parent, without the need for the 'root' key, so the website example should read:

{
    "name": "nivo",
    "color": "hsl(188, 70%, 50%)",
    "children": [
      {
        "name": "viz",
        "color": "hsl(17, 70%, 50%)",
        "children": [

this is the same data object as the 'Bubble' - so if you look at that example, it is correct.

[davvit]

Thank you for this info.
You can also just do this so you can copy the sample data on the demo site and use it.

  return <ResponsiveTreeMapHtml
        data={testData.root}    <----
        identity="name"
        value="loc"

[NicolasNewman]

I'd love to see this typo get fixed on the website. I just spent a substantial amount of time trying to figure out what was wrong before coming across this.

[stale]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!