D3: Split icons into columns

#tr-svg {
				height: 75%;
			}

#tr-btn {
				height: 25%;
				text-align: center;
			}
		</style>

</head>
	<body>
		<table id="svg-table">
			<tr id="tr-svg">
				<td>
					<svg id="svg-container">
						<defs>
							<g id="doctor">
								<circle fill="#636464" cx="24" cy="9.6" r="9.6"/>
								<path fill="#636464" d="M33.9,43.5c-1.2,0-2.2-1-2.2-2.2s1-2.2,2.2-2.2c0.6,0,1.2,0.2,1.6,0.6c0.8-0.4,1.3-0.8,1.4-1
									c0-0.6-0.2-3.5-1.3-6.3c-1.3-3.2-3.2-4.8-5.8-4.8c-2.5,0-4.5,1.6-5.8,4.8c-1.1,2.7-1.3,5.6-1.3,6.3c0,0.2,0.6,0.6,1.4,1
									c0.4-0.4,1-0.6,1.6-0.6c1.2,0,2.2,1,2.2,2.2s-1,2.2-2.2,2.2c-1,0-1.8-0.6-2.1-1.5c-2.9-1.2-3.1-2.8-3.1-3.3
									c0-2.7,1.4-12.3,8.3-13.3c0-0.6,0-1.9-0.4-3.2H17c-0.9,1-1.2,2.3-1.2,3.7c1.9,0.2,3.5,1.6,4,3.5c0.5,2.5-1,4.9-3.5,5.5
									c-2.5,0.5-4.9-1-5.5-3.5c-0.5-2.2,0.7-4.4,2.7-5.2c0-1.3,0.1-2.7,0.7-4h-0.6C6.1,22.2,0,28.6,0,36.4v32.8c0,0.7,0.1,1.3,0.4,1.9
									c0.7,1.6,2.4,2.8,4.3,2.8c2.6,0,4.7-2.1,4.7-4.7v-0.4V37.9h1.8v30.3v55.9c0,3.2,2.6,5.9,5.9,5.9c3.2,0,5.9-2.6,5.9-5.9V75.2h2.2
									v48.9c0,3.2,2.6,5.9,5.9,5.9c3.2,0,5.9-2.6,5.9-5.9V57.2V41.6c-0.3,0.1-0.6,0.3-0.9,0.4C35.7,42.9,34.9,43.5,33.9,43.5z"/>
								<path fill="#636464" d="M34.3,22.2h-3.7c0.3,1.3,0.3,2.6,0.3,3.2c6.8,1,8.2,10.6,8.2,13.3c0,0.2-0.1,0.7-0.4,1.3v16.6v12.6
									c0,2.6,2.1,4.7,4.7,4.7c2.6,0,4.7-2.1,4.7-4.7V54.5V36.4C48,28.6,41.9,22.2,34.3,22.2z"/>
								<path fill="#636464" d="M12.9,31c0.3,1.3,1.6,2.1,2.9,1.8c1.3-0.3,2.1-1.6,1.8-2.9c-0.3-1.3-1.6-2.1-2.9-1.8
									C13.5,28.4,12.7,29.7,12.9,31z M15,29.2c0.7-0.1,1.3,0.3,1.5,0.9c0.1,0.7-0.3,1.3-0.9,1.5c-0.7,0.1-1.3-0.3-1.5-0.9
									C13.9,30,14.4,29.4,15,29.2z"/>
							</g>
						</defs>
					</svg>
				</td>
			</tr>
			<tr id="tr-btn">
				<td>
					<div id="click" class="btn btn-primary">Click here</div>
				</td>
			</tr>
		</table>

// Info on size of doctor icons
			// So we can be a little dynamic
			// These shouldn't be changed
			// Unless the icon is changed
			var icon_width_small = 25;
			var padding_width = 5;
			// Total width of icon plus padding
			var width_padding_small = icon_width_small + padding_width;
			var width_padding_large = (icon_width_small * 2) + padding_width;

var icon_height_small = 65;
			var padding_top = 10;
			// Total height of icon plus padding
			var height_padding_small = icon_height_small + padding_top;
			var height_padding_large = (icon_height_small * 2) + padding_top;

// Entire SVG
			var svg = d3.select('svg');
			
			// Group for doctor icons
			var doctors = svg.append("g")
				.attr('class', 'doctors')
				.attr('transform','translate(10,10)')

// Step keeps track of icons on the DOM
			// Used when we're clicking
			// These shouldn't be changed
			var step = 0;
			var total_step = 0;
			var data = [];
			var rows = 0;
			
			// How many icons per row
			// Before we go to another row
			var row_length = 4;
			// Number of columns were breaking the icons into
			var columns_length = 3;
			
			// In order for the clicks to work, we need the data array
			// To be the same length as column_length
			// Ex: If column_length is 3, data should be: [0,1,2]
			for (var num = 0; num < columns_length; num ++ ) { 
				data[num] = num;
			}

// Duration, delay info
			var duration_length = 500;
			var delay_length = 100;

// The icon that is eventually transitioned
			var doctor;

// Add large icon to DOM
  		function addIcon() {
  			doctor = doctors.selectAll()
	  			.data(data)
	  			.enter()
	  			.append("g")
	  			.attr({
	  				transform: function(d) {
	  					return "translate(" + (width / 2 - (width_padding_large / 2)) + "," + (height_padding_small * 3) + ") scale(1)";
	  				},
	  				opacity: 0
	  			})

// Grab svg path from defs and append to DOM
	  		doctor.append("use")
	  			.attr("xlink:href","#doctor")

doctor.transition()
	  			.duration(duration_length - delay_length)
	  			.attr({
	  				opacity: 1
	  			})
  		}

// Transition large doctor icon to smaller icon
  		function transitionIcon() {
	  		doctor.transition()
	  			.delay(delay_length)
	  			.duration(duration_length)
	  			.ease("sin-in-out")
	  			.attr({
		  			transform: function(d) {
		  				// We're placing the icons in three different columns
		  				// This calcluates where the icons need to be placed within those column
		  				// It divides the width of the SVG by three to get the three column positions
		  				// Then multiplies it by the data value of the icon, which is either 0, 1 or 2
		  				// This allows the icons to spread across the DOM
		  				var columns = d * (width / columns_length + (row_length / 2 * width_padding_small) );

// The first icon in each row
		  				if (step % row_length === 0) {
		  					var translate_one = columns;
		  				// To prevent the second, third, etc. icon from being placed on top of the first icon
		  				// We add the width plus padding times the step to have the icons appear next to each other
		  				} else {
		  					var translate_one = columns + (width_padding_small * step)
		  				}
		  				
		  				return "translate(" + translate_one + "," + (rows * height_padding_small) + ") scale(0.5)";
		  			},
		  		})
			}

// Add another icon every click
			function clickToAdd() {
			  // Transition icon
			  transitionIcon();

// Every several icons we are going to create a new row
			  // And place the icons on that row
			  if (step > 0 && step % (row_length - 1) === 0) {
			  	step = -1;
			  	rows += 1;
			  }

// Keeps track of what icon we're on
			  // So we can create new rows
			  step += 1;
			  total_step += 1;

// Add another to DOM
			  setTimeout(addIcon, duration_length + delay_length);

// Close icon add
			};

// Add initial icon
			addIcon();

// Click event
			$('#click').click(function() {
				clickToAdd();
			})

</script>
	</body>
</htmL>

https://code.jquery.com/jquery-1.12.1.min.js

https://d3js.org/d3.v3.min.js