React / D3.js: Pack Layout component

This snippet shows how to create a React component using D3.js and SVG to create an interactive Pack Layout infographic.

FEATURES:

  • Data-driven
  • Click to zoom
  • Responsive (using parent width)
  • Animated (when data are updated, if resized or zoomed)
  • CSS styling

USAGE (JSX):

PROPERTIES DETAILS

  • startDelay : start animation after a time (in ms)
  • elementDelay : animation delay of elements (in ms)
  • json: the url of the JSON to load

LIVE DEMO

SOURCE CODE

App.js

ReactD3Pack Component

Fabio Biondi

I am an italian developer with over 10+ years of experience in developing custom user interfaces and interactive applications for any screen and device using the latest web technologies - HTML5, SVG, Canvas, ES2015, CSS3 - the latest libraries - React, AngularJS, D3.js, CreateJS - and many other tools - Gulp, WebPack, LESS/SASS but also Sketch, Balsamiq, PS and AI.

  • Marco Bonci

    Grande Fabio..molto molto bello e completo! Domani lo provo subito per un mio progetto..e ci tenevo a dire che il codice è veramente chiaro e fatto bene. Ne aspetto altri di tutorial