article:
Elements Design: Metallic Slider and Dropdown
article:
JS Plugin: Ideal Forms

JS Plugin: NVD3 Re-usable charts

Advertisement

"This project is an attempt to build re-usable charts and chart components for d3.js without taking away the power that d3.js gives you. This is a very young collection of components, with the goal of keeping these components very customizeable, staying away from your standard cookie cutter solutions."


Screeshots

Plugin: NVD3 Re-usable charts


Plugin: NVD3 Re-usable charts



Sample usage

Scatter / Bubble Chart

Plugin: NVD3 Re-usable charts


code
 nv.addGraph(function() {
   var chart = nv.models.scatterChart()
                 .showDistX(true)
                 .showDistY(true)
                 .color(d3.scale.category10().range());
   chart.xAxis.tickFormat(d3.format('.02f'))
   chart.yAxis.tickFormat(d3.format('.02f'))
   d3.select('#chart svg')
       .datum(randomData(4,40))
     .transition().duration(500)
       .call(chart);
   nv.utils.windowResize(chart.update);
   return chart;
 });
 /**************************************
  * Simple test data generator
  */
 function randomData(groups, points) { //# groups,# points per group
   var data = [],
       shapes = ['circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'],
       random = d3.random.normal();
   for (i = 0; i < groups; i++) {
     data.push({
       key: 'Group ' + i,
       values: []
     });
     for (j = 0; j < points; j++) {
       data[i].values.push({
         x: random()
       , y: random()
       , size: Math.random()
       //, shape: shapes[j % 6]
       });
     }
   }
   return data;
 }


Sample

- Simple Line
- Scatter / Bubble
- Stacked / Stream / Expanded Area
- Discrete Bar
- Grouped / Stacked Multi-Bar
- Horizontal Grouped Bar
- Line and Bar Combo
- Cumulative Line
- Line with View Finder
- Pie Chart
- Bullet Chart
- HTML Indented Tree



source
examples
github
download

Advertisement
Tags: plugin,chart, json, pie, bullet, line, html, css, develop, ecommerce, layout, design, stacked, streeam, bar, ui

Leave a Comment

No Comment

© Creative3x Ltd.