billdwhite/index.html

## index.html
<html class="no-js">
<head>
    <title>d3 Demo CSS Layout 07 - jquery piechart</title>
    <script src="https://cdn.rawgit.com/mbostock/d3/master/d3.js"></script>
</head>
<body>
  <h5 class="description">Resize each container. Notice the PieChart does not resize.</h5>
  <div id="chartContainer"></div>
  <button id="addButton">Add Resizable Pie Chart</button>
</body>


## jQuery-d3-PieChart-with-window-resize-listener.markdown

      
    Raw
  

              jQuery-d3-PieChart-with-window-resize-listener.markdown
            
          
    jQuery d3 PieChart with window resize listener

A demo showing a d3 reusable piechart that sits inside a resizable jQuery-created container.  While jQuery provides a resize listener on the container, this demo is designed to show the problems associated with using a window resize listener which will fire on browser window changes, but will not help when a container within the browser is resized.  This demo is coupled with http://codepen.io/billdwhite/pen/xhEKk which shows the other approach.
Forked from Bill White's Pen xuFbJ.
Forked from Captain Anonymous's Pen FzJnv.
A Pen by Bill White on CodePen.
License.

  
## script.js
ResizablePiechart = function() {

    var data = [],
        json = null,
        chartWidth = 0,
        chartHeight = 0,
        domNode = null,
        svg = null,
        rootGroup = null,
        radius = 0,
        color = d3.scale.ordinal().range(colorbrewer.PuBuGn[9]),
        pie = d3.layout.pie(),
        arc = d3.svg.arc(),
        dispatch = d3.dispatch("pageDown", "pageUp");

    function resizablepiechart(selection) {
        // initial setup
        domNode = selection.node(); // item dom node
        rootGroup = selection.append("svg");

        arc.outerRadius(radius - 10)
            .innerRadius(0);

        pie.sort(null)
            .value(function(d) {
                return d.population;
            });

        data = pie(json);

        cellSelection = rootGroup.selectAll("g").data(data)
            .enter();

        rootGroup = cellSelection.append("g")
            .attr("class", "arc");

        rootGroup.append("path")
            .attr("d", arc)
            .style("fill", function(d) {
                return color(d.data.age);
            });

        rootGroup.append("text")
            .attr("transform", function(d) {
                return "translate(" + arc.centroid(d) + ")";
            })
            .attr("dy", ".35em")
            .style("text-anchor", "middle")
            .text(function(d) {
                return d.data.age;
            });


        function handleResize() {
            chartWidth = parseInt(d3.select(domNode).style("width"));
            chartHeight = parseInt(d3.select(domNode).style("height"));

            radius = Math.min(chartWidth, chartHeight) / 2;

            rootGroup
                .attr("transform", "translate(" + chartWidth / 2 + "," + chartHeight / 2 + ")");

            arc.outerRadius(radius - 10)
                .innerRadius(0);

            data = pie(json);

            d3.select(domNode)
                .attr("width", chartWidth + "px")
                .attr("height", chartHeight + "px");

            rootGroup.selectAll("path")
                .each(function() {
                    d3.select(this).call(position)
                });
        }


        function position() {
            rootGroup.selectAll("path")
                .attr("d", arc)
                .style("fill", function(d) {
                    return color(d.data.age);
                });

            rootGroup.selectAll("text")
                .attr("transform", function(d) {
                    return "translate(" + arc.centroid(d) + ")";
                })
                .text(function(d) {
                    return d.data.age;
                });
        }

        resizablepiechart.handleResize = handleResize; // make handleResize function publicly visible
        handleResize(); // call handleResize() to start
    }

    resizablepiechart.handleResize = function(evt) { // placeholder function that is overridden at runtime
        return virtualscroller;
    };

    resizablepiechart.json = function(_) {
        if (!arguments.length) return json;
        json = _;
        return resizablepiechart;
    };
    return resizablepiechart;
};

var counter = 1;
var piecharts = [];

$(function() {
    var chartContainer = $("#chartContainer");
    $("#addButton").click(function(e) {
        chartContainer.append("<div class='chart resizable ui-widget-content'><h3 class='ui-widget-header'>" + counter + ". Pie Chart</h3></div>");
        var newChartDiv = $(".chart:last-of-type");
        counter++;
        d3.csv("https://cdn.rawgit.com/KABA-CCEAC/kesign/master/public/data/piechart.csv", function(error, data) {
            var newNode = newChartDiv.resizable({}).draggable()[0];
            var piechart = ResizablePiechart();
            piechart.json(data);
            piecharts.push(piechart);
            d3.select(newNode).call(piechart);
        })
    });

    d3.select(window).on("resize", function() {
        _.each(piecharts, function(nextPieChart) {
            nextPieChart.handleResize();
        });
    });

    $("#addButton").click();
    $("#addButton").click();
});

## style.css

body {
  font-family: sans-serif;
}

#addButton {
  margin: 0 10px;
}

.description {
  margin: 0 10px;
}

#chartContainer {
  display: flex;
}

.no-flex #chartContainer {
  display: inline;
}

.resizable {
  width: 150px;
  height: 150px;
  padding: 0em;
  padding-bottom: 2em;
  margin: 1em;
  font-size: 10px;
  background: #EFEFEF;
}

.resizable h3 {
  text-align: center;
  margin: 0;
  height: 16px;
  cursor: default;
  border: none;
}

.resizable svg {
  width: 100%;
  height: 100%;
}

.arc {
  stroke: #666666;
  stroke-width: 0.5;
}


text {
  font: 8px sans-serif;
  pointer-events: none;
}

text.id {
  text-anchor: middle;
  font-weight: bold;
}

.ui-resizable-handle.ui-resizable-se.ui-icon.ui-icon-gripsmall-diagonal-se {
  z-index: 0 !important;
}
	<html class="no-js">
	<head>
	<title>d3 Demo CSS Layout 07 - jquery piechart</title>
	<script src="https://cdn.rawgit.com/mbostock/d3/master/d3.js"></script>
	</head>
	<body>
	<h5 class="description">Resize each container. Notice the PieChart does not resize.</h5>
	<div id="chartContainer"></div>
	<button id="addButton">Add Resizable Pie Chart</button>
	</body>
	ResizablePiechart = function() {

	var data = [],
	json = null,
	chartWidth = 0,
	chartHeight = 0,
	domNode = null,
	svg = null,
	rootGroup = null,
	radius = 0,
	color = d3.scale.ordinal().range(colorbrewer.PuBuGn[9]),
	pie = d3.layout.pie(),
	arc = d3.svg.arc(),
	dispatch = d3.dispatch("pageDown", "pageUp");

	function resizablepiechart(selection) {
	// initial setup
	domNode = selection.node(); // item dom node
	rootGroup = selection.append("svg");

	arc.outerRadius(radius - 10)
	.innerRadius(0);

	pie.sort(null)
	.value(function(d) {
	return d.population;
	});

	data = pie(json);

	cellSelection = rootGroup.selectAll("g").data(data)
	.enter();

	rootGroup = cellSelection.append("g")
	.attr("class", "arc");

	rootGroup.append("path")
	.attr("d", arc)
	.style("fill", function(d) {
	return color(d.data.age);
	});

	rootGroup.append("text")
	.attr("transform", function(d) {
	return "translate(" + arc.centroid(d) + ")";
	})
	.attr("dy", ".35em")
	.style("text-anchor", "middle")
	.text(function(d) {
	return d.data.age;
	});


	function handleResize() {
	chartWidth = parseInt(d3.select(domNode).style("width"));
	chartHeight = parseInt(d3.select(domNode).style("height"));

	radius = Math.min(chartWidth, chartHeight) / 2;

	rootGroup
	.attr("transform", "translate(" + chartWidth / 2 + "," + chartHeight / 2 + ")");

	arc.outerRadius(radius - 10)
	.innerRadius(0);

	data = pie(json);

	d3.select(domNode)
	.attr("width", chartWidth + "px")
	.attr("height", chartHeight + "px");

	rootGroup.selectAll("path")
	.each(function() {
	d3.select(this).call(position)
	});
	}


	function position() {
	rootGroup.selectAll("path")
	.attr("d", arc)
	.style("fill", function(d) {
	return color(d.data.age);
	});

	rootGroup.selectAll("text")
	.attr("transform", function(d) {
	return "translate(" + arc.centroid(d) + ")";
	})
	.text(function(d) {
	return d.data.age;
	});
	}

	resizablepiechart.handleResize = handleResize; // make handleResize function publicly visible
	handleResize(); // call handleResize() to start
	}

	resizablepiechart.handleResize = function(evt) { // placeholder function that is overridden at runtime
	return virtualscroller;
	};

	resizablepiechart.json = function(_) {
	if (!arguments.length) return json;
	json = _;
	return resizablepiechart;
	};
	return resizablepiechart;
	};

	var counter = 1;
	var piecharts = [];

	$(function() {
	var chartContainer = $("#chartContainer");
	$("#addButton").click(function(e) {
	chartContainer.append("<div class='chart resizable ui-widget-content'><h3 class='ui-widget-header'>" + counter + ". Pie Chart</h3></div>");
	var newChartDiv = $(".chart:last-of-type");
	counter++;
	d3.csv("https://cdn.rawgit.com/KABA-CCEAC/kesign/master/public/data/piechart.csv", function(error, data) {
	var newNode = newChartDiv.resizable({}).draggable()[0];
	var piechart = ResizablePiechart();
	piechart.json(data);
	piecharts.push(piechart);
	d3.select(newNode).call(piechart);
	})
	});

	d3.select(window).on("resize", function() {
	_.each(piecharts, function(nextPieChart) {
	nextPieChart.handleResize();
	});
	});

	$("#addButton").click();
	$("#addButton").click();
	});

	body {
	font-family: sans-serif;
	}

	#addButton {
	margin: 0 10px;
	}

	.description {
	margin: 0 10px;
	}

	#chartContainer {
	display: flex;
	}

	.no-flex #chartContainer {
	display: inline;
	}

	.resizable {
	width: 150px;
	height: 150px;
	padding: 0em;
	padding-bottom: 2em;
	margin: 1em;
	font-size: 10px;
	background: #EFEFEF;
	}

	.resizable h3 {
	text-align: center;
	margin: 0;
	height: 16px;
	cursor: default;
	border: none;
	}

	.resizable svg {
	width: 100%;
	height: 100%;
	}

	.arc {
	stroke: #666666;
	stroke-width: 0.5;
	}


	text {
	font: 8px sans-serif;
	pointer-events: none;
	}

	text.id {
	text-anchor: middle;
	font-weight: bold;
	}

	.ui-resizable-handle.ui-resizable-se.ui-icon.ui-icon-gripsmall-diagonal-se {
	z-index: 0 !important;
	}