@redsift/d3-rs-treemap NPM

d3-rs-treemap

d3-rs-treemap A TreeMap visual component made with D3v4

Builds

Example

View @redsift/d3-rs-treemap on Codepen

Treemap chart

Sample treemp with text

Usage

Browser

ES6

import { chart } from "@redsift/d3-rs-treemap"; let eml = chart.html(); ...

Require

var chart = require("@redsift/d3-rs-treemap"); var eml = chart.html(); ...

Data layout

Data need to be in a hierarchical form as it is described in d3-hierarchy. The basic criteria is to have the children property. If your data are not in a hierarchical form you can use the stratify method in d3-hierarchy to manipulate them.

{
  name:'root',
  children: [
    {
      l: 'children1',
      v: 10
    },
    {
      l: 'children1',
      v: 10,
      u: 'http://www.google.com/children2'
    }
  ]
}

For this visualization objects inside the children array are expected to have the above layout. The u property is optional, only if you want to display images so you need to provide a link.

Parameters

Name	Description	Transition
`classed`	SVG custom class	N
`width`, `height`, `size`, `scale`, `margin`	Integer SVG container sizes	Y
`style`	String Custom CSS to inject into chart	N
`fill`	String, Array, Function Colour palette for the data. Available options from d3-rs-theme	Y
`theme`	String `dark` or `light`(default)
`appendText`	Boolean Append a text element inside the rect
`textValue`	String, Function for the value of the text element that will be displayed
`appendImage`	Boolean Append an image element inside the rect	Y
`imageFallbackLink`	String Helper link of asset to display as a fall back solution when an image fails to load
`filter`	String Filter to be applied on an image as described in d3-rs-theme#filters e.g. `'emboss'`, `'greyscale'`, `'shadow'`