Skip to content

Instantly share code, notes, and snippets.

@timurista
Last active January 22, 2019 15:10
Show Gist options
  • Save timurista/280b361fc925bbd8ef6cc894666bf9e7 to your computer and use it in GitHub Desktop.
Save timurista/280b361fc925bbd8ef6cc894666bf9e7 to your computer and use it in GitHub Desktop.
Pie Chart Rotation on Click
license: mit
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.arc text {
font: 10px sans-serif;
text-anchor: middle;
}
.arc path {
stroke: #fff;
</style>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
radius = Math.min(width, height) / 2,
g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var color = d3.scaleOrdinal(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var data = [ {age:"<5", population: 2704659},{age:"5-13", population: 4499890},{age:"14-17", population: 2159981},{age:"18-24", population: 3853788},{age:"25-44", population: 14106543},{age:"45-64", population: 8819342},{age:"≥65", population: 612463} ]
var pie = d3.pie()
.sort(null)
.value(function(d) { return d.population; });
var path = d3.arc()
.outerRadius(radius - 10)
.innerRadius(radius - 120);
var label = d3.arc()
.outerRadius(radius - 40)
.innerRadius(radius - 40);
var arc = g.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
arc.append("path")
.attr("d", path)
.attr("fill", function(d) { return color(d.data.age); })
.on("click",function(d) {
// The amount we need to rotate:
var rotate = 180-(d.startAngle + d.endAngle)/2 / Math.PI * 180;
// Transition the pie chart
g.transition()
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ") rotate(" + rotate + ")")
.duration(1000);
// Τransition the labels:
text.transition()
.attr("transform", function(dd) {
return "translate(" + label.centroid(dd) + ") rotate(" + (-rotate) + ")"; })
.duration(1000);
});
var text = arc.append("text")
.attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; })
.attr("dy", "0.35em")
.text(function(d) { return d.data.age; });
</script>
��ࡱ�>�� ��������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������
������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������Root Entry��������@Y���U�����256_b23a88532b8243e7*������������o��������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������W(�� �)R�W(�� �)R�����JFIF��C     ��C      ��x�"��
���}!1AQa"q2���#B��R��$3br�
%&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz���������������������������������������������������������������������������
���w!1AQaq"2�B���� #3R�br�
$4�%�&'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz�������������������������������������������������������������������������� ?���(��(��(��(��(��൯�~��>�c*�^��yyU��ʖ����0�)5�����LV9~�d�*x9��U8���_2Ϩ`���'�a����n������j؝R�yi���ߦ�>�j� ��U-}p�*N[ aX���8��?�e���K�71�����Z�"V�Ojğ1 �,�/����~j��Y�6��� ʏ��+Rq�o{5��ɻŧ{-n�^o������JJV����wkI5���{�o]���,V�
��З%O��?
���/�<��?v�X���Ԍ� ���V���6��.o�̺���;?�ɨ+ �>+��겼WWb�KkX�Y�H�#s�)*�G��+��q�C �2# �w�ؑV����ɒ�?��D�QE1�-F�L� {q,K䄕���c#�/�U;�0�d�ߝ���� �x>�G[��t����ᧉ���I��ru��{���=�I��.� ��� ,2�1L/���>�:��u��E���=gj5������.�c�q�!��pOLg��^��ы��6��]F�@�$NVR
�y�A�*J��E�&���<�.�H ���7!�>2pH�W�������-Ċ83A�p1�������Y�ʜ`�ʃ[k����Yz�4����*�'A���2� oC�L��r�����jW6�QH�(��(��(��l���J�QA,�p�I�9$�� ����M/���
ן�����n�1A�d�LF&��]_��v]Yۆ��.X/V������G�x��N���\?�zA)o����#S��rFJ+�����?���E<�E�<[�HR3�����3���ʢ�!<����L��fbK3�I<�O$�I��u���u��c�����_M����e����S�g��ut����$�i-�Y�fIQ�+)!��� �A�G �+��u=2���Ȇ��k�!I��eAw+$��˺�`>a�^���-��:�C��.!9�b����6�l�,��
�`nz�\~V���|�|V_W��v��J+k��9�J뮚��������.]CL񆖚�Q[Ά��Tu "q��>#�~bFܫz��u��h���4e� ���؎Ő�c޹;M K�TK[H"X�j�U
���(`y�~���s]Paqc ��� �$�w#1<|��h��^�ccO*
��W4y�~zwz%�������~(��tcVV��.[ۖ{�}l����� Q_�����-5Kw���9��x�P�îX#=�5b�(��(;ķ(l�mv�"<Җ�Uq�=p�?�\�ox�奞���c[����:�ⲏ�V fz0�(��
(�.�`��Kp��q�s��q3���Gl�p9� B�J�[�^���z�;���^��ώ�v����.�_a�25�%��������ca�p�b�5���(U���WbT��Y��6�H�hVr����PoZ^[�·�$��ʺ0e#،��Q_h3�|.��t���,�V\�7mp��` N���W>Ǣ�+����(����i���}}"�m�����$�$��)����]����#��K;�@��I�M|���-ߎov�b�!c����̓#�� %W$�?���G�
�_��v]׭���.�_�E�� �D�>%|U��>�t:J�v�iH��c�A�Pp�0]�qE�kJ�������D~�F�hǖ
�~/�}[�QE`tX��{ ��
���*��;�z$ W��;��$�nK[�$��T1_�z��@8Y/j��I�,�lx� ��ڡ���/�D^�ⱴi���&KC�s���`;Uc��
��i݉�իK�,�#��dN��S��x##�x5�1��qq��%5n�����sA��{�i,] S{�8���W���Y~�*����\2G��8x��1��x؁�,��Gl�j�������5t�4�O��yE���֍vkF��(�$(��X�=��V���]cV8��c�M6�2�(Ya�n�z����5�V5 �5+��f�Y�i��%��j�d�P(��`�#IF�0�8#<��y��9�(&���Fȥ���1���1�J��(��(�J(��3@��Q^+����b��cOo�L�ܺ��Cȋ�C8�|��d 0��]Q���l�����-N�6X��G���ߧ�캜_ş�rx�鴽=��P?P�0�3�`?�׿�bIUO1����iU���o�K�^K���J�ъ�tK�o�~o��(����
(��
(��.iW�ٷ���ܫ����WPH`���Cm%I�9�K����gr�` �eC�]He����Sar��rd�>��m���ѷR�PQ<���3l?��η���zK���$ά<�en�����^m�mYn,!�c|e�|�gz3��,�@���hѤ�&�c�ȅ�-�C� �#����ƃ�H(��8O��S��~�^��?�G~韐��b���?x����'R�4QE}��V,�]�$-�Xb�uoC m(��b��qt�Ƀ�x�q�[�H����*^��s���*OD(��(��(��(�����(� ��|q�|�ͩ˃(!O���pc# rσ���@����� �.�;��Y�I�I�ǥzƏ���a���ړ?�n��@� ��nS�5���9�'�ϕ|1�y���^J�O�2�'����)����_v��۠QE��QEQEQEV��|�W�N�m�)�̀��ET��[�S8f�A�(��z=Sѧ�OF��Z1?��O�^ktv��E�l���88 :7C��Ҵ��[k�H�yG�n1�lp #) t'�o1�����b 1�h��*���lQ�whdv<��0���A����w�;t%�:(���ҷ�
�T�� -�.h_���G��n��C�8����Ʋޛ啺)h�즕��W�CEW�G�U����"I bo>%=P����,C��Y�$k��*����b��m�g�$�jY�=�j�(�;��(��(��(��� ;���#y�;T�g�q�gCE+���r_|S���n/�l]8�`����a� ��� 0�6�3]m|����M�E�Fud��r3$�7=���@ೌ��X��Ɠkw�����+���e�oUE��z.���|�#����Xhl�>��DFe��p���Ő퓞@ۄrH�Y���M?͖b�d�!�P�r�W���i��Aڀ����4�-�w��ӿ�s��V�wi[W���n���h����(��(��(��(�������rm& Cr<�X���,UT»����&�]!��Z9�t,71U\?�� #E?� �\ w�I�mr"|�m��-���-���7A�`����L��1Qޔ�5�poU髋���aJ�� Q{T�K�ih���|ɨ��-��,a�G�n�����2Q��:�:Uz����Ғ�5t���4~ (��=Ѯ�h�V?�g�Y-��a��'�$p�Jج\��RFP�E )�(�&�� �i�j;��QEI�QEQE3�{E�� *Z4R<Ɉ;B�p�� 3| $ ǩ�[�|<W
%�A� 9��#1;��T�WϜP�a�������������8T����(
��
sxS����k������G}���c�ZG���K��4B���?E�����C3��Te��_k��֡q����W����-��p3��}E�Y�����V�-�[t�9�r��f%��˜W���sV�P칟��}�~'��TmO��^�����vVڄ-owM ���(e`z���A��#
l�u��5Đ��<~K�@Y��>Yb2S$����'��E|�mV�{�QE"��(��(��(��(��|5/�$�y�����L�+9.��TR��� �V:)d�E�&+"���pA��yr g8)���՟������V�U�_��1�=�R(�&'ڤpItg~��s��X�QQT�71^otؑ]�f �bG,y,)~�,P#��%��
��J�K��T���n��!��t�l�ٟ���g�r_ T�/Yi5ꦥu��A%̩ C2;Q�I��5����ښ���6��I.=7�l~���Y��V�m�\z~�L��C\}{������(�t�T�@�&��&�3�B3�?�1Ǚ+d@G]�������]�!��'�Y��
�� 3�
� 1
ڇ�b�����t���X �}�`9���Rv�,!\͝�x�K�ŝ��,�U�ZV�w���8���I$é��;jŠ(��(������ԙbӴ�q��Y�;�B�m�>i��Ҽ�+�,�޴�K�G�RJ�|��|�(���`(��(��(��(��(��(���<)�L���1��k��p����Ƌ#3t/[�Ь ��6=���:n��⌤���W�p��N+iAI��b�yg����t>#� ��_U&������^nO� ���]���LP��+, ?5p�Q_�u>��EPlIw%����d�ʦ+u8w�2�>\AH`Xn�("R����jڽγ8����G $h:"/8�I%��I#<����RW(QE�B�(� +�^5��V ��/�vo�훱�v�v�8���*.RG��
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment