Skip to content

Instantly share code, notes, and snippets.

@lorenzopub
Created June 1, 2017 06:58
Show Gist options
  • Save lorenzopub/4d6e0b0598680c6d434a9bb0f5e71c45 to your computer and use it in GitHub Desktop.
Save lorenzopub/4d6e0b0598680c6d434a9bb0f5e71c45 to your computer and use it in GitHub Desktop.
d3 | ratio bar chart
license: mit
var render = (function () {
var svg = d3.select('svg')
var vis = svg.select('#vis')
var width = +svg.attr('width')
var height = +svg.attr('height')
var xScale = d3.scaleLinear()
.domain([0, 100])
.range([0, width])
// append wrap
var wrap = vis.append('g')
.attr('class', 'ratio-wrap')
// append first rect
var firstRect = wrap.append('rect')
.attr('height', 88)
.attr('x', 0)
.attr('y', height/2 - 50)
.style('fill', '#fbae17')
// append second rect
var scndRect = wrap.append('rect')
.attr('height', 88)
.attr('x', 0)
.attr('y', height/2 - 50)
.style('fill', '#0095a3')
// append values
var label = vis.append('text')
.attr('class', 'ratio-label')
.attr('y', height/2 + 5)
.style('text-anchor', 'middle')
// .style('dominant-baseline', 'central')
.style('font-size', 36)
.style('fill', '#dddddd')
function update(data) {
// update the first rect
firstRect.attr('width', xScale(data[0]))
// update the second rect
scndRect.attr('width', xScale(data[1]))
// start the first rect after the first ends
.attr('x', xScale(data[0]))
// append the label
label
.attr('x', function() {
// ensure there is enough space to display numbers
console.log('xScale(data[0])', xScale(data[0]))
if(xScale(data[0]) < 90 || xScale(data[0]) > (width -90)) {
return width/2
} else {
return xScale(data[0])
}
})
.text(data[0] + ' : ' + data[1])
}
// expose the update
return update
})()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
html, body { height: 100%; }
body {
font-family: Consolas, monaco, monospace;
background: #dddddd;
width: 900px;
margin: 0 auto;
}
section {
padding-top: 30vh;
}
h3 {
margin: 0;
color: #fe9f97;
}
</style>
</head>
<body>
<section class="stats">
<h3>Ratio1 : Ratio2</h3>
<svg width="900" height="100">
<g id="vis"></g>
</svg>
</section>
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- d3 code -->
<script src=".script-compiled.js" charset="utf-8"></script>
<!-- render code -->
<script>
// render an update
render([57, 43])
d3.interval(function() {
let v1 = Math.floor(d3.randomUniform(5, 100)())
let v2 = 100 - v1
return render([v1, v2]);
}, 2000);
</script>
</body>
</html>
�PNG

IHDR��}��^tEXtSoftwareAdobe ImageReadyq�e<%IDATx��� p\�a�q�.�����}H%��3�R���Ե�f:��I��d���dB���8�8��8N�4��4��ر"��f�$��'u�d5�]K�A��HPO� ,{�X.��H����hvv�.>/��}���Hooopq��4h� �@@��6 �@@�� �! 4h� � h� �@@��m@@�� 4hC4h� �@@� �@@�� ��� 4hІ4h� �@@��6 �@@�� �! 4h� � h� �@@��m@@�� 4hC4h� �@@� �@@�� ��� 4hІ4h� �@@��6 �@@�� �! 4h� � h� �@@��m@@�� 4hC4h� �@@� �@@�� ��� 4hІ4h� �@@��6 �@@�� �! 4h� � h� �@@��m@@�� 4hC4h�pc���M��p災��-C��Q��� HLOv�}��Lm��T��=�s���x�PΗ����r���\Q@������X�D M�u'W�����N��G�3k6��:�G��d����3����}"�r�k�[���T�{�O�ݰ�����r�H<;����.q�����W_n[��O m�s�����\�Q�H�����|eO˱×Vlc�����\'��U�S �����eFO�}�-���z�N�wY�k��3�r<1��z�c5�s1՘km �����{_����0��b��~r͆��룥Rrb����H����;�n��}4��7Ou�-%�q۠P;z��Gk��� �tGw������˘�R���o�eb����J������㇣�B��ӝ��m\Q@Qε�FK�־ޠ��3K������3ӥx��L]ެ���sp������l)��ɴ׆c�87�w6�2ҳm�s?��qILOƳ�َ�˛��r�u�[រ���Ǔ˴����5�˴�M} ߁p��$˂�Vb�� k8�9|0>���f8 �ixp>I�ۆC���BcS�����jo��[���m9v����H�^,�׏nꩆ�Lk�L[G��'3��qxh����U*�-��w��
�vՇ+��u�|�����{��I/����b�|x1x'0�~����z�-Ǐ��3IW-�c�|z�x]8_yQ��m�,�Z$��ko�$�k/�m�2�i���o��#� ��Y��D4������ '׬��;��v��qd(�2�B���_��8r�kߋs�E$RL$��:���k������_M����Ϣ��U�xv�ix0R*����g+�����Gɩ���޺���5 �l϶w�����U�m)>7+#�~:-�*�bu������|%m>q�g>�<��b2U��Y����Q���?۵���?�K�����#ЗW��:\���p����?�ރ�v�<�R2u���
�M�b!���h�H�Ԫu����ߜ�=���������B�%��;�P��� +�J$�����%�?�����Ջ��H g �kt������[n �9����[�_~.��84��j��u��7�s�/o�:\����J�����G��7�����z���*=ܳm�3ߏT���xk���[���W�����? ��Е��R�7nMV;ոatx.�::�׼��
G"�KOwv/�t���cP������0\��\xf�%S���X!_�����_�>��w��� ��`_����w�A� ���i~Hn�9���?;W�g��(�o��m��\��.�oL�6\��fËAI�g��
��ɭ;*���t|5\6.R^X#�j9yuea~�����Y‹K�]��{����N#1=Y�=����ܬ��cXhLm�S=,K@盚'��--���:_cMKZ-83���b㞹�0%/�~9=x���z��l����06���
��� Wza�I��Щ�ht8�R�n>q4����D��yu?� pc��%&F7�4 �����O�^�ki-64��d���eVi�;]l��-6,dnp���[��b�������λϼ�p�� ���馻V�����t�W���Zۂ�/$ic�Ӻ��/�O�NLO-��EJ�w�{�n~y�c�>x%�2Õ��f*�h���n~E���m=|��LMwv''��fk�Oz F]�T��Zک���T���tf������ �J4z��_|��R�ؿ��=o��ӽ��H��Q7�3H�X~6��� �m��tsbj��X_p
7V��..~�4���N�{��kn�z����`�����[症�j>q$\�����0�0�"x��r�J�7��p�+d���#[n_����"�|eO�+�׋D��n�7��G-�G�doc��h�s�p�}�t<�@�i�Z�vnI��lz��t���;���Ub����O��\Kkp�%�c �g�˱��'W���Bp/��-�i�Ԃl{g����ӝ#��;��?�i=�mϵ���Fნi��z^��,���g�-'��������]hL;��Z�0\��sW̓`�Hoo���W";�dه��e��bp�Η���b}n��jX�/̋g�㹙pF�2Y��
o^J�Lt��nx/ 4h��� 4h����KP�g��\�Gr�(8Z�z��g�t���"�mb������� hE�h� �@@�� h� �@@�� h� �@@�� h� �@@�� ���WL���+Ͻ�/MFKS�~%��j�t�O��"��J)VNM��q�{��x��7�.��C���r��푺�w�j�I7ޓi��)Ֆ�ǣ�R�28[xzd���� �xN��5����]��g��9��_&�� -�2�˱t!�i��6�=�y�Su��7Pvd{`��_�/|�p�;2�ݸ�ݫ;bg��d��%^ߓnxx���3���}�M�xr7'S8��Z�q�d��N]�\���m��%�\+ۺ��Oس����?���,�|�[�����ɸnN�@ׯJ4yrӧ��\dmo[�KՋM��i��h)�o�2��3��ƅ��<�m}�q���xf�\����FƏ�����XtGs�/޲�#�ͫ��߶�#/0h�������P1�����W����~��o��ٗ���>�����[�-��ﹱ����όM��
����N��q�T�O�N<~lh���N�����vu��[޽��7^:�?�,j p �Z�jϥ�"Zh�=<��z�Zϋ*�G?;��@%�\�7�~c���#�K�7_��Ͻ:0�?�O�V��<���S�s<c�M�� �=W���9����\���p�F�����纺R��<ǁ��gy�+�G��ڋ�3���C��b�u*� �׉�u*�/L� |��nT���'~D��Hbᵯ4n�/C𶣹>��&�R7Y(@@\{�և�[�~x�a�馑�^̭b��hifq�
�[��6��k^���߭@mo���7��<��]=�����u�U?Gx(;s�#�`ٕ��#�m��4�v�s�W�\�J�� �"��[�P\\vc~����v/�m������E�����Ο�D�H�L��oOF_�/��X�S;N�-��K�c ������'n;���Pi-C�Eʳ�b���|㎺�k��A��#�Q�����[�_$�x=�6����yņqGK�?\ݱ��mgK�j��gvnYߐ Ͽ2����YY���Lu�㙖7��'��i�;���6{����7~|���[��>�<����;J�m �����_Z�_&��s����}r���W��q�T���=4����S'�.o��{6��ڮ�|�T��s�+>Cܤ���ĺѵ �,���������4�~73���W�Ɏr��Ǟ�<����u�����p���yf^>A�ohH���5߼�_���̤/u�[�*��ŏ�9`�:@@\{�?VY\�����c�����L��Z��z����';�>�bk���b��_�ww8����<],-�=^���;Z��Ǜ������7w�~f�՝�A��o�8��
��L�� ��|����{��q�ːk~`���3�g3o�e�[+�+U��?�~�sM}��Y4�թ�o�|0|P�4Ƣ���=�ͷ776�N.�F�~�g�x��h߉ ���޻-�8��O�N���Þ�����
�[�W���|�8�~�?\�����=��գ�����G�|�����B����_��Б��d��2/�'g �:���њ��u��Tu˯߾�ɓ���s���ݭ͏޿3���?:x���y���\��፟�~�I��ߊ/�n��]����~n�������/ ��n�ɓ�>}� �O����~|��%���[�7��L��v�]�'� ��h�_��������hyf6}o�ʱ���b�����|}�����ߨ���ݽ���SSϬ:���-_*�2����X��'���J]݇_ؿ�1uO��jzu��/�e��m�M����ď/�����N���T��6�a`�����m�
NՋs�j�-,Z7�������]�~=���b|f���<�����8&�n2�}�fk��~�￾��MF�>��!�;=��j�R�>�#����_8p���x�T��\c��1��ڒͼ���}�X2$�;�ݻ;R����d��n��~ftb,_X���5��C�h��{�U���˽G�3��@�:�K����y�)GfqD*�H9��� s��W'o4L<���9s7�\o����O+���݄��Y����8s�����s{scx���Cfnh���ڿ=�J�c;�2���oeζ�s!��z>5��s��y��U?_�̽��c�J4Y���DS}�3�����l������=k:���3���� p&S8��_�"^�j�W��}%��dP΋W+ϝn2�]��.��L�ԗ=m��=�c�ɗ���h�F+��n��S����i~c�����h�RX�G�k~���/�������P�\�QZ�L|h멥�70R��]�Du�� ��nx��
@@7�d�z���S?u�uʱ�����&���)ۺk���˥�����=�w�r�7��֤bga����mo_�t`�R��ӿ��L:�X��G=��9��� 5�t<w���5�8����wf��+ ,��C�kw�����H%�<�_��!����ڋo�j
�����[>���#�o�����8>��d�\W�;Ӽ���g6�jZ\�.�׎�9����O�?�{�t����������� �^�*G~s�������wO���>"Z������L���g�-��.]!�;�X����Vw���q���_���~�`�>����sY�Jz�7!S8�D"���S����K\1�.߰��z�d��2��r?�x�`��|���r~��[��lO�X�T��ڱ����ܣ�pSr���藲��?�05��y�����k^yx��粭��r���J19�Lk��V� ێ}��eK1��nn�q�3�^��/�=�ҳ���������-M����#�������w����W��31��K�Δ��Y�O�&��=�2���qc�z
�[羁%��g����=�_²*�D�흿�{ߟ��:t��q�mScjk��#�G#S�����W�.�E���k`G��S|�@p���!R�7�|�{o=�]�۾l�oe���a4h� �@@��4h� �@@��4h� �@@��4h� �@@��4h� �@@�������տ`����[7���h��#���k�"9(4h� � 4h� � 4h� � 4h� � 4h� � 4h� � 4h� � 4h� � 4h� � 4h� � 4h� � 4h� � 4h� � 4h� � 4h� � 4h� � 4h� � 4h� � 4h� � 4h� � 4h� � 4h� � 4h� � 4h� � 4h� � 4h� � 4h� � 4h� � 4h� � 4h� � 4h� � 4h� � 4h� � ��� 0�����M�IEND�B`�
const render = (function () {
const svg = d3.select('svg')
const vis = svg.select('#vis')
const width = +svg.attr('width')
const height = +svg.attr('height')
const xScale = d3.scaleLinear()
.domain([0, 100])
.range([0, width])
// append wrap
const wrap = vis.append('g')
.attr('class', 'ratio-wrap')
// append first rect
const firstRect = wrap.append('rect')
.attr('height', 88)
.attr('x', 0)
.attr('y', height/2 - 50)
.style('fill', '#fbae17')
// append second rect
const scndRect = wrap.append('rect')
.attr('height', 88)
.attr('x', 0)
.attr('y', height/2 - 50)
.style('fill', '#0095a3')
// append values
const label = vis.append('text')
.attr('class', 'ratio-label')
.attr('y', height/2 + 5)
.style('text-anchor', 'middle')
// .style('dominant-baseline', 'central')
.style('font-size', 36)
.style('fill', '#dddddd')
function update(data) {
// update the first rect
firstRect.attr('width', xScale(data[0]))
// update the second rect
scndRect.attr('width', xScale(data[1]))
// start the first rect after the first ends
.attr('x', xScale(data[0]))
// append the label
label
.attr('x', function() {
// ensure there is enough space to display numbers
console.log('xScale(data[0])', xScale(data[0]))
if(xScale(data[0]) < 90 || xScale(data[0]) > (width -90)) {
return width/2
} else {
return xScale(data[0])
}
})
.text(data[0] + ' : ' + data[1])
}
// expose the update
return update
})()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment