CSNW / d3.compose

Compose complex, data-driven visualizations from reusable charts and components with d3
http://CSNW.github.io/d3.compose/
MIT License
697 stars 24 forks source link

Add charts/components helpers #27

Closed timhall closed 9 years ago

timhall commented 9 years ago

Phase 2 of #24

Add helpers for standard charts/components for a little cleaner options and opportunity for future additions/changes.

Example:

var d3c = d3.compose;

d3.select('#chart').chart('Compose', function(data) {
  var scales = {
    x: {/* ... */},
    y: {/* ... */}
  };

  return [
    d3c.title({text: 'Main Title', 'class': 'chart-title-main'}),
    [
      d3c.title('y-axis'),
      d3c.axis('yAxis', {scale: scales.y}),
      d3c.layered(
        d3c.lines('lines', {data: data, xScale: scales.x, yScale: scales.y})
      )
    ],
    d3c.axis('xAxis', {scale: scales.x}),
    d3c.title('x-axis')
  ]
});

If (String, ...) is given, first parameter to helpers is an optional id (needed if components are moving within layout or layout "shape" is changing), otherwise first parameter is options. (Note: title is overloaded to accept String or Object for options)