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.
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>
// 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);
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.
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.
git checkout -b my-new-feature
)git commit -am 'Add some feature'
)git push origin my-new-feature
)Crafted with <3 by John Otander (@4lpine).