D3 Workshop: Part 2 - SVGs and d3 Transitions

forked from ideaOwl'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>

<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)
        .attr('x', Math.floor(Math.random() * 380))
      	.attr('y', Math.floor(Math.random() * 280))
      	.attr('fill', data[Math.floor(Math.random() * 5)]['color']);
        */
      
      let dataRects = svg
      								.selectAll('.dataRect')
      								.data(data);
      
      let dataRectsNew = dataRects
      										.enter()
      										.append('rect')
      										.classed('dataRect',true)
      										.attr('width', Math.floor(Math.random() * 50))
      										.attr('height', Math.floor(Math.random() * 50))
      										.attr('fill', data[Math.floor(Math.random() * 5)]['color'])
      										.attr('x',0)
      										.attr('y',0)
      										.transition()
      										.duration(1000)
      										.attr('x', Math.floor(Math.random() * 380))
      										.attr('y', Math.floor(Math.random() * 280));
      dataRects = dataRects.merge(dataRectsNew);
      dataRects
      	.transition()
      	.duration(1000)
      	.attr('x', Math.floor(Math.random() * 380))
      	.attr('y', Math.floor(Math.random() * 280))
      	.attr('fill', d=>d.color);
      
    };
  </script>

<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>

https://d3js.org/d3.v4.min.js