Friday, September 30, 2016

D3 Circle Packing Web Component

D3 Circle Packing Chart
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

<d3-circle-packing data="[[data]]"></d3-circle-packing>

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.

4 comments:

  1. It's interesting that many of the bloggers to helped clarify a few things for me as well as giving.Most of ideas can be nice content.The people to give them a good shake to get your point and across the command .

    seo company in chennai

    ReplyDelete
  2. wow amazing post.The key points you mentioned here related to maintenance of car is really awesome.Checking all fluid levels,changing oil and of course the regular service of the car which is necessary to maintain our vehicle.Thank you for the information.

    home spa services in mumbai

    ReplyDelete
  3. There are lots of information about latest technology and how to get trained in them, like this have spread around the web, but this is a unique one according to me. The strategy you have updated here will make me to get trained in future technologies. By the way you are running a great blog. Thanks for sharing this.

    Invisalign Treatment In Chennai

    Best Dental Clinic In Annanagar

    ReplyDelete