Skip to main content

Posts

Adding custom charts inside d3 circle pack visualization.

Hello folks, I'm back with a new article. Recently one of my close friend was working on d3 circle pack visualization whereby he wanted to show charts at the leaf node, which he pretty much accomplished but was struggling to make it work to resize of zoom-in and zoom-out circle. That was the point when I got involved in this use case and it gave me an opportunity to share here how we got the break through. What are we going to build ? A circle pack visualization whose leaf node contains a custom chart like this: To see a live demo visit here . Context: The above visualization is drawn under the context of e-commerce store where nested elements are products under category and sub category. The leaf node is a product whose children are sales data of the week. Lets get started:  The data for the chart is as follows: { "name": "products", "children": [ { "name": "electronics", "children...
Recent posts

Developing application in Angular4

Welcome again folks! This is in continuation of a previous blog where we created Task List crud - POC in Node, Express, mongo and Angular 1.x. We will follow the same back-end and will try to build a new front-end using Angular4. Pre-requisite : People who have gone through PART1  know the dependency which was mentioned, rest who are starting from here please go through the pre-requisite of PART1 session.  You need to have angular-cli installed. We will use it to scaffold our application and for development and production builds as well.  What are we going to build? We'll be building the same Task Crud application as we did in previous session, but with upgraded version of Angular and Material design. The source code for the application can be found at github  and to see the app in action visit the DEMO . Getting started: To get started we will require a back-end enabled with REST APIs. Let's use the same old Task Server from previous session. You c...

Node, Angular1.x,MongoDB, Express Task List - POC

Welcome folks! This is a series of 2 tutorials. The first part is about Node, Angular 1.x, MongoDB, Express and second part is to re-create application using Angular4. We will settle with 4.x rather than 2.x so that we get familiarized with few 4.x concepts. Intended both for new users trying hands on with Angular and Angular 1.x experts as well. The following is the first part of tutorial where we will create a simple backend server in Express exposed via a pure REST model serving client, created in Angular 1.x which uses database as MongoDB. If you are well versed with Node and Angular 1.x ignore this and move on to second half of the tutorial, i.e., developing application in Angular4 . Pre-requisite: If you don't have MongoDB, download it from here and install. Make sure you have node and npm installed, if not set it up from here . Install bower globally for package manager - from command prompt hit   npm install -g bower.   What are we going to design? He...