ne8il/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Binding name, color, and height to some div elements. Almost looks like a chart...

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<style>

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 960px;
  position: relative;
  padding:20px;
}

.chartDiv {
  display:inline-block;
	position:relative;
}

.namesDiv {
	display:inline-block;
	position:relative;
	height:30px;
	line-height:30px;
	width:100px;
	text-align:center;
}

</style>
</head>
<body>
</body>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

	var names = [{'name' : 'Frank', 'color' : 'blue', 'weight' : 180},
				{'name' : 'Tom', 'color' : 'red', 'weight' : 230},
				{'name' : 'Peter', 'color' : 'green', 'weight' : 190},
				{'name' : 'Mary', 'color' : 'purple', 'weight' : 150}];

	var width = '100px';

	var div = d3.select('body').append('div');

	var selection = div.selectAll('div')
						.data(names);

	selection.enter()
	.append('div')
	.classed('chartDiv', true)
	.style('background-color', function(d){
		return d['color']
	})
	.style('height', function(d){
		return d['weight'] + 'px';
	})
	.style('width', width);


	/** Add Names to X Axis */
	var namesSelection = div
	.append('div')
	.selectAll('div')
	.data(names)
	.enter()
	.append('div')
	.classed('namesDiv', true)
	.html(function(d) {
		return d['name']
	});

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<style>

	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	width: 960px;
	position: relative;
	padding:20px;
	}

	.chartDiv {
	display:inline-block;
	position:relative;
	}

	.namesDiv {
	display:inline-block;
	position:relative;
	height:30px;
	line-height:30px;
	width:100px;
	text-align:center;
	}

	</style>
	</head>
	<body>
	</body>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var names = [{'name' : 'Frank', 'color' : 'blue', 'weight' : 180},
	{'name' : 'Tom', 'color' : 'red', 'weight' : 230},
	{'name' : 'Peter', 'color' : 'green', 'weight' : 190},
	{'name' : 'Mary', 'color' : 'purple', 'weight' : 150}];

	var width = '100px';

	var div = d3.select('body').append('div');

	var selection = div.selectAll('div')
	.data(names);

	selection.enter()
	.append('div')
	.classed('chartDiv', true)
	.style('background-color', function(d){
	return d['color']
	})
	.style('height', function(d){
	return d['weight'] + 'px';
	})
	.style('width', width);


	/** Add Names to X Axis */
	var namesSelection = div
	.append('div')
	.selectAll('div')
	.data(names)
	.enter()
	.append('div')
	.classed('namesDiv', true)
	.html(function(d) {
	return d['name']
	});

	</script>