On timer
===== forked from dbuezas's block: Transition Pie Chart
license: mit |
On timer
===== forked from dbuezas's block: Transition Pie Chart
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
width: 960px; | |
height: 500px; | |
position: relative; | |
} | |
svg { | |
width: 100%; | |
height: 100%; | |
} | |
path.slice{ | |
stroke-width:2px; | |
} | |
polyline{ | |
opacity: .3; | |
stroke: black; | |
stroke-width: 2px; | |
fill: none; | |
} | |
</style> | |
<body> | |
<button class="randomize">randomize</button> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script> | |
var svg = d3.select("body") | |
.append("svg") | |
.append("g") | |
svg.append("g") | |
.attr("class", "slices"); | |
svg.append("g") | |
.attr("class", "labels"); | |
svg.append("g") | |
.attr("class", "lines"); | |
var width = 960, | |
height = 450, | |
radius = Math.min(width, height) / 2; | |
var pie = d3.layout.pie() | |
.sort(null) | |
.value(function(d) { | |
return d.value; | |
}); | |
var arc = d3.svg.arc() | |
.outerRadius(radius * 0.8) | |
.innerRadius(radius * 0.4); | |
var outerArc = d3.svg.arc() | |
.innerRadius(radius * 0.9) | |
.outerRadius(radius * 0.9); | |
svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); | |
var key = function(d){ return d.data.label; }; | |
var color = d3.scale.ordinal() | |
.domain(["Lorem ipsum", "dolor sit", "amet", "consectetur", "adipisicing", "elit", "sed", "do", "eiusmod", "tempor", "incididunt"]) | |
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); | |
function randomData (){ | |
var labels = color.domain(); | |
return labels.map(function(label){ | |
return { label: label, value: Math.random() } | |
}); | |
} | |
change(randomData()); | |
d3.select(".randomize") | |
.on("click", function(){ | |
change(randomData()); | |
}); | |
function change(data) { | |
/* ------- PIE SLICES -------*/ | |
var slice = svg.select(".slices").selectAll("path.slice") | |
.data(pie(data), key); | |
slice.enter() | |
.insert("path") | |
.style("fill", function(d) { return color(d.data.label); }) | |
.attr("class", "slice"); | |
slice | |
.transition().duration(1000) | |
.attrTween("d", function(d) { | |
this._current = this._current || d; | |
var interpolate = d3.interpolate(this._current, d); | |
this._current = interpolate(0); | |
return function(t) { | |
return arc(interpolate(t)); | |
}; | |
}) | |
slice.exit() | |
.remove(); | |
/* ------- TEXT LABELS -------*/ | |
var text = svg.select(".labels").selectAll("text") | |
.data(pie(data), key); | |
text.enter() | |
.append("text") | |
.attr("dy", ".35em") | |
.text(function(d) { | |
return d.data.label; | |
}); | |
function midAngle(d){ | |
return d.startAngle + (d.endAngle - d.startAngle)/2; | |
} | |
text.transition().duration(1000) | |
.attrTween("transform", function(d) { | |
this._current = this._current || d; | |
var interpolate = d3.interpolate(this._current, d); | |
this._current = interpolate(0); | |
return function(t) { | |
var d2 = interpolate(t); | |
var pos = outerArc.centroid(d2); | |
pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1); | |
return "translate("+ pos +")"; | |
}; | |
}) | |
.styleTween("text-anchor", function(d){ | |
this._current = this._current || d; | |
var interpolate = d3.interpolate(this._current, d); | |
this._current = interpolate(0); | |
return function(t) { | |
var d2 = interpolate(t); | |
return midAngle(d2) < Math.PI ? "start":"end"; | |
}; | |
}); | |
text.exit() | |
.remove(); | |
/* ------- SLICE TO TEXT POLYLINES -------*/ | |
var polyline = svg.select(".lines").selectAll("polyline") | |
.data(pie(data), key); | |
polyline.enter() | |
.append("polyline"); | |
polyline.transition().duration(1000) | |
.attrTween("points", function(d){ | |
this._current = this._current || d; | |
var interpolate = d3.interpolate(this._current, d); | |
this._current = interpolate(0); | |
return function(t) { | |
var d2 = interpolate(t); | |
var pos = outerArc.centroid(d2); | |
pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1); | |
return [arc.centroid(d2), outerArc.centroid(d2), pos]; | |
}; | |
}); | |
polyline.exit() | |
.remove(); | |
}; | |
</script> | |
</body> |
GIF89aAew !�NETSCAPE2.0 !� , Ae� | |
+8'5')6$3"))60<* '".".&.40" 2(1.* E TD'R&.@*4H+7U09V3<n<@$E^Ge1DW(Mk*Rm;Kb4It6Ix5Tk8WtEU-I1'b?c;+R5S`?`UC1dBhJ'`N5kS+hS7rO/rB;|Z/u[8r`?EOZKQKJTZUOGYUIVVXVLdWa_IgzZdi]grvLClGliaNkcUxfH{lR|pUjjjcdwkrvskhqltwslvvu7T�>b�JZ�Jh�Bl�Iu�Sd�Sn�Ut�Vv�{^�lk�jx�l{�zf�tt�zz�i{�}�tZ��~��v��v��y��u��|��{�ӕS&�g:�[)�c �d-�RJ�Yj�tX�au�rm�yx�ei�ye�z|�]T�jW�sh�p �t4�} �zJ�s���v��Z��h��q��f��v��j��}��o��y܁4�� �,��2ֆO֙i١[Ӫy�I��i��s��N��m��y��������������������������������������������������������������������������������ƕ�᪬���ʩ�Ҹ����ȳ������ٻ�ͷ�ׯ����Ø�ү�ƪ�ȶ�ǽ�Ю�ֶ�ػ�䴐龡ƻ��¦�ö�ȫ�Ʒ�ۺ�͏�ɨ�ɵ�ӫ�ո�٦�ۺ��������������������������������������������������������������������������������������������� � H����*\Ȱ�Ç#J�H��ŋ3j�ȱ�Ǐ C�I��ɓ(S�\ɲ�˗0cʜI��͛8I&j3��@� | |
J��Q�O���W�JhM���W��σzv)�G�C���sJ��ٳ%��קJ��Pa����+��Z��/oW��#h��?Y��� ���?U����3�T]��`7 ^V]0Q���8�(|��C��4��L������g�Õ�iB0 �;%�D����$9 ��"A��p (be �->��&�Bu�4� `P�Dw8�q(� UXW�T;��Y�b��[nQ%P#��*�$� | |
A��KXnD�ChডL���� �(�$�h�(���,�8�B� �HT��i��|�l <.��?hU�}a��U� P� �y�ay�g�W� �D�Ec�@��� L� �5�g>�o�G�7 | |
��k.H� g`�y&2�5CRlh�K���6�裐F*餔Vj饘f��0*5P�8��� P �CF�=H | |
��$|C�L"�ÃT�� �����.3�DҪ�D��֥6c�7���.D��AAzp��?���&',��覫���8�*on� | |
��U͡ǟ+��o�T�j��(�=�����*� � | |
�����OpfOkm��Ʈl_j�������js�� kH�ϸ�%���8���<����@-��D���K��;���<QD�Mj� �h��2��}������ё�< |