Skip to content

Instantly share code, notes, and snippets.

@d3indepth
Last active April 8, 2019 12:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save d3indepth/e890d5ad36af3d949f275e35b41a99d6 to your computer and use it in GitHub Desktop.
Save d3indepth/e890d5ad36af3d949f275e35b41a99d6 to your computer and use it in GitHub Desktop.
DOM Manipulation
license: gpl-3.0
height: 240
border: no
<!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