Tuesday, December 23, 2014

D3 Data Driven Documents

I have always wondered seeing the power of SVG (Scalar Vector Graphics) in modern day web. It creates the wow effect automatically to all our digital apps with the flexibility it provides for our shapes and colors .But this svgs are difficult to handle. Be it creating them, playing with them and using them for our various daily problems. There are tools before and there are tools after today but D3 is extremely powerful in handling the SVG.

This D3 for SVG does same what jquery does for html DOM. It gives flexibility to create your own designs live and need not put constraints normal plug-gins do.All charts like pie, bar and node and the new charts you can envision can become live and amuse the customers,

And you can make your sites interesting with visualizations and make users happy. What more can you ask?

d3js.org
http://www.lynda.com/sdk/D3js-tutorials/Data-Visualization-D3js/162449-2.html

Tuesday, December 9, 2014

Circles.js

Circles from lugolabs is a cool plugin if you are looking to create stylish donut circles or circles with animations. Its configuration is pretty simple where you can specify circle width, radius ,custom class you can apply for text and the circle itself. I got a chance to use myself and in no time I was able to use this nice features.
It uses svg and also light library.

Configuration of Circles
 
var myCircle = Circles.create({
  id:           'circles-1', // Id for which you apply
  radius:       60, 
  value:        43,// Value shown at center
  maxValue:     100,
  width:        10,
  text:         function(value){return value + '%';},// Customizing text shwon
  colors:       ['#D3B6C6', '#4B253A'],
  duration:       400, // Animation Duration
  wrpClass:     'circles-wrp',// Class which wraps circle
  textClass:      'circles-text'// Class which wraps text
  styleWrapper: true,
  styleText:    true
});

Git link

Saturday, December 6, 2014

Polymer

I have recently attended Google Dev Fest organized by Hyderabad chapter and got to know about this future tool.
If you like material design and looking to implement in your websites Polymer is the one you have to go.It got web components (create your own custom components) ,good library of  reusable elements and there is designer which helps you to drag and drop to create elements. 

With this implementing Google map is one tag away with this. And all its components are responsive so you need not write your own media queries for that if you use base components.

Its a little buggy now but I am sure you will get a good stable version in no time.