@redsift/d3-rs-treemap

A TreeMap visual component made with D3v4.

Usage no npm install needed!

<script type="module">
  import redsiftD3RsTreemap from 'https://cdn.skypack.dev/@redsift/d3-rs-treemap';
</script>

README

d3-rs-treemap

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

Builds

Circle CI npm MIT

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'