Demonstration of DOM manipulation using D3 from D3 in Depth book by Peter Cook.
Last active
April 8, 2019 12:25
-
-
Save d3indepth/e890d5ad36af3d949f275e35b41a99d6 to your computer and use it in GitHub Desktop.
DOM Manipulation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: gpl-3.0 | |
height: 240 | |
border: no |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<head> | |
<title>DOM Manipulation</title> | |
</head> | |
<style> | |
body { | |
font-family: "Helvetica Neue", Helvetica, sans-serif; | |
font-size: 14px; | |
} | |
#wrapper { | |
height: 220px; | |
} | |
.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 id="wrapper"> | |
</div> | |
<div class="menu"> | |
<button onClick="updateScores();">Update scores</button> | |
<button onClick="addPerson();">Add person</button> | |
<button onClick="removePerson();">Remove person</button> | |
</div> | |
<!-- <div class="data-view"></div> --> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script> | |
<script> | |
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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment