Skip to content

Instantly share code, notes, and snippets.

@cartoda

cartoda/README.md

Last active August 29, 2015 14:11
Show Gist options
  • Save cartoda/035f893cd5fc86bb955f to your computer and use it in GitHub Desktop.
Save cartoda/035f893cd5fc86bb955f to your computer and use it in GitHub Desktop.
Download ZIP
Simple transitions with D3.js
Raw
README.md

This example shows how use the transitions with D3.js. The transitions used are movement, resizing and color change of SVG objects. The examples are based on the ones found at blog.visual.ly

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples of D3 transitions</title>
<style>
svg {
border: 1px solid black;
}
fieldset {
min-width: 0;
width: 50%;
}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
function removeTransitions(){
d3.select("path").transition().attr("d", "M0,0 l50,13 l-25,25 Z").attr("transform", "translate(350, 75)").style("fill", "white");
d3.select("rect").transition().attr("transform", "translate(0)").attr("width", 50).attr("height", 50).style("fill", "white");
d3.select("circle").transition().attr("transform", "translate(0)").attr("r", 25).style("fill", "white");
}
function runTransitions(){
var moveCheckboxSelected = d3.select("#move").property("checked");
var sizeCheckboxSelected = d3.select("#size").property("checked");
var colorCheckboxSelected = d3.select("#color").property("checked");
if(!moveCheckboxSelected && !sizeCheckboxSelected && !colorCheckboxSelected){
return;
}
var pathTransition = d3.select("path").transition();
var rectTransition = d3.select("rect").transition();
var circleTransition = d3.select("circle").transition();
if(moveCheckboxSelected){
pathTransition.attr("transform", "translate(250, 50)").duration(1000);
rectTransition.attr("transform", "translate(150)").duration(1000);
circleTransition.attr("transform", "translate(150)").duration(1000);
}
if(sizeCheckboxSelected){
pathTransition.attr("d", "M0,0 l100,25 l-50,50 z").duration(1000);
rectTransition.attr("width", "100").attr("height", "100").duration(1000);
circleTransition.attr("r", "50").duration(1000);
}
if(colorCheckboxSelected){
pathTransition.style("fill", "red").duration(1000);
rectTransition.style("fill", "blue").duration(1000);
circleTransition.style("fill", "green").duration(1000);
}
}
</script>
</head>
<body>
<div id="simpleShapes" width="50%" height="300px">
<svg width="50%" height="300">
<path d="M0,0 l50,13 l-25,25 Z" stroke="red" fill="white" transform="translate(350,75)" />
<rect x="50" y="75" width="50" height="50" stroke="blue" fill="white" />
<circle cx="225" cy="75" r="25" stroke="green" fill="white" />
</svg>
<div width="50%">
<fieldset>
<legend>Select the transition to apply</legend>
<input id="move" type="checkbox" name="move" value="move" />Move<br />
<input id="size" type="checkbox" name="size" value="size" />Size<br />
<input id="color" type="checkbox" name="color" value="color" />Color<br /><br />
<button onclick="runTransitions()">Run transitions</button>
<button onclick="removeTransitions()">Remove transitions</button>
</fieldset>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment