d3indepth/.block

## .block
license: gpl-3.0
height: 130
border: no

## README.md

      
    Raw
  

              README.md
            
          
    Data join without key function.
From D3 in Depth book by Peter Cook.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>Data join without key function</title>
</head>

<style>
body {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 14px;
  color: #333;
}
#content {
	position: relative;
	height: 40px;
}
#content div {
	position: absolute;
	margin: 2px;
	background-color: orange;
	color: white;
	padding: 8px;
	width: 14px;
	height: 14px;
	text-align: center;
}
</style>

<body>
	<div id="content">
	</div>

	<div id="menu">
		<button onClick="doInsert();">Insert element</button>
	</div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
  <script>
var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var i = 25;

function doInsert() {
	if(i < 0)
		return;

	var myData = letters.slice(i).split('');
	i--;
	update(myData);
}

function update(data) {
	var u = d3.select('#content')
		.selectAll('div')
		.data(data);

	u.enter()
		.append('div')
		.merge(u)
		.transition()
		.style('left', function(d, i) {
			return i * 32 + 'px';
		})
		.text(function(d) {
			return d;
		});
}

doInsert();

  </script>
</body>
</html>

## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<title>Data join without key function</title>
	</head>

	<style>
	body {
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	font-size: 14px;
	color: #333;
	}
	#content {
	position: relative;
	height: 40px;
	}
	#content div {
	position: absolute;
	margin: 2px;
	background-color: orange;
	color: white;
	padding: 8px;
	width: 14px;
	height: 14px;
	text-align: center;
	}
	</style>

	<body>
	<div id="content">
	</div>

	<div id="menu">
	<button onClick="doInsert();">Insert element</button>
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
	<script>
	var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
	var i = 25;

	function doInsert() {
	if(i < 0)
	return;

	var myData = letters.slice(i).split('');
	i--;
	update(myData);
	}

	function update(data) {
	var u = d3.select('#content')
	.selectAll('div')
	.data(data);

	u.enter()
	.append('div')
	.merge(u)
	.transition()
	.style('left', function(d, i) {
	return i * 32 + 'px';
	})
	.text(function(d) {
	return d;
	});
	}

	doInsert();

	</script>
	</body>
	</html>