Dynamic Legend Plugin using JavaScript and D3.JS for visualizations

Home»Dynamic Legend Plugin using JavaScript and D3.JS for visualizations

Use Case Considered

Legend to be created for every chart designed/developed by D3.js or any chart library. The legend plugins available for D3.js library are having limited features 
1) Cannot be used if there are more legends to be displayed.
2) Not browser independent
3) Merged within the chart where it will take more space of chart if there are more legends to be displayed.

The solution expected to address the above issues and provide additional features for better usability.

Solution:

Developed a custom legend plugin using simple mathematical calculations, JavaScript, JQuery and D3.js to address all the above issues along with some new features for better usability.

Features of Dynamic Legend:
1.Legend can be displayed Horizontally or Vertically.
2.Legend can be displayed in a particular container based on user input.
3.Can be merged with any D3 charts/visualizations and position can be specified by the user to place the legend with in the chart (SVG).
4.Browser independent.
5.Shapes can be configured from the shapes available for current version to display next to legend text. The shapes available for current version are Square,Rectangle,Circle,Line.
6.User can configure the number of legends to be displayed per row. Scrollbar appears automatically when set height and width exceeds.
7.To make the legend interactive, Checkbox feature is available to display next to each legend. With minimal configuration, the chart can be made interactive with the legend.
8.The input to the legend is a JSON object.

When there are more legends such as more than 20, the component takes care of the alignment of each legend automatically for better view. The latest source code of the dynamic legend will be uploaded soon. 

 

Posted by: Jinali Patel. in Computer | Date: 30/11/2015

Share this article

Other articles

Back to article listing

Find a Great Teacher

Tell us your learning needs in detail and get immediate response from qualified tutors

Terms & conditions agreed
Ask a Question
Top