David B.

Data visualization engineer

OS - Org Chart

d3.js

Org-Chart is my most successful open source project with more than hundred thousand of monthly npm downloads and more than 500 stars on Github.

It’s very flexible and quite performant component, and fascinating to see, what people are achieving with it.

Let’s touch some features:

Improved algorithm

Org chart will use d3-flextree, which offers much more customization opportunities, than the standard tree algorithm

Better Programmatic control

Now users can directly pass the function, which will generate each node content.

It will receive the d3 node as an argument, which means you not only directly have access to original data, but you also can take advantage of all d3 helper functions, like accessing parents, depth, width, and the height of node, getting descendants and accessors, looping over children via DFS or BFS e.t.c.

Apart from that, several helper props are added to the data (_expanded, ._centered,_totalSubordinates,_directSubordinates ), which will allow you to conditionally style the node

Here is a high-level overview of the common method signatures

Docs

Improved layout

Now users will be able to switch between compact or standard tree layouts and they will also be able to choose 4 different directions (left, top, bottom, right)

Layout

Improved UX features

Now you have the possibility to programmatically fit the chart to the screen, center, and highlight any node, and request a full-screen view. You also can zoom in and out programmatically (as well as manually).

In the new version, by default, the active node and branch will get centered, which is a huge win for mobile. It reduces the time for tree exploration drastically.

Center

New features

From now on, you can specify additional connections between any two nodes

Connection

Exporting

In the new version, you have the ability to export images in PNG or SVG format. You can pass a callback function to receive the base64 string back, which can be used to generate PDF (Check how it is done here)

Export

New examples

Several new examples were created for you to reuse. They are featuring different designs, layouts, and approaches of how to customize the default node view.

One of the examples shows how to achieve a similar view as in the previous version using the previous data format

Examples

Integrations

The updated version fixes some bugs from the previous version. All 3 major library/framework integrations are available. The new version imports only necessary parts from the d3 library, which should provide some optimizations as well.

If you need an org chart in your project, give it a try. I’d love to hear your honest feedback.

Thank you for reading.