| license: mit |
Built with blockbuilder.org
forked from ideaOwl's block: D3 Workshop: Part 2 - SVGs and d3 Transitions
forked from Kristianaaron's block: D3 Workshop: Part 2 - SVGs and d3 Transitions
forked from Kristianaaron's block: D3 Workshop: Part 2 - SVGs and d3 Transitions
| <!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" /> | |
| <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 | |
| let d3Rect = svg.append('rect') | |
| .attr('x',0) | |
| .attr('y',0) | |
| .attr('width', 20) | |
| .attr('height', 20) | |
| .attr('fill',green); | |
| d3Rect | |
| .transition() | |
| .duration(1000) | |
| .style('display', none) | |
| .attr('x', Math.floor(math.random()*300)) | |
| .attr('y', Math.floor.(math.random()*200)); | |
| let dataRects = svg | |
| .selectAll('dataRect') | |
| .data(data); | |
| // for rects that dont exist, but the data is new | |
| // so make them | |
| let dataRectNew = dataRects | |
| .enter() | |
| .append('rect') | |
| .classed('dataRect', true) | |
| .attr('width', 20) | |
| .attr('height', 20) | |
| .attr('fill',green) | |
| .transition() | |
| .duration(1000) | |
| .attr('x', () => Math.floor(math.random()*300)) | |
| .attr('y', () => Math.floor.(math.random()*200)) | |
| ; | |
| dataRects = dataRects.merge(dataRectsNew); | |
| dataRects | |
| .transition() | |
| .duration(1000) | |
| .attr('x', () => Math.floor(math.random()*300)) | |
| .attr('y', () => Math.floor.(math.random()*200)) | |
| //.attr('fill', d=>.color) | |
| .attr('fill', d=>[Math.floor(Math.random()data/length)].color), 1000); | |
| }; | |
| </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> |