D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
ideaOwl
Full window
Github gist
D3 Workshop: Part 1 - Basic HTML, d3, and Data Binding
Built with
blockbuilder.org
<!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> </div> <!-- ---------------------------------------------------------- --> <!-- ---------------------------------------------------------- --> <!-- 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>
https://d3js.org/d3.v4.min.js