ZerkTheMighty/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from ideaOwl's block: D3 Workshop: Part 2 - SVGs and d3 Transitions
forked from ZerkTheMighty's block: D3 Workshop: Part 2 - SVGs and d3 Transitions

  
## index.html
<!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
        .style('display', 'none')
        .transition()
        .duration(1000)
        .attr("x", Math.floor(Math.random() * 300))
        .attr('y', Math.floor(Math.random() * 200))

      let dataRects = svg
      .selectAll('detaRect')
      .data(data)

      let dataRectsNew = dataRects
      .enter()
      .append('rect')
      .classed('datarect', true)
      .attr('x', 0)
      .attr('y', 0)
      .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=>d.color)
    };
  </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>
	<!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
	.style('display', 'none')
	.transition()
	.duration(1000)
	.attr("x", Math.floor(Math.random() * 300))
	.attr('y', Math.floor(Math.random() * 200))

	let dataRects = svg
	.selectAll('detaRect')
	.data(data)

	let dataRectsNew = dataRects
	.enter()
	.append('rect')
	.classed('datarect', true)
	.attr('x', 0)
	.attr('y', 0)
	.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=>d.color)
	};
	</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>