| license: mit |
Built with blockbuilder.org
forked from ideaOwl's block: D3 Workshop: Part 1 - Basic HTML, d3, and Data Binding
forked from MandyMeindersma's block: D3 Workshop: Part 1 - Basic HTML, d3, and Data Binding
forked from MandyMeindersma's block: D3 Workshop: Part 1 - Basic HTML, d3, and Data Binding
forked from MandyMeindersma's block: D3 Workshop: Part 1 - Basic HTML, d3, and Data 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> | |
| <p class="standard">Para 3</p> | |
| <p class="standard">Para 4</p> | |
| </div> | |
| <script> | |
| function runCode(){ | |
| let myData = ["1", "2"]; | |
| let sandbox = d3.select('#sandbox'); | |
| sandbox.selectAll('p.standard') | |
| .style('font-size', '35px') | |
| .text('Hello!'); | |
| let newParas = sandbox.selectAll('p.newPara') | |
| .data(myData) | |
| .enter() | |
| .append('p') | |
| .classed('newPara', true) | |
| // .text(function(d){return d}) | |
| .text(d=>d) | |
| .on('click', function(d){ | |
| console.log("hello") | |
| }); | |
| } | |
| </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> |