jerryorr/d3-demo.html

## d3-demo.html
<html>
	<head>
		<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	</head>
	<body>
		<div class="container"></div>
	</body>

	<script type="text/javascript">
		var root = d3.selectAll('body .container').selectAll('.widget')

		function draw (data) {
			root = root.data([data])

			//root enter
			var enter = root
				.enter()
				.append('div')
				.classed('widget', true)

			// label enter
			enter
				.append('div')
				.classed('label', true)

			// update
			root.select('.label')
				.text(function (d) {
					return d.label
				})

			// Destroying the shape since the element type might change
			// root.select('.shape').remove()

			// svg enter
			enter
				.append('svg')
				.attr('height', '100%')
				.attr('width', '100%')
					.append(function (d) {
						return document.createElementNS('http://www.w3.org/2000/svg', d.shape)
					})
					.classed('shape', true)


			// svg update
			root.select('.shape')
				.attr('width', function (d) {
					return d.width
				})
				.attr('height', function (d) {
					return d.height
				})
				.attr('cx', function (d) {
					return d.width / 2
				})
				.attr('cy', function (d) {
					return d.height / 2
				})
				.attr('r', function (d) {
					return d.width / 2
				})
				.attr('stroke', 'red')
				.attr('fill', 'red')
		}

		draw({
			shape: 'rect',
			label: 'Hello',
			width: 100,
			height: 200
		})

		setTimeout(function () {
			draw({
				shape: 'circle',
				label: 'Goodbye',
				width: 250,
				height: 400
			})
		}, 1000)
	</script>
</html>
	<html>
	<head>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	</head>
	<body>
	<div class="container"></div>
	</body>

	<script type="text/javascript">
	var root = d3.selectAll('body .container').selectAll('.widget')

	function draw (data) {
	root = root.data([data])

	//root enter
	var enter = root
	.enter()
	.append('div')
	.classed('widget', true)

	// label enter
	enter
	.append('div')
	.classed('label', true)

	// update
	root.select('.label')
	.text(function (d) {
	return d.label
	})

	// Destroying the shape since the element type might change
	// root.select('.shape').remove()

	// svg enter
	enter
	.append('svg')
	.attr('height', '100%')
	.attr('width', '100%')
	.append(function (d) {
	return document.createElementNS('http://www.w3.org/2000/svg', d.shape)
	})
	.classed('shape', true)


	// svg update
	root.select('.shape')
	.attr('width', function (d) {
	return d.width
	})
	.attr('height', function (d) {
	return d.height
	})
	.attr('cx', function (d) {
	return d.width / 2
	})
	.attr('cy', function (d) {
	return d.height / 2
	})
	.attr('r', function (d) {
	return d.width / 2
	})
	.attr('stroke', 'red')
	.attr('fill', 'red')
	}

	draw({
	shape: 'rect',
	label: 'Hello',
	width: 100,
	height: 200
	})

	setTimeout(function () {
	draw({
	shape: 'circle',
	label: 'Goodbye',
	width: 250,
	height: 400
	})
	}, 1000)
	</script>
	</html>