Skip to content

Instantly share code, notes, and snippets.

@Cirieneve

Cirieneve/.block

Last active March 24, 2018 17:35
Show Gist options
  • Save Cirieneve/963eaf75014a8f59bafcb87be838bbf8 to your computer and use it in GitHub Desktop.
Save Cirieneve/963eaf75014a8f59bafcb87be838bbf8 to your computer and use it in GitHub Desktop.
Download ZIP
D3 Workshop: Part 2 - SVGs and d3 Transitions
Raw
.block
license: mit
Raw
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');
// 380 is related to width of SVG since the width is 400 - similar for height
d3Rect
.transition()
.duration(1000)
.style('display', 'none')
.attr('x', Math.floor(Math.random()*380))
.attr('y', Math.floor(Math.random()*280));
let dataRects = svg
.selectAll('.dataRect')
.data(data);
let dataRectsNew = dataRects
.enter()
.append('rect')
.classed('dataRect', true)
.attr('width', 20)
.attr('height', 20)
.attr('fill', 'green')
.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);
// For all rectangles, regardless if they were there or not before
dataRects
.transition()
.duration(1000)
.attr('x', () => Math.floor(Math.random()*380))
.attr('y', () => Math.floor(Math.random()*280))
//.attr('fill', d=>d.color)
.attr('fill', d=>data[Math.floor(Math.random()*data.length)].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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment