d3-rs-treemap

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

Builds

Example

View @redsift/d3-rs-treemap on Codepen

Treemap chart

Usage

Browser

<script src="//static.redsift.io/reusable/d3-rs-treemap/latest/d3-rs-treemap.umd-es2015.min.js"></script> <script> var treemap = d3_rs_treemap.html(); </script>

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'