Skip to content

Instantly share code, notes, and snippets.

@shashank2104
Created August 22, 2018 20:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save shashank2104/2acfdd38dc262285d2c736ba86dbc1ad to your computer and use it in GitHub Desktop.
Save shashank2104/2acfdd38dc262285d2c736ba86dbc1ad to your computer and use it in GitHub Desktop.
Grouped Bar Chart with Line using d3.js
license: mit
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: steelblue;
}
.x.axis path {
display: none;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
function getTextWidth(text, fontSize, fontName) {
c = document.createElement("canvas");
ctx = c.getContext("2d");
ctx.font = fontSize + ' ' + fontName;
return ctx.measureText(text).width;
}
function DataSegregator(array, on) {
var SegData;
OrdinalPositionHolder = {
valueOf: function () {
thisObject = this;
keys = Object.keys(thisObject);
keys.splice(keys.indexOf("valueOf"), 1);
keys.splice(keys.indexOf("keys"), 1);
return keys.length == 0 ? -1 : d3.max(keys, function (d) { return thisObject[d] })
}
, keys: function () {
keys = Object.keys(thisObject);
keys.splice(keys.indexOf("valueOf"), 1);
keys.splice(keys.indexOf("keys"), 1);
return keys;
}
}
array[0].map(function (d) { return d[on] }).forEach(function (b) {
value = OrdinalPositionHolder.valueOf();
OrdinalPositionHolder[b] = OrdinalPositionHolder > -1 ? ++value : 0;
})
SegData = OrdinalPositionHolder.keys().map(function () {
return [];
});
array.forEach(function (d) {
d.forEach(function (b) {
SegData[OrdinalPositionHolder[b[on]]].push(b);
})
});
return SegData;
}
Data = [
{ Date: "2016-06-14", Categories: [{ Name: "Category1", Value: 368 }, { Name: "Category2", Value: 321 }, { Name: "Category3", Value: 524 }], LineCategory: [{ Name: "Line1", Value: 69 }, { Name: "Line2", Value: 63 }] },
{ Date: "2016-06-15", Categories: [{ Name: "Category1", Value: 521 }, { Name: "Category2", Value: 123 }, { Name: "Category3", Value: 653 }], LineCategory: [{ Name: "Line1", Value: 89 }, { Name: "Line2", Value: 96 }] },
{ Date: "2016-06-17", Categories: [{ Name: "Category1", Value: 368 }, { Name: "Category2", Value: 236 }, { Name: "Category3", Value: 537 }], LineCategory: [{ Name: "Line1", Value: 63 }, { Name: "Line2", Value: 35 }] },
{ Date: "2016-06-18", Categories: [{ Name: "Category1", Value: 423 }, { Name: "Category2", Value: 330 }, { Name: "Category3", Value: 689 }], LineCategory: [{ Name: "Line1", Value: 86 }, { Name: "Line2", Value: 45 }] },
{ Date: "2016-06-19", Categories: [{ Name: "Category1", Value: 601 }, { Name: "Category2", Value: 423 }, { Name: "Category3", Value: 490 }], LineCategory: [{ Name: "Line1", Value: 65 }, { Name: "Line2", Value: 63 }] },
{ Date: "2016-06-20", Categories: [{ Name: "Category1", Value: 412 }, { Name: "Category2", Value: 461 }, { Name: "Category3", Value: 321 }], LineCategory: [{ Name: "Line1", Value: 75 }, { Name: "Line2", Value: 85 }] }
]
var margin = { top: 20, right: 30, bottom: 60, left: 40 },
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var textWidthHolder = 0;
/// Adding Date in LineCategory
Data.forEach(function (d) {
d.LineCategory.forEach(function (b) {
b.Date = d.Date;
})
});
var Categories = new Array();
// Extension method declaration
Categories.pro
var Data;
var ageNames;
var x0 = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var XLine = d3.scale.ordinal()
.rangeRoundPoints([0, width], .1);
var x1 = d3.scale.ordinal();
var y = d3.scale.linear()
.range([height, 0]);
var YLine = d3.scale.linear().range([height, 0])
.domain([0, d3.max(Data, function (d) { return d3.max(d.LineCategory, function (b) { return b.Value }) })]);
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var line = d3.svg.line().x(function (d) {
return x0(d.Date) + x0.rangeBand() / 2;
}).y(function (d) { return YLine(d.Value) });
var xAxis = d3.svg.axis()
.scale(x0)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(".2s"));
var YLeftAxis = d3.svg.axis().scale(YLine).orient("right").tickFormat(d3.format(".2s"));
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Bar Data categories
Data.forEach(function (d) {
d.Categories.forEach(function (b) {
if (Categories.findIndex(function (c) { return c.Name===b.Name}) == -1) {
b.Type = "bar";
Categories.push(b)
}
})
});
// Line Data categories
Data.forEach(function (d) {
d.LineCategory.forEach(function (b) {
if (Categories.findIndex(function (c) { return c.Name === b.Name }) == -1) {
b.Type = "line";
Categories.push(b)
}
})
});
// Processing Line data
lineData = DataSegregator(Data.map(function (d) { return d.LineCategory }), "Name");
// Line Coloring
LineColor = d3.scale.ordinal();
LineColor.domain(Categories.filter(function (d) { return d.Type == "line" }).map(function (d) { return d.Name }));
LineColor.range(["#d40606", "#06bf00", "#98bdc5", "#671919", "#0b172b"])
x0.domain(Data.map(function (d) { return d.Date; }));
XLine.domain(Data.map(function (d) { return d.Date; }));
x1.domain(Categories.filter(function (d) { return d.Type == "bar" }).map(function (d) { return d.Name})).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0, d3.max(Data, function (d) { return d3.max(d.Categories, function (d) { return d.Value; }); })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (width) + ",0)")
.call(YLeftAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -10)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Percent");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Population");
var state = svg.selectAll(".state")
.data(Data)
.enter().append("g")
.attr("class", "state")
.attr("transform", function (d) { return "translate(" + x0(d.Date) + ",0)"; });
state.selectAll("rect")
.data(function (d) { return d.Categories; })
.enter().append("rect")
.attr("width", x1.rangeBand())
.attr("x", function (d) { return x1(d.Name); })
.attr("y", function (d) { return y(d.Value); })
//.attr("height", function (d) { return height - y(d.Value); })
.style("fill", function (d) { return color(d.Name); })
.transition().delay(500).attrTween("height", function (d) {
var i = d3.interpolate(0, height - y(d.Value));
return function (t)
{
return i(t);
}
});
// drawaing lines
// svg.selectAll(".lines").data(lineData).enter().append("g").attr("class", "line")
// .each(function (d) {
// Name=d[0].Name
// d3.select(this).append("path").attr("d", function (b) { return line(b) }).style({ "stroke-width": "2px", "fill": "none" }).style("stroke", LineColor(Name)).transition().duration(1500);
// })
svg.selectAll(".lines")
.classed('labels-group', true)
.data(lineData)
.enter()
.append("g")
.attr("class", "line")
.each(function (d) {
Name = d[0].Name;
d3.select(this)
.append("path")
.attr("d", function (b) { return line(b) })
.style({ "stroke-width": "3px", "fill": "none" })
.style("stroke", LineColor(Name))
.transition().duration(1500);
var texts = d3.select(this).selectAll('text.value')
.data(d)
.enter().append('text')
.classed('label', true)
.attr('dy', '-1em')
.text(function (d) {
return d.Value;
})
.attr({
'x': function(d, i) {
var width = d3.select(this).node().getBBox().width;
return x0(d.Date) + x0.rangeBand() / 2 - width/2;
},
'y': function(d, i) {
return YLine(d.Value);
}
});
})
// Legends
var LegendHolder = svg.append("g").attr("class", "legendHolder");
var legend = LegendHolder.selectAll(".legend")
.data(Categories.map(function (d) { return {"Name":d.Name,"Type":d.Type}}))
.enter().append("g")
.attr("class", "legend")
.attr("transform", function (d, i) { return "translate(0," +( height+ margin.bottom/2 )+ ")"; })
.each(function (d,i) {
// Legend Symbols
d3.select(this).append("rect")
.attr("width", function () { return 18 })
.attr("x", function (b) {
left = (i+1) * 15 + i * 18 + i * 5 + textWidthHolder;
return left;
})
.attr("y", function (b) { return b.Type == 'bar'?0:7})
.attr("height", function (b) { return b.Type== 'bar'? 18:5 })
.style("fill", function (b) { return b.Type == 'bar' ? color(d.Name) : LineColor(d.Name) });
// Legend Text
d3.select(this).append("text")
.attr("x", function (b) {
left = (i+1) * 15 + (i+1) * 18 + (i + 1) * 5 + textWidthHolder;
return left;
})
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "start")
.text(d.Name);
textWidthHolder += getTextWidth(d.Name, "10px", "calibri");
});
// Legend Placing
d3.select(".legendHolder").attr("transform", function (d) {
thisWidth = d3.select(this).node().getBBox().width;
return "translate(" + ((width) / 2 - thisWidth / 2) + ",0)";
})
</script>
</body>
��ࡱ�>�� ��������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������
��������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������Root Entry���������r�6�������256_b23a88532b8243e7*�������������"���������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������"bK�\q��"bK�\q�����JFIF��C     ��C      ���"��
���}!1AQa"q2���#B��R��$3br�
%&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz���������������������������������������������������������������������������
���w!1AQaq"2�B���� #3R�br�
$4�%�&'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz�������������������������������������������������������������������������� ?��B� �lp �'�<�����/[�To-��(� ��A�89�9P=3Zu��L�� 3l�IRх#�� =���<��(��(��(��/�i~�c�r@,�ebS�M���9c�‚je+Z��)(����^���Ec2ô�#�+�D�p�رu۹�)�:�WR�m"���9n�w}�H�x������# �06��^O�'���y�,t���7����[zg� ���>?�[�A۔��o&�_��{�䆡8�yYKo'�+�wU��kK�E|����Z��ga<v�)�6ڌ��|�px����Pqܶ�QEfHQEQEW������<1�\h�V�/5��f@�I�x��{����g������|�+zQRz�A\���_4�:��|�*De&@��!q�s��ѫ��ٓ�Fۏ��� +�:U"��%fQEb@QEQEQE����h��j�Y�p_���;���<W-�ybW�B� ���g�����{�+Ɂ7���\�w�/ˎw��2���� �����p}���1��ps�F�z�i>��K1c��6���?0$ g�<1a����i���rpv���{䓒I����?�i�\#��Eh�EQP�]�c Or�H2���I�N��:��2�h Ai.�S�F�6>bǙ���W,3��D�~�Պ�����.��kmvM� �4zt�O�����!oe���$��v�wePMGc�]Π^9��;�1�/#c���c��m^%�ji:�����Ҷ�end��Vv�}��Q�P4�T[w���.�~}�/�U�wz��El�嬟G���6p��ă
�0�+��N��Z���!��G
�_%��1��yl�k����������^����L!���g٭������T[o׾�kT�}u<�3,�&�q� �2Q���~�W�߃�i|I�y-����B�3��c#��=F~�k�� a����5�J���z�Lq�������Q��I���o��z���[�I*��=>(�����h������QE��W�O�����uk�ʪ�P��0��*����z����^��|�� gc%�EQ��MW+��w�R�{k}���A�K�j[�����iFC���b#�1���4�`�h�������{[�#H;�e�T����A�2��۷���5�X�Q�U=��VZ�%��_י��7��o��Z��-;��L_�F�%K�����mĂ�b'���l9V��şg�<k���U��9d��p:g��o�'�}�_ |`�q��2>�����M?'��{��S�����o�e�'��~̟�6�כ��i^��|T��u+���e�B���8�q^�8����3�`�0[G-6�Wzg�l�
��܃��x��+�z��U�v �0�s�Ќ�ؚ�R���������E�ގ����t���6z���{u��-g�#T�x*I=@�?Z�+ž�Z����
���Y��kP���y�Ab�$��"(�1�U�u'��s7m�[KVZ'�����a��`>���jzaq�#�HQи<S~�s��ڇ���[����X}��S�V. �\��K��[1 i�aGT�1U�`w"�m�%�7�_��&1�M"���&������捴OK��0�팓��KQ�/��k&{0�Q�IZ��m;u3�)����&���,�d��Tivڧ'���u/�������im��EIUI� � �3׵0(� �%�����6�}�;A9#;����3� M���dY���x���iVv�� �O����(F��3,,m´��C�r }�j+��H�aq�p�nǾ8����JL/mw�����GͿ��O��ڮZ����ʿ,q �j� ���i$�.�_���0�6��}!�LXŧ��dQd��JY��f*2�{���
������������GD��-�K�Wh�d�ݵg�?n�-t�8�#�#��F~Q��0���?��_���ƽ+���tߧ��+�k���O�������ڗ�B�o�{���_PW���/���������?�Cs�|7��C�ʹ�˨[j�Nܞ¾����Z�Q B�:�H#�����uG�|�o�������C�=��6�������99�q���:l/
@X�iyKG���Zz؊��I�/�K��ު+�V;ۯ��Sc-��.�U�Y��q�����X�����C*��`
�=��G'�?g��{}=��%e�hd'�K�+������6�����S��������-��\���~S��.U�u4p��C8<)��G����Y�������;�2}�۠����W�>X��2���D�C�9�+�$��bI'�I����|�����-��Q�.�m�����t9�GEm_�~�����}�EW�y�_ �^���U�����}�_ �^���U�����uP�ڞ�g�2��q�^o���l���+�^��J&p�' ��<�pAS����?�m���7��Һ/��{�]���TU�����I��h��鮦��MQ��ZQ��a0���IPr9� �`�����+��5ݺA���ݼ� �]�1�W��*���U�6��4�$�ïe�@��F���}��}B�%�v��\�����'�X�P����|�D����~��_�QS� -�7^_������PH�5��?¶35���I��Y�E�m8�����eR9�c��������.��%� �k�i%m��ʦ4Q�N�m�����N����E��� �^��+��[���W,=�3w}:%~�W���X�^חw�_᎑�Ԟ��E��i�����ē�6���Ah�7+1y��j�Y[XF!��"�tTP��=yo��k{%��N%/�C}ݸ�z}�Y�v[�]L�RR���e�J�|��TW�zO�_]��o$��TV�c�`�k�AW88�fU�������� �������8k/ P� 8-���_�-jd ���?��j����׬���,�P0��)�C ����f �n*��98;���ӌ�m����H����-3�ȋ�@�\�5+�'���6R��� g�TUݻ��+����'�#���?O�{�'��K��c�G���J�MkR���P��x��M� �3����������������y?�_1We��!��'�O��O��W�׫|T��N����yMkC�<J��u|��R��_M��w����
��������^���םG�=Xny���f�?��� W�����0������In��bz��J:�J�C���3i�����+ꯉ�$�t]Fl'h���B㓸���V���G�ܜE������vWi}n��g�=�� �QV+�x�]]j��K� �*q����O���q�_CW���}����Vkɜ��s�5������|u�E��7�p��A��_�>X�O�գ�E��7�p��A��_�>X�O��诃�z_g�{'��B���2G �"l��b����s��O�(#�i|�bG�=��|S���_����P|5!|InO����~���/���@��?��x����!_n]�V����&@�=I�:�OI<_|V�\��S�APӒ ������\f����-��/7dzQ�N۾��D�ݑ�~��X���Is���Afc�0FI'��x����z�T��o��$d|���2��n?����4��Ɵ�0^��g�u��M�M6_�ѿ��Gtpⓖ�y/��ߢ��;���4�l!�ݢb�%�?R9?�e�oj���?��o� {�B���+���T�EZ:m�3�#1%�1$�$�����������g���?�?����џ���վ����[������5o>&x��#Y�j����j�<{�}Kčnub�
����AWu�����7�5�x���/�]
j���M����![O����+�1Ҿ,�?�+i�]��Ѕ}�:W#�܊���yO�\��A4�"�jI�o��s�w��S5?�������j����Η]��ñ@�ͻ�v'9�"��c�f5�O�ؐ� T���w�9��?�e��m� .�#�aߏ�^�^s�_���r��
֟ĽL�<^�d񯈭\� ��F������=�*�����O���fJ�%�~4���C
j72ΨĨ��`���6��C��?��
��)�}��S�A:o��d�5��?���?�A^SSC�<Z��u|��R��_M��w����
��������^���םG�=Xny���f�?��� Wҿ��-o�\?�v��� �#6��_p�b�����!k�����w}��̱[6�\jV��'�F�`��?�}+�^���e#d�+"u*��)���0GW���85kYe`��FY��0�$�����6P^���*`<�2`6��B�y+�O��7Py1i�&������~N�c�����_��==ވ�������o����Y?�a��ӰH���=>�U���I{� fI��x����-���j?�C�+��i��ڴ��6��w���$�R�kEm:�������o���)�7*c����`���� WI�Ջ0U���?��zO�?�%��q��5线�z7���zp�U�zt�W����^Z���E�k��r��=O���)��ܟ�W]\���r�Z������Q�[hz����#m��y�����x��F ����ι�ٓ�Fۏ��� +���������e�����׿�/��ҹ��5�� ����~��-�.��s���}�+��[���_9�����?e��}`��떷��w=Ilcj��7�to�k��X��_Һ]C�?&�����s^ �� �W_Cç��4��e��ȟ2���9{�T��e��������ƭ\��O�.�j�H���^��k�
���.$��nf@�bC'�,N=I�Q�֬�%��'-!�8���,c������D�?���{��i���U������:jz�_?��چ`&ic���|1�#vH r�3��-�x;-���G�9�����o��:�1���z�����O���¸����������g%�����k��C��?��
��)�}��S�A:o��d�5��?���?�A^SSC�<Z��u|��R��_M��w����
��������^���םG�=Xny���f�?��� Wҿ��-o�\?�v��� �#6��_p�b�����!k�����w}��̱[gw����q��]�Ǽ���\}t����1�����
�~��a�m?�[W�����
�~��a�m?�[V����~G�|S���_����^{��ǣ~ν ������8����_�=��u�?�z��g/\���r�]ur:��}����Ks��fO�n?����4��Ɵ�0^��g�u��̟�6�כ��i]�?�`������|o���f��������A��_���s����lqw��������_���X?�z����s���}�+��[���\����KcP��ɿ�3\׈:��������7�to�k��X��_Һ�?����T���\]v��������g�H���s��z��}���"�_��."�;���D�(��$��ڹ�ls��g?������DE^�i��,�e�Ļ7r8�{Ey5>&D�#�V����e#���U�
X`6Iya�y8���2%� nH ���8��pq��=����|k�"4�[�!E?�z�Ofx�q���'����a\}��|I���u쳒������5�[�!�W��f{�>���� �7���
��o��� �~�� �)���-o��� ;ſ����
�w�-S�WɪNӼhUKc�Nq�;����A��?�?Ϋ�#ӧ�?���f�?��� Wҿ��-o�\?�v��� �#6��_p�b�����!k�����e�ף#��w��'���W]���{����U��K8��s��}�����W������E�qZ��}�����W������E�a=��믇�z��?�%��q��5线�z7���о)���/�s��A�=���ѿ�ZS�W�῏�r���_��'���W#��ܟ�Pz��=�d��������CJ�i�#��v�\����#m��y�����x��F ����α���lQ�k�����\�t����{�W?] Ζ�q����?ξ��������g���?�?����џ���վ����[������1������7�5�x���/�].����F�f��u���+��������O���U��iq����?ʸ��{��?g?�5����DE^����t*���ϟ�?��?������M $W&Y�=�f�N@�����&��Ȗ�&����k3�q�*���/�� �l��@�x�Ě��xR:�?��HAB�0T ����ؐ{]�vw�f�Տ��c�_��_����\���/����mgbD?y�8=HϠ��+�IH���\��FU۱�I݌�2�÷�;q�実�K��4�v>k�>x��Eh��s�����Y�<{�>I�����/ ��y��� %�2�p[ ��6�ԓZԽ��:�����_S�4�+{����`1�܌�;W�
�Ŀ����?ƽ����G���i6|�T�c�G� (�qVV9�IIݟ-���Ű<q��̭�q"B����Np:�v��/�r+Eh�������_O���*pC�r6�; ���<���P�c�� :�n�V�^H%��>^9��������l���o���m�k�W�6��Cq�|��Xp'��W�|H����B���Ƒm$��;��Gb+�յ{M��޶�A�������{O�![�IAG,�����{��w�/i+�v��S��g�\|.�<����������e�x�]c6�-�~�;u���ޫ�[j������c� ����\�g�>��ٺ��l�h2W�񑟙���\U��fq���ڧ����#�R���?�*��_�]�Zj����k��%F�P�’O$t�e���i,�Z��\퐃��%�Ǔ�\�y�{U��f���8���'� ��f�:yݬyG�<�k���YDD�Q�< q��¿\[�q۩c��h��Z���_��I}6�����Y� ��U�%��#��m�E��Gu�$nGP0=}{`�ժҊ��c��W�]Ϛ��� _e]�?�L`�s��9���{��S\<�f�I����U}D���B�9��C��B�`��Tヌaak��%��1琡xϲ�K�������� �M���۬V�lц#|Ŕ��$�S�J��7��Q�.��� ��)ޣ �8'"��z���Ry��22zsR�4���gQs��9��
<Uu�V�H9�X��Xi�{����e1��'q�y�+�k�"�Z�&��0��0y�c���*�x+H�m��WF�C:�Hߟ=No��&0QV>T���Faf�$������^������P�"?�����ۻ?t�c#�z���6y0,ܒybX�}���8����+�6�x=��_Kq$��gb?x� ��X���_ݔ��9��wǽ}'X�������)ipۜr0{�֟X��̩$�|��<a<M���y�#��׿~��€����'����������9R�\UC�g�B�A����B����–� G�Q��){w�tE�_�k��σ�'y�jЈ�DP��V�4� e�� 2x�@�S�I�[J�*���2��H����O��Es�wq7p��*DQEQEQEQEr��I�7IWz?j��}��E�'�]RV*������+��|�~��׋��;�;T�� �pp�Ta[���s�_t�[�r&�2D
$q��EQKsVz��4{�in-�y~b9�� �A�99�S��z}��t�I�#��'�w6OS�{QEs���5�x�P"1��(l�s��= ��g>�VDe���� ���`�FA��`�EkSr�%߄�=Fͬ/,���;G"�Rá!�2;zv��𖇦ڭ���0�)b#D
��,v� �Ϩ�VW�^�G�%��w�{���߽������{J��l��=� �L��GO���Gm��$���(�BYU ��9U9��)r��Y_k��k�cE~k+�~��}��^����a���q��U�(�,(��(��(��(����
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment