d3.js: Q: pack layout with images

Experiment …… ∆ ∞

==========================================================================

A little alternative way to use the SVG object and D3:

D3 code creates a layout-based mask, where each node is a circle + circle-clipped 'silhouette' image, which is, of course, included in the generated mask.

WARNING: clip-mask applied to elements inside a SVG mask don't work in Safari/Win; Chrome works okay, so this result is best viewed in bleeding edge Chrome.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Circle Packing</title>
    <script type="text/javascript" src="https://d3js.org/d3.v2.js"></script>
    <script type="text/javascript" src="https://gerhobbelt.github.com/bl.ocks.org-hack/fixit.js" ></script>
		<style>
circle {
  fill: white;
  fill-opacity: 0.25;
  stroke: white;
  stroke-width: 2px;
  stroke-opacity: 0.2;
}

.depth-0 circle {
  fill: white;
  fill-opacity: 0.25;
  stroke: white;
  stroke-width: 6px;
  stroke-opacity: 0.7;
}

circle {
  fill: white;
  fill-opacity: 0.25;
  stroke: white;
  stroke-width: 2px;
  stroke-opacity: 0.2;
}

.leaf circle.border {
  stroke: white;
  stroke-width: 1px;
  stroke-opacity: 1;
  stroke-dasharray: 1,1;
}

text {
  fill: white;
  fill-opacity: 0.4;
  font: 10px sans-serif;
}
		</style>
  </head>
  <body>
    <div id="chart">
			<svg>
				<g>
					<clipPath id="circle-clipper" clipPathUnits="objectBoundingBox">
						<circle cx="0.5" cy="0.5" r="0.35" style="fill: grey; opacity: 1;" />
					</clipPath>
					<mask id="fademask" style="maskUnits: userSpaceOnUse;">
					</mask>
				</g>
				<image xlink:href="Konachan.com-46061.black_lagoon.revy.960.jpg" x="0" y="0"
								width="960" height="500"
								style="mask: url(#fademask); preserveAspectRatio: xMidyMid slice" />
				<g id="bugger">
				</g>
		</svg>
		</div>
    <script type="text/javascript" src="pack2.js"></script>
  </body>
</html>

Modified http://d3js.org/d3.v2.js to a secure url

Modified http://gerhobbelt.github.com/bl.ocks.org-hack/fixit.js to a secure url

https://d3js.org/d3.v2.js

https://gerhobbelt.github.com/bl.ocks.org-hack/fixit.js