DOM Manipulation

Demonstration of DOM manipulation using D3 from D3 in Depth book by Peter Cook.

forked from d3indepth's block: DOM Manipulation

<!DOCTYPE html>
<meta charset="utf-8">
<head>
	<title>DOM Manipulation</title>
</head>

.person {
		height: 20px;
		position: relative;
	}
	.person .label {
		width: 90px;
		text-align: right;
	}
	.person .bar {
		height: 19px;
		background-color: steelblue;
		position: absolute;
		left: 100px;
	}
	.person div {
		display: inline-block;
	}
	.data-view {
		padding: 10px;
		color: #777;
		font-size: 12px;
		width: 700px;
	}
</style>

<body>

<div class="menu">
		<button onClick="updateScores();">Update scores</button>
		<button onClick="addPerson();">Add person</button>
		<button onClick="removePerson();">Remove person</button>
	</div>

var names = ['Andy', 'Beth', 'Craig', 'Diane', 'Evelyn', 'Fred', 'Georgia', 'Harry', 'Isabel', 'John'];
	var myData = [];
	var barWidth = 400;
	var barScale = d3.scaleLinear().domain([0, 100]).range([0, barWidth]);

function randomInteger(n) {
		return Math.floor(10 * Math.random());
	}

function initialiseData() {
		myData = [
		  {
		    "name": "Andy",
		    "score": 37
		  },
		  {
		    "name": "Beth",
		    "score": 39
		  },
		  {
		    "name": "Craig",
		    "score": 31
		  },
		  {
		    "name": "Diane",
		    "score": 35
		  },
		  {
		    "name": "Evelyn",
		    "score": 38
		  }
		];
	}

function updateBars(data) {
		var u = d3.select('#wrapper')
			.selectAll('.person')
			.data(data, function(d) {
				return d.name;
			});

var entering = u.enter()
			.append('div')
			.classed('person', true);

entering.append('div')
			.classed('label', true)
			.text(function(d) {
				return d.name;
			});

entering.append('div')
			.classed('bar', true);

entering
			.merge(u)
			.select('.bar')
			.transition()
			.style('width', function(d) {
				return barScale(d.score) + 'px';
			});

u.exit().remove();
	}

function addPerson() {
		if(myData.length === 10)
			return;

myData.push({
			name: names[myData.length],
			score: 30 + randomInteger(70)
		});

update(myData);
	}

function removePerson() {
		if(myData.length === 0)
			return;

myData.pop();

update(myData);
	}

function updateScores() {
		for(var i = 0; i < myData.length; i++) {
			myData[i].score = 30 + randomInteger(70);
		}

update(myData);
	}

function updateDataView() {
		d3.select('.data-view').text('Array: ' + JSON.stringify(myData));
	}

function update() {
		updateBars(myData);
		updateDataView(myData);
	}

initialiseData();
	update(myData);

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

https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js