Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active Feb 8, 2016
Embed
What would you like to do?
Circular Layout (Slider)
license: gpl-3.0
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
background: #333;
}
input {
position: absolute;
left: 8px;
top: 8px;
width: 240px;
}
</style>
<input type="range" min="0" max="358" step="2">
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var radius = d3.scale.linear()
.domain([0, 9])
.range([120, 240]);
var fill = d3.scale.linear()
.domain([0, 1])
.range(["brown", "steelblue"]);
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500)
.append("g")
.attr("transform", "translate(480,250)");
var g = svg.selectAll("g")
.data(d3.range(0, 360, 2))
.enter().append("g")
.attr("transform", function(d) { return "rotate(" + d + ")"; });
var path = g.selectAll("path")
.data(function(p) {
return d3.range(10).map(function(d) {
return {
x: p, // outer dimension (angle)
y: d, // inner dimension (radius)
z: Math.random()
};
});
})
.enter().append("path")
.attr("d", d3.svg.arc()
.innerRadius(function(d) { return radius(d.y); })
.outerRadius(function(d) { return radius(d.y + 1); })
.startAngle(0)
.endAngle(Math.PI / 90))
.attr("fill", function(d) { return fill(d.z); })
.attr("fill-opacity", 1e-6);
path.transition()
.delay(function(d) { return d.z * 1500; })
.attr("fill-opacity", 1);
d3.select("input")
.on("input", changed)
.on("change", changed);
function changed() {
var value = this.value;
path.attr("fill-opacity", function(d) {
return Math.max(0, 1 - Math.sqrt(Math.abs(d.x - value) / 80));
});
}
</script>
@Kreozot
Copy link

Kreozot commented Aug 18, 2015

Please replace the d3 reference to this: https://cdnjs.cloudflare.com/ajax/libs/d3/1.29.5/d3.min.js
Because now the example is not working.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment