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
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


See the component page for options.


You could use bower to install the element:
bower install d3-circle-packing



<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}


The license of this web component is MIT.

Monday, April 11, 2016

The Value of Software Development Infrastructure

Software Development Infrastructure
Software Development Infrastructure


During the past few years, many tools came to software development environment. These days you can automate many processes to make free time for yourself. I want to share my story about improving the development infrastructure in my work.

Why did I start?

Before 2016, we use only Git for version controlling and Redmine for issue tracking. I had some shell scripts to do some jobs such as making release and deploying to servers. I knew there were many tools for running these scripts automatically but they were some problems:

  1. Nobody was responsible for preparing development infrastructure.
  2. I didn’t have any free time to create development infrastructure (I know it's not an excuse!).
  3. Nobody knew the real benefits of development infrastructure (in our company).
  4. The cloud development infrastructures are not available from Iran or for Iranians.

What did I choose?

I’ve researched and chose the following software to build a basic development infrastructure:

  1. Redmine (for issue tracking and workflows)
  2. Jenkins (for running tests and automating builds)
  3. Git (As version control system)
  4. SonarQube (for code quality)
  5. Artifactory (for dependencies)
  6. Active Directory, LDAP (for centralizing managing users)

Integrated Infrastructure

I’ve integrated all software with AD to make managing users easier. Now, we can create a user and set roles (e.g. sudoers, developer) very quickly.
Also, I’ve integrated other software:

  • Git to Redmine and Jenkins
  • Redmine to Jenkins (and vice verse)
  • Jenkins to Artifactory (After building a package successfully, it will be deployed to Artifactory automatically)
  • Jenkins to SonarQube (Check code quality to make a build successful or failure)

What did happen after new infrastructure

After running the new infrastructure, we've got many benefits from it. I couldn't imagine how useful that is.
Continuous Delivery -
Continuous Delivery

  1. The pace of development was increased and so we were agiler.
  2. Now we have complete continuous integration and continuous delivery cycles.
  3. Jenkins deploys latest production and development versions to servers.
  4. Jenkins installs jar files, java source code and java docs of our java modules to Artifactory. So, developers could get jar libraries easily and see modules source code inside IntelliJ IDEA.
  5. SonarQube checks code quality and makes a build failure if there wasn't unit test or code quality was bad.
  6. The administrator could create, edit or delete a user of the whole infrastructure just by some clicks.
  7. Artifactory download and cache all dependencies. So, we save the bandwidth and download them from the local maven repository.
All these advantages help us to save time, improve code qualities and maintain the software easier.


There is only one thing that I regret is postponing of building development infrastructure. If you still using old ways to test, build and deploy, you are doing it wrong. Put building development infrastructure at the top of your to-do list. Don't wait for free time, make your time free by building a development infrastructure.

Wednesday, April 6, 2016

NVD3 Web Components for Polymer

NVD3 charts as web components for Polymer
NVD3 charts as web components for Polymer.

I'm using Google Polymer for a front-end project. Polymer is a library for creating Web Components, which are a set of W3C standards and upcoming browser APIs for defining your own custom HTML elements. As it's new, there are not many available web components for it. I've decided to make a bunch of chart elements for Polymer.

NVD3 Elements

NVD3 is a charting library written in D3. It provides many chart types and supports all d3 functions. I've created the following chart elements based on NVD3:
  • <nvd3-line>
  • <nvd3-line-with-focus>
  • <nvd3-pie>
  • <nvd3-donut>
  • <nvd3-scatter>
  • <nvd3-bullet>
  • <nvd3-discrete-bar>
  • <nvd3-stacked-area>
  • <nvd3-multi-bar>
  • <nvd3-multi-bar-horizontal>
  • <nvd3-cumulative-line>
  • <nvd3-sunburst>


You could use bower for installing the elements or download the latest version from github.
bower install nvd3-elements

Demo and Options

There are many options which you could set and configure for your chart. See the component page for demo and options.


You could check my other web components such as <github-fork-ribbon> and <d3-bubble> at