Lumber.js

This is currently under development.

A wrapper for d3.js. It allows you to specify graph data and styling with data attributes in page elements.

Using HTML5 Data Attributes

If you'd like to use HTML5 data attributes:

<!-- Set the graph information in the data attributes of an svg tag. -->
<svg id="lumber"
     data-lumber-type="bar"
     data-lumber-y-axis-label="Frequency"
     data-lumber-x-axis-label="Letter"
     data-lumber-values="3:A,2:B,3:C,4:D,5:E,7:F,6:G,5:H,4:I,2:J,6:K,5:L,6:M">
</svg>

Using Vanilla JS

// Select the chart div using d3.
chartDiv = d3.select("#bar-chart");

// Specify the chart details in a simple object.
lumberData = { data: [{ x: 3, y: "A"}, { x: 2, y: "B"}], width: "400", height: 250, type: "bar", yAxis: "Frequency", xAxis: "Letter" };

// Call lumber so it can do it's magic.
lumber.barChart(chartDiv, lumberData);

Installation

Distribution files are available in the dist directory.

dist/
  css/
    lumber.css  // Compiled, css version of lumber.scss.
  scss/
    lumber.scss // Sass version of lumber.js styling.
  lumber.js     // Development version of lumber.js.
  lumber.min.js // Minified, production version of lumber.js.

Development

This project uses gulp to automate tasks like jshinting, uglification, and sass compilation:

git clone https://github.com/johnotander/lumberjs.git && cd lumberjs
npm install .
npm install -g gulp
gulp

For further documentation on gulp, a good place to start would be Travis Maynard's blog post.

Contributing

1. Fork it ( http://github.com/johnotander/lumberjs/fork )
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request

Crafted with <3 by John Otander (@4lpine).