Skip to content

Instantly share code, notes, and snippets.

@hugolpz

hugolpz/README.md

Last active August 29, 2015 14:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hugolpz/c079c051fb45ddf51a70 to your computer and use it in GitHub Desktop.
Save hugolpz/c079c051fb45ddf51a70 to your computer and use it in GitHub Desktop.
Download ZIP
Minimal D3js reusable module
Raw
README.md

This gist is a first try to keep a clean minimal D3js reusable module under my hands. It also include the witty margin conventions, an some frequently seen data usages. Code to cut further.

References

Specifics:

Non specific with specific chapters :

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="../js/d3.v3.min.js"></script>
<script src="./module.js"></script>
<style>
.bar {
fill: steelblue;
stroke: #8888B1;
fill-opacity: 0.5;
}
</style>
<body>
<div id="hook"></div>
<script>
//Data
var data = [
{row: 0, col: 0, value: [{x: 1, y: 19}, {x: 2, y: 20}]},
{row: 0, col: 1, value: [{x: 1, y: 24}, {x: 2, y: 27}]},
{row: 1, col: 1, value: [{x: 1, y: 31}, {x: 2, y: 26}]},
{row: 1, col: 2, value: [{x: 1, y: 29}, {x: 2, y: 19}]}
];
// D3js svg settings
var margin = { top: 50, right: 0, bottom: 100, left: 30 },
width = 600 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// Create SVG container
var svg = d3.select("#hook").append("svg")
.attr("width", width)
.attr("height", height);
// Module call and custom settings
var chart = d3.coolmodules.barChart()
.width(800).height(800);
// Runs
svg.selectAll("g").data(data)
.enter()
.append('g')
.attr('transform', function(d, i) {
return 'translate(' + (i*50) + ',0)';
})
.call(chart);
</script>
</body>
</html>
Raw
module.js
// Bar chart Module
/////////////////////////////////
// Declare namespace
d3.coolmodules = {};
// Declare component: (this outer function acts as the closure):
d3.coolmodules.barChart = function module() {
// Defaults values:
var margin = {top: 10, right: 10, bottom: 20, left: 20},
width = 500,
height = 300;
function exports(_selection) { // create function to export
_selection.each(function(_data) { // loop
var test_data = _data.value;
var rectW = (_data.row+2)*10,
rectH = (_data.col+1)*10;
// Select all bars and bind data:
var bars = d3.select(this).selectAll(".bar")
.data(test_data)
.enter().append("rect");
//console.log(i+": "+JSON.stringify(_data.value));
// design svg elements
bars.attr("class","bar")
.attr({
'width': rectH,
'x': function (d){ console.log(" log place1! "); return d.x * 10;},
'y': function (d){ return d.y * 4;},
'height': rectH*4});
console.log(" log place2! ");
});
}// exports end
// GETTERS AND SETTERS:
exports.width = function(_x) {
if (!arguments.length) return width;
width = parseInt(_x);
return this;
};
exports.height = function(_x) {
if (!arguments.length) return height;
height = parseInt(_x);
return this;
};
return exports;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment