Skip to content

Instantly share code, notes, and snippets.

@turboMaCk turboMaCk/index.html
Last active Aug 29, 2015

Embed
What would you like to do?
D3.js Chart Library Boilerplate
<html>
<head>
<title>test</title>
</head>
<body>
<div id="mydiv"></div>
<div id="mydiv2"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
(function() {
// first library's plugin
var first = function(element) {
this.container = element;
}
first.prototype = {
init: function() {
console.log('new first', this.container);
return this;
}
}
// second library's plugin
var second = function(element) {
this.container = element;
}
second.prototype = {
init: function() {
console.log('new second', this.container);
return this;
}
}
// library works with own objects
var _wrap = function(selector) {
this.element = d3.select(selector);
return this;
};
_wrap.prototype = {
first: function() {
var chart = new first(this.element);
return chart.init();
},
second: function() {
var chart = new second(this.element);
return chart.init();
}
};
// export to global namespace
window.wrap = function(selector) {
return new _wrap(selector);
};
})();
</script>
<script>
(function() {
// Init in page
var a = wrap('#mydiv').first();
var b = wrap('#mydiv2').second();
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.