{"id":15091817,"url":"https://github.com/jkutianski/d3-templating","last_synced_at":"2025-04-12T06:32:25.445Z","repository":{"id":57157023,"uuid":"114390479","full_name":"jkutianski/d3-templating","owner":"jkutianski","description":"D3js plugin to support templating engines as Handlebars, Mustache, Twitter Hogan, Mozilla Nunjucks, LinkedIn Dust, doT, Underscore, Template7, EJS, Vash, ART, Swig, Wiskers and probably others.","archived":false,"fork":false,"pushed_at":"2020-09-23T15:03:02.000Z","size":39,"stargazers_count":10,"open_issues_count":0,"forks_count":2,"subscribers_count":4,"default_branch":"d3v4","last_synced_at":"2025-03-26T02:04:23.680Z","etag":null,"topics":["d3-module","d3js","d3v3","d3v4","d4v2","handlebarsjs","hogan","mustache","mustache-js","node","nodejs","template"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jkutianski.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-12-15T16:28:58.000Z","updated_at":"2020-09-23T15:03:04.000Z","dependencies_parsed_at":"2022-09-26T21:01:43.669Z","dependency_job_id":null,"html_url":"https://github.com/jkutianski/d3-templating","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jkutianski%2Fd3-templating","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jkutianski%2Fd3-templating/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jkutianski%2Fd3-templating/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jkutianski%2Fd3-templating/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jkutianski","download_url":"https://codeload.github.com/jkutianski/d3-templating/tar.gz/refs/heads/d3v4","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248529833,"owners_count":21119580,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["d3-module","d3js","d3v3","d3v4","d4v2","handlebarsjs","hogan","mustache","mustache-js","node","nodejs","template"],"created_at":"2024-09-25T11:00:25.815Z","updated_at":"2025-04-12T06:32:24.995Z","avatar_url":"https://github.com/jkutianski.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"d3-templating\n==========\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/f424dd4911324201a86c9543e192c4e6)](https://www.codacy.com/app/jkutianski/d3-templating?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=jkutianski/d3-templating\u0026amp;utm_campaign=Badge_Grade)\n\n[![dependencies Status](https://david-dm.org/jkutianski/d3-templating/status.svg)](https://david-dm.org/jkutianski/d3-templating)\n[![devDependencies Status](https://david-dm.org/jkutianski/d3-templating/dev-status.svg)](https://david-dm.org/jkutianski/d3-templating?type=dev)\n\n[![Known Vulnerabilities](https://snyk.io/test/github/jkutianski/d3-templating/badge.svg?targetFile=package.json)](https://snyk.io/test/github/jkutianski/d3-templating?targetFile=package.json)\n\n*(This version is tested on browsers with D3js v2.x, v3.x and v4.x)*\n*(For Node.js is only supported the D3js v4.x)*\n\nd3-templating is based on [my previous solution](http://bl.ocks.org/jkutianski/7556191) of [John Berryman's attempt](http://bl.ocks.org/JnBrymn/2295155) to use templating.\nThis version support template compilation engines as [`Handlebars`](http://handlebarsjs.com/), [`Mustache`](https://mustache.github.io/), [`Twitter Hogan`](http://twitter.github.io/hogan.js/), [`Mozilla Nunjucks`](https://mozilla.github.io/nunjucks/), [`LinkedIn Dust`](http://www.dustjs.com/), [`doT`](https://olado.github.io/doT/), [`Underscore`](http://underscorejs.org/#template), [`Template7`](http://idangero.us/template7/), [`EJS`](http://ejs.co/), [`Vash`](https://github.com/kirbysayshi/vash), [`ART`](https://aui.github.io/art-template/), [`Swig`](http://node-swig.github.io/swig-templates/), [`Wiskers`](https://github.com/gsf/whiskers.js), [`BlueImp Templates`](https://blueimp.github.io/JavaScript-Templates/), [`Braket`](https://github.com/danlevan/bracket-template), [`Templayed`](https://github.com/archan937/templayed.js/) and probably others.\n\n[D3js Clock DEMO](http://bl.ocks.org/jkutianski/0601ad01f560d49a5967)\n\nInstall\n-------\nTo install via NPM use `npm install d3-templating`. You can also load directly from [unpkg.com](https://unpkg.com/d3-templating/).\n\n```html\n\u003cscript src=\"https://unpkg.com/d3-templating/build/d3-template.min.js\"\u003e\u003c/script\u003e\n```\n\nTemplate\n--------\n*If the template is an SVG you've to add the tag `\u003csvg xmlns=\"http://www.w3.org/2000/svg\"\u003e`, like the following example.*\n```\n\u003ctemplate id=\"template\" type=\"text/html\" style=\"display: none;\"\u003e\n   \u003csvg xmlns=\"http://www.w3.org/2000/svg\"\u003e\u003ctext\u003e{{data}}\u003c/text\u003e\u003c/svg\u003e\n\u003c/template\u003e\n```\nHow to use\n----------\n\nNode.js\n-------\n```\nconst\n    jsdom = require('jsdom'), // JSDOM is required to use D3js\n    Handlebars = require(\"handlebars\"),\n    d3 = Object.assign({}, require(\"d3-selection\"), require(\"d3-templating\"));\n\nvar dom = new jsdom.JSDOM('\u003c?xml version=\"1.0\"?\u003e\u003csvg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" \u003e\u003c/svg\u003e');\nvar body = d3.select(dom.window.document.body);\n\nvar template = '\u003csvg xmlns=\"http://www.w3.org/2000/svg\" \u003e\u003ccircle cx=\"{{x}}\" cy=\"{{y}}\" r=\"{{r}}\"/\u003e\u003c/svg\u003e';\nvar compiledTemplate = Handlebars.compile(template);\n\nvar svg = body.select('svg');\n\nvar g = svg.selectAll('g')\n    .data([\n        { x: 10, y: 10, r: 10 },\n        { x: 30, y: 30, r: 20 },\n        { x: 60, y: 60, r: 30 },\n        { x: 100, y: 100, r: 40 },\n    ])\n    .enter()\n    .call(d3.template(compiledTemplate));\n\nconsole.log(body.html())\n```\n\nHandlebars\n----------\n```\nvar template = d3.select('#template').node().innerHTML;\nvar compiledTemplate = Handlebars.compile(template);\n\nd3.select('#node').call(\n  d3.template(compiledTemplate)\n);\n```\nMustache\n--------\n```\nvar template = d3.select('#template').node().innerHTML;\nMustache.parse(template);\n\nd3.select('#node').call(\n   d3.template(\n     function (d) {\n       return Mustache.render(template,d);\n     })\n );\n```\nTwitter Hogan\n-------------\n```\nvar template = d3.select('#template').node().innerHTML;\nvar compiledTemplate = Hogan.compile(template);\n\nd3.select('#node').call(\n   d3.template(\n     function (d) {\n       return compiledTemplate.render(d);\n     })\n );\n```\nMozilla Nunjucks\n----------------\n```\nvar template = d3.select('#template').node().innerHTML;\nvar compiledTemplate = nunjucks.compile(template);\n\nd3.select('#node').call(\n    d3.template(function (d) {\n        return compiledTemplate.render(d);\n    })\n);\n```\nLinkedIn Dust\n-------------\n```\nvar template = d3.select('#template').node().innerHTML;\ndust.loadSource(dust.compile(template, 'myTemplate'));\n\nd3.select('#node').call(\n    d3.template(\n        function(d) {\n            var output;\n            dust.render('myTemplate', d, function (err, out) {\n                output = out;\n            });\n            return output;\n        }\n    )\n);\n```\ndoT\n---\n```\nvar template = d3.select('#template').node().innerHTML;\nvar compiledTemplate = doT.template(template);\n\nd3.select('#node').call(\n    d3.template(function (d) {\n        return compiledTemplate(d);\n    })\n);\n```\nUnderscore\n----------\n```\nvar template = d3.select('#template').node().innerHTML;\nvar compiledTemplate = _.template(template);\n\nd3.select('#node').call(\n    d3.template(function (d) {\n        return compiledTemplate(d);\n    })\n);\n```\nTemplate7\n---------\n```\nvar template = d3.select('#template').node().innerHTML;\nvar compiledTemplate = Template7.compile(template);\n\nd3.select('#node').call(\n    d3.template(function (d) {\n        return compiledTemplate(d);\n    })\n);\n```\nEJS\n---\n```\nvar template = d3.select('#template').node().innerHTML;\nvar compiledTemplate = ejs.compile(template);\n\nd3.select('#node').call(\n    d3.template(function (d) {\n        return compiledTemplate(d);\n    })\n);\n```\nVash\n----\n```\nvar template = d3.select('#template').node().innerHTML;\nvar compiledTemplate = vash.compile(template);\n\nd3.select('#node').call(\n    d3.template(function (d) {\n        return compiledTemplate(d);\n    })\n);\n```\n\nART\n----\n```\nvar template = d3.select('#template').node().innerHTML;\nvar compiledTemplate = template.compile(template);\n\nd3.select('#node').call(\n    d3.template(function (d) {\n        return compiledTemplate(d);\n    })\n);\n```\n\nSwig\n----\n```\nvar template = d3.select('#template').node().innerHTML;\nvar compiledTemplate = swig.compile(template);\n\nd3.select('#node').call(\n    d3.template(function (d) {\n        return compiledTemplate(d);\n    })\n);\n```\n\nWiskers\n-------\n```\nvar template = d3.select('#template').node().innerHTML;\nvar compiledTemplate = whiskers.compile(template);\n\nd3.select('#node').call(\n    d3.template(function (d) {\n        return compiledTemplate(d);\n    })\n);\n```\n\nBlueImp Templates\n----------------\n```\nd3.select('#node').call(\n    d3.template(function (d) {\n        return tmpl('template_id', d);\n    })\n);\n```\n\nBracket\n-------\n```\nvar template = d3.select('#template').node().innerHTML;\nvar compiledTemplate = bracket.compile(template);\n\nd3.select('#node').call(\n    d3.template(function (d) {\n        return compiledTemplate(d);\n    })\n);\n```\n\nTemplayed\n---------\n```\nvar template = d3.select('#template').node().innerHTML;\n\nd3.select('#node').call(\n    d3.template(function (d) {\n        return templayed(template)(d);\n    })\n);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjkutianski%2Fd3-templating","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjkutianski%2Fd3-templating","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjkutianski%2Fd3-templating/lists"}