Built with blockbuilder.org
forked from ideaOwl's block: D3 Workshop: Part 2 - SVGs and d3 Transitions
Created
March 24, 2018 11:05
-
-
Save ideaOwl/7d70deb67d5f7fa726a2dffbb55ebffd to your computer and use it in GitHub Desktop.
(Solution) D3 Workshop: Part 2 - SVGs and d3 Transitions
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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()"/> | |
| <svg width="400px" height="300px"> | |
| <rect x="50" y="150" width="300" | |
| height="100" | |
| fill="blue" /> | |
| <circle cx="100" cy="100" r="90" | |
| stroke="pink" | |
| stroke-width="10" | |
| fill="red" /> | |
| <!-- e1.1 --> | |
| <rect x="50" y="150" width="20" | |
| height="20" | |
| fill="yellow" /> | |
| </svg> | |
| <script> | |
| function runCode() { | |
| let data = [ | |
| {'color': 'purple'}, | |
| {'color': 'green'}, | |
| {'color': 'red'}, | |
| {'color': 'yellow'}, | |
| {'color': 'cyan'}, | |
| {'color': 'orange'}, | |
| ]; | |
| let svg = d3.select('svg'); | |
| // Start coding here | |
| // e2.1 | |
| svg.select('.myRect').remove(); | |
| // e1.2 | |
| svg.append('rect') | |
| .classed('myRect', true) | |
| .attr('width', 20) | |
| .attr('height', 20) | |
| .attr('fill', 'green') | |
| .attr('x', 0) | |
| .attr('y', 0) | |
| // e2.2 | |
| svg.select('.myRect') | |
| .transition() // e2.3 | |
| .duration(500) | |
| .attr('x', Math.floor((Math.random() * 380))) | |
| .attr('y', Math.floor((Math.random() * 280))) | |
| // // e3.1 | |
| // let dataRects = svg.selectAll('.dataRects') | |
| // .data(data) | |
| // .enter() | |
| // .append('rect') | |
| // .classed('dataRects', true) | |
| // .attr('width', 20) | |
| // .attr('height', 20) | |
| // .attr('fill', 'black') | |
| // .attr('x', 0) | |
| // .attr('y', 0) | |
| // // e3.2 | |
| // dataRects | |
| // .transition() // e2.3 | |
| // .duration(500) | |
| // .attr('x', Math.floor((Math.random() * 380))) | |
| // .attr('y', Math.floor((Math.random() * 280))) | |
| // e3.3 | |
| let dataRects = svg.selectAll('.dataRects') | |
| .data(data); | |
| let dataRectsEntered = dataRects | |
| .enter() | |
| .append('rect') | |
| .classed('dataRects', true) | |
| .attr('width', 20) | |
| .attr('height', 20) | |
| .attr('fill', 'white') | |
| .attr('x', 0) | |
| .attr('y', 0) | |
| dataRects = dataRects.merge(dataRectsEntered); | |
| dataRects | |
| .transition() | |
| .duration(500) | |
| .attr('x', () => Math.floor((Math.random() * 380))) | |
| .attr('y', () => Math.floor((Math.random() * 280))) | |
| // .attr('fill', d=>d.color); // e3.4 | |
| .attr('fill', d=>data[Math.floor(Math.random() * data.length)].color); // e3.5 | |
| // e4.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">Create a small yellow 20x20 rect manually</span> | |
| </label> | |
| </li> | |
| <li> | |
| <label> | |
| <input type="checkbox"/> | |
| <span class="exercise">Create a small green 20x20 rect with d3</span> | |
| </label> | |
| </li> | |
| </ol> | |
| <li>Part 2</li> | |
| <ol> | |
| <li> | |
| <label> | |
| <input type="checkbox"/> | |
| <span class="exercise">Delete the green rect with d3 if one exists before creating a new one</span> | |
| </label> | |
| </li> | |
| <li> | |
| <label> | |
| <input type="checkbox"/> | |
| <span class="exercise">Move the green rectangle to a random location</span> | |
| </label> | |
| </li> | |
| <li> | |
| <label> | |
| <input type="checkbox"/> | |
| <span class="exercise">Transition the green rectangle moving</span> | |
| </label> | |
| </li> | |
| </ol> | |
| <li>Part 3</li> | |
| <ol> | |
| <li> | |
| <label> | |
| <input type="checkbox"/> | |
| <span class="exercise">Add rectangles from "data"</span> | |
| </label> | |
| </li> | |
| <li> | |
| <label> | |
| <input type="checkbox"/> | |
| <span class="exercise">Move the rectangles like you do with the green (p1)</span> | |
| </label> | |
| </li> | |
| <li> | |
| <label> | |
| <input type="checkbox"/> | |
| <span class="exercise">Redo p1 but do an update (p2)</span> | |
| </label> | |
| </li> | |
| <li> | |
| <label> | |
| <input type="checkbox"/> | |
| <span class="exercise">Transition the colors to the data's colors</span> | |
| </label> | |
| </li> | |
| <li> | |
| <label> | |
| <input type="checkbox"/> | |
| <span class="exercise">Transition to random colors</span> | |
| </label> | |
| </li> | |
| </ol> | |
| <li>Part 4: 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