D3 Circle Packing Web Component

D3 Circle Packing Chart
I love data visualization. It helps to understand raw data and to get info in the blink of an eye. As a developer, I like to reuse the code and libraries as much as possible. Using the web components is one of the best ways to reuse the code. I’m creating and publishing custom elements for using them whenever and wherever I want. You could check them on customelements.io.
Last week I used d3 circle packing chart for the first time. It was time to create a web component for it.

D3 Circle Packing Element

I used polymer-cli to initialize a basic custom element project. After that, I installed the only dependency, D3 library. Mike Bostock, the creator of d3, made a full example of d3 circle packing chart with zooming option. I’ve implemented the element based on that example. It needs some changes and bug fixes (e.g. zooming transition didn’t work correctly when multiple charts were on one page).

You could check the live version of my element on saeidzebardast.github.io/d3-circle-packing.

Options

See the component page for options.

Install

You could use bower to install the element:

bower install d3-circle-packing

Usage

Tag

Data Format

{
  "name": "flare",
  "children": [
    {
      "name": "analytics",
      "children": [
        {
          "name": "cluster",
          "children": [
            {"name": "AgglomerativeCluster", "size": 3938},
            {"name": "CommunityStructure", "size": 3812}
          ]
        },
        {
          "name": "graph",
          "children": [
            {"name": "BetweennessCentrality", "size": 3534},
            {"name": "LinkDistance", "size": 5731},
            {"name": "SpanningTree", "size": 3416}
          ]
        }
      ]
    },
    {
      "name": "animate",
      "children": [
        {"name": "FunctionSequence", "size": 5842},
        {
          "name": "interpolate",
          "children": [
            {"name": "ArrayInterpolator", "size": 1983},
            {"name": "PointInterpolator", "size": 1675},
            {"name": "RectangleInterpolator", "size": 2042}
          ]
        }
      ]
    }
  ]
}

License

The license of this web component is MIT.