Skip to content

Instantly share code, notes, and snippets.

@wvengen wvengen/

Last active Jan 25, 2016
What would you like to do?
d3.chart UMD chart

Basic example showing how to make a chart based on d3.chart using the new and shiny UMD interface. This is currently being discussed in #117, and not ready for use. It will be! present from d3.chart 0.3.0 onwards.

  1. git clone && cd 5789e5b2a295156ea48e.git
  2. npm install
  3. webpack index.js build.js
  4. open index.html
  5. see a basic circle graph

There used to be a problem here, thanks to JMStewart for finding the solution.

If you want to customize an existing chart, you can create a new chart based on that in exactly the same manner as shown here. Instead of var Chart = require('d3.chart'), you'd use var SomeChart = require('d3.chart.somechart') and define your own with var MySomeChart = SomeChart.extend('MySomeChart', { /* ... */ }). See d3.chart.sankey for a real-world example.

'use strict';
var Chart = require('d3.chart');
module.exports = Chart("CircleChart", {
initialize: function() {
this.layer("circles", this.base.append("g"), {
dataBind: function(data) {
return this.selectAll("circle").data(data);
insert: function() {
return this.append("circle");
events: {
"enter": function() {
this.attr("cx", (d) => d*10)
.attr("cy", 10)
.attr("r", 5)
.style("fill", "red");
<div id="chart"></div>
<script type="text/javascript" src="build.js" charset="utf-8"></script>
'use strict';
var d3 = require('d3');
var Circle = require('./circle');
var svg ='#chart').append('svg');
.attr('height', 30)
.attr('width', 400);
new Circle(svg)
.draw([1, 4, 6, 9, 12, 13, 30]);
"name": "d3.chart-webpack-test",
"private": true,
"version": "0.1.0",
"devDependencies": {
"webpack": "^1.12.0"
"dependencies": {
"d3": "^3.5.12",
"d3.chart": "^0.3.0"
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.