Built with blockbuilder.org
forked from ideaOwl's block: D3 Workshop - Part 1 - Basic HTML and D3 Binding
license: mit |
Built with blockbuilder.org
forked from ideaOwl's block: D3 Workshop - Part 1 - Basic HTML and D3 Binding
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
</head> | |
<body> | |
<input type="button" | |
value="Run d3 code" | |
onclick="runCode()"/> | |
<div id="sandbox"> | |
<p class="standard">Para 1</p> | |
<p class="standard">Para 2</p> | |
<!-- e1.1 --> | |
<p class="standard">Para 3</p> | |
<p class="standard">Para 4</p> | |
</div> | |
<script> | |
// e1.2 | |
function runCode(){ | |
var sandbox = d3.select('#sandbox'); | |
// e1.3 & e1.4 | |
sandbox.selectAll('p.standard') | |
.style('font-size', '20px') | |
.text('Changed Para'); | |
// e2.1 | |
let myData = ['New Para', 'New Para']; | |
// e2.2 | |
let newParas = sandbox.selectAll('p.new') | |
.data(myData) | |
.enter() | |
.append('p') | |
.classed('new', true) | |
.text(d=>d); | |
// e2.3 | |
newParas.on('click', function(d){ | |
console.log('Hello!'); // e2.4 | |
d3.select(this).text('Changed the text!') // e2.5 | |
}) | |
// e3.1 | |
d3.selectAll('input').property('checked', true); | |
} | |
</script> | |
<!-- ---------------------------------------------------------- --> | |
<!-- ---------------------------------------------------------- --> | |
<!-- Ignore this text below, it's not relevant for the exercise --> | |
<!-- ---------------------------------------------------------- --> | |
<!-- ---------------------------------------------------------- --> | |
<p class="exercise"> | |
<hr/> | |
<h3>Exercise:</h3> | |
<ul> | |
<li>Part 1</li> | |
<ol> | |
<li> | |
<label> | |
<input type="checkbox"/> | |
<span class="exercise">Add Para 3 and Para 4 Manually</span> | |
</label> | |
</li> | |
<li> | |
<label> | |
<input type="checkbox"/> | |
<span class="exercise">Debug the issue with the button</span> | |
</label> | |
</li> | |
<li> | |
<label> | |
<input type="checkbox"/> | |
<span class="exercise">Make the text larger</span> | |
</label> | |
</li> | |
<li> | |
<label> | |
<input type="checkbox"/> | |
<span class="exercise">Change the text</span> | |
</label> | |
</li> | |
</ol> | |
<li>Part 2</li> | |
<ol> | |
<li> | |
<label> | |
<input type="checkbox"/> | |
<span class="exercise">Add an array of two pieces of text, name it "myData"</span> | |
</label> | |
</li> | |
<li> | |
<label> | |
<input type="checkbox"/> | |
<span class="exercise">Append the data as new paragraphs</span> | |
</label> | |
</li> | |
<li> | |
<label> | |
<input type="checkbox"/> | |
<span class="exercise">Class the paragraph</span> | |
</label> | |
</li> | |
<li> | |
<label> | |
<input type="checkbox"/> | |
<span class="exercise">console.log('Hello!') on new paragraph click</span> | |
</label> | |
</li> | |
<li> | |
<label> | |
<input type="checkbox"/> | |
<span class="exercise">Change the text on click</span> | |
</label> | |
</li> | |
</ol> | |
<li>Part 3: You're done!</li> | |
<ol> | |
<li> | |
<label> | |
<input type="checkbox"/> | |
<span class="exercise">Check everything off using d3 on clicking button</span> | |
</label> | |
</li> | |
</ol> | |
</ul> | |
</p> | |
<style> | |
body { | |
margin: 20px; | |
} | |
ul > li { | |
font-weight: bold; | |
margin: 5px 0px; | |
} | |
ol li { | |
font-weight: normal; | |
margin-bottom: 0px; | |
} | |
ol li label { | |
cursor: pointer; | |
} | |
input:checked~.exercise { | |
text-decoration: line-through; | |
} | |
</style> | |
</body> |