Skip to content

Instantly share code, notes, and snippets.

@ideaOwl

ideaOwl/.block

Last active March 24, 2018 10:15
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ideaOwl/02eb622a0eb585f1267938b1a64401ec to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ideaOwl/02eb622a0eb585f1267938b1a64401ec to your computer and use it in GitHub Desktop.
Download ZIP
(Solution) D3 Workshop: Part 1 - Basic HTML, d3, and Data Binding
Raw
.block
license: mit
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment