Skip to content

Instantly share code, notes, and snippets.

@SpaceActuary
Created June 19, 2017 17:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save SpaceActuary/2f004899ea1b2bd78d6f1dbb2febf771 to your computer and use it in GitHub Desktop.
Save SpaceActuary/2f004899ea1b2bd78d6f1dbb2febf771 to your computer and use it in GitHub Desktop.
Brush v4
license: gpl-3.0

This brush snaps to day boundaries. On release, the brush fires an end event, allowing a listener to modify the brush selection. Using brush.move to initiate a transition, the brush smoothly interpolates from the original selection to the rounded selection. Compare this approach to using immediate snapping while brushing.

forked from mbostock's block: Brush v4

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.axis--grid .domain {
fill: #ddd;
stroke: none;
}
.axis--x .domain,
.axis--grid .tick line {
stroke: #fff;
}
.axis--grid .tick--minor line {
stroke-opacity: .5;
}
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var margin = {top: 200, right: 40, bottom: 200, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scaleTime()
.domain([new Date(2013, 7, 1), new Date(2013, 7, 15) - 1])
.rangeRound([0, width]);
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 + ")");
svg.append("g")
.attr("class", "axis axis--grid")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x)
.ticks(d3.timeHour, 12)
.tickSize(-height)
.tickFormat(function() { return null; }))
.selectAll(".tick")
.classed("tick--minor", function(d) { return d.getHours(); });
svg.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x)
.ticks(d3.timeDay)
.tickPadding(0))
.attr("text-anchor", null)
.selectAll("text")
.attr("x", 6);
svg.append("g")
.attr("class", "brush")
.call(d3.brushX()
.extent([[0, 0], [width, height]])
.on("end", brushended));
function brushended() {
if (!d3.event.sourceEvent) return; // Only transition after input.
if (!d3.event.selection) return; // Ignore empty selections.
var d0 = d3.event.selection.map(x.invert),
d1 = d0.map(d3.timeDay.round);
// If empty when rounded, use floor & ceil instead.
if (d1[0] >= d1[1]) {
d1[0] = d3.timeDay.floor(d0[0]);
d1[1] = d3.timeDay.offset(d1[0]);
}
d3.select(this).transition().call(d3.event.target.move, d1.map(x));
}
</script>
�PNG

IHDR��}��^
�iCCPICC ProfileH���T���̤Z � �#��k(ҫ��@%�@P�+�
���,E\�"kAD��(v� ���.l�� ������;��w�w����o��{��\a ���lQ��'#6.��� ��@���z��T3׿��mt4���S�����<7)��r"7����)4�s��l.��]�-���(+��Q.�b�4���i��>&2� �(l���w4�����: ʖ._��-ʮ�6:��22�N�!�����o5�5�l�������,a:{����[��9tР���ç�C׬6mi����Cf�ϝ�i�S��Q3���a.�;p��iQ3��>��fEΰhi��� }~��~K�IY>3���e�pnJd� ����pVZD��/i^$���,�cF�lo��\�)���=�J��&y�H�(�xa����0=t��t?i>+'B�l6��f8�:['T�>��p���O�+�T�B��d3<�S��` 8f kK+{����'}K�~� ���\f;�h�7�c�p�)���9�7�v���^�X�3���� H@(� t�0��8w�@�q`1���D`Xփ|Pv�=��A-8N�p\��u� � ����Ax�
� H ҇L!k� �B>P�A @bh�*���R���~�NC��Pt�F�7�g�)�"��sa&�‘�"�g¹p� .�+�p3|���<����m�a"^H�$#"d R�#�H҆t!7 ����ah����Da8�L��VL)�ӌ���� b�0߰T�:��eac�<�2l>�[�m�^�`���q8g�s����p��������F\;�7����*xS� >��g�����G�����a�G��E�&�� �B1����0B� ���N�"�����XEl#� 'H�$C� )��JZO*!5�.��ޒ�d�#9��'�#������ɟ(
�e!EL�F���S�Q�R�T�;5��M�F��^�>�~���XȰd�2ke�d�e�e^�e�e=d���˞��!�R�(g �%ǖ[#W&wZ�ܸ<M�J>D>C~�������

>
\�<��
�hM��E��6Ҫh�hÊ8ECE�b�b��1��1%%[�h��JeJg�$t�n@g�����'���h��4g˜�9�s>(�)�+')(7*(Va������TiQy��Q5Q S]�z@���K5E5g5�Z�� ��갺�z��J�������~B�}5^j�5�5S5wk��բi�j�vk��z�Pbx0�%�NƘ�����X�B�G{B�P'Jg�N��#]�.S7Yw�n��^��*�z���D}�~��^�.��1� Z �*� s � Q�܌2�*�n㌙�i���{M`;��2�����)�t�i����L`Vivǜb�a�c^o>hA���`�b�j�����;�v��fig�nYe��J�*�j�U��kk�u��-����Z�V�׶��I�l�����6�u�}�w��7؏:�9$8�;�a*2C�[�W����k�8~r�w�v:�����s���g� �%ͫ�7���v�p��2\\�Jܴ��n�nO�uݹ���#��G=^yZz�<�<?x9y��j�F��� �{||�|J}����|�}����V���c��w��ai�8�:�X�C���@J`D`i�� � QP[0�+��|����-! ��+�Q�ahf�/a��а����V�»"hK"�D����� �(J�-�0�.�C�wLQ�$vn����q�q���x||t|u���{ /�[����"�E�]]��8}��%�K�KN&`b�$|a��+�㉬���1�g/�ם��;��T�4��\�������MqK)Ny����_���L���V�6��ޘA�H�8-P� :�j.]��Oh*�J2�2�d��E�YP֢��lE��t���?�s\s�r>.�^vr��r���&+������i%f%ge�*�U�W ��X]�Z���c��ڼ�����ծ'�O[��� E�m��ؖ���.o����e�E�w69o:�����g�͖}[�p �Z~���z�G�K~�ܖ��g���;p;;n�t�Y[$_�[4�+xW�n�����,�s�ض��^�^�^IIPI�>�};�})M)(�,k,W/�R�a?w�� 5�|��n�_Es�Ae�a���O����~b�TW�Z]X��FP#� ���s��;�~d{=\/�=��h�1�c� � ���������~�}"�D�I�ɆS��ʛhM�P�汖�Ik\k���m�mM�X�RsF�L�Y���ϑ�坛<�{~�]�����Pǒ�c/�� ��x��e���<��_q�r����ט�Z��_o��n���צ���7Z{{������w�p����[�[���ݎ�}���;��ܻ���{}?��ău� �=*~����7��%����ރ�O"�<� ��=��/�yO�O�G�F�Y?;3�;��|����/�������ѫS���=;6�Z�z��ַ*ok�پ��>��ć��*k?1?u}��<2�� �K�W�m��=�̘��E��VANN�M �8�;�@�����M����O���B�K�;Q�B=�4�Q���)K�`i�CY�6�ӵ(���~��|�� ����ɉ���_��f�О9�ŧ�C�P�c��[s �W��"L�BOY�iTXtXML:com.adobe.xmp<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="XMP Core 5.4.0">
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<rdf:Description rdf:about=""
xmlns:exif="http://ns.adobe.com/exif/1.0/">
<exif:PixelXDimension>960</exif:PixelXDimension>
<exif:PixelYDimension>500</exif:PixelYDimension>
</rdf:Description>
</rdf:RDF>
</x:xmpmeta>
��2GIDATx���1T�i����9[�9[`uI�ne*HG:�p+��S�tN�S��ҙ�4�v�
��J�����6:�����@���$�:�I���g'�Ɨ?//?�c殯����` �@@�� ��� 4h�F4h� �@@h� �@@��m �@@�� ��� 4h�F4h� �@@h� �@@��m �@@�� ��� 4h�F4h� �@@h� �@@��m �@@�� ��� 4h�F4h� �@@h� �@@��m �@@�� ��� 4h�F4h� �@@h� �@@��m �@@�� ��� 4h�F4h� �@@h� �@@��m �@@�� ��� 4h�F4h� �@@h� �@@��m �@@�� ��� 4h�F4h� �@@h� �@@��m �@@�� �����~���������V������j����Q3�=僧�?��'�r��O]�Bߟ+��+��� ����_���M�/O$�Vkrc���,//{��}��4h� �@@4h� �@@4h� �@@4h� �@@4h� �@@4h� �@@4h� �@@4h� �@@4h� �@@4h� �@@4h� �@@4h� �@@4h� �@@4h� �@@4h� �@@4h� �@@4L������|�'���|��Qc���������?��?�h�ك��-�ϳx~'dx��� �@@����̭�׬\t�K���d�uq���K,eGj\��;���i�:A"���nv���ğj��R�$3K�K�ؗ~U���ē�x�f
�V�'�+�a�ܻ/n>ڋO�vDkn%3���7n�*�x:��cߵ�jv��h��z�m��&���E��|��7������V4Z���o���E�����bf1>�/�����K��cÿ5� N��ɧc�V"��ң*|�F���h�������l5��yǞ�9ٿ%�X<��c��<��7"���g������}^o�����d�ҷ���;g�ϰ����Q�
oɳ�'� �c��lo,/�*�:���4V�V�_|x��^ު5��H���;O�Z���,m�/����mEO&������a������qo����V��ֈ-f2�����t��� o���›�����qx3z�����7�o7�V;�dی�C����ǵ �����R��8��۫�W��?t��n�-���3�*���5
���kkk��7���->��F�Y�x݀f���|ߎ� ��,�x[*���j�7�=S{�z������_�,Ԇ;���o݌��z}�{t�����j(�}x��c�K&�i�n���l�уt}�pca~�?������F�0�|�3��d������� �;�F�L�������Ba�������5��Յ����g���^�6/�
��vj�s�/ �p/���99�s&� ;�sr|�ç���‹�ڤsg
��,���{{� 2�s��[�w��֋��z���� H�77�����= �<��<��>�NE��/v'��n�(H�|�Ӈ���f��'{����� ������A�^� �����K�p5��w��
nF�.��%���hz��v�}��b*\u������_�Y� �A�ڝ�m��}1�hy7�������L��Q���:�}ӫ�A�љ�+ׇ{)����>tpk��� ��_ލ��z��d3_�4��*fS7S�?�v��ފ�K�9�9 n���������d�Gk�<[*�����W������ �C6�?{�$�7�� <����&�?|��E�_=x_�,95<j����ԯ��=�H�'�����
7˃�VS�>a��� o�I>�7G��趙�s2�{�[��w쏳~N�U����;|�v��t�> �ͫY<'�wNw�ϰ����^,�'������lt�~�N�Ggv�?����s�Av�>z�;�|վ:?l��O����!,�褾*G���;�yjw/���[���W>���� 5���ݯ>�N�vy;�{~�m������?1��x�m�����y�hMDϭ�{������}ތT�7xfk��G�ᫀݫ��6���C{3�-׋����:����T���)���Aq70Zm��?e�;�K'����ڟ�R>�WF��v�({��87�m~�є�g޾�0��읗��;���?O����4vL���UT���2U�������?�v��(�9���GA8x֙����#m���`{��7N�����w�/i�+�t�`/<����Y>'�wSÀ��}&��P��q�ʏm��>'?���=��?��9ys�E/���)7����3vN����?�~�s����/�¯���Q�]�֛/{�Fg18+\�����B��~�WXJ���pc��}B�b�w;o����vm-H$����ӹ`.��K.&��jz�����J�ĝ���T��
��e�-:֫�Ͽ�q�|����}�����9?Y *˯^���w� ��.�;���q!��@�d�S�<z"h =9�h1�4Z�`�<p_�*/�����Xo*�[Jd�w҇�͠w����J:��������R"K,d �f���nue1\�R6(4{�k�j�ͅ��d���z��1�j1X^-=���b��]�$�i^Tj�t4[���9��aA���O����[�xz7x_k6.�%2���zpz�hT>n���-�K�խ�x,���(8�ݺ�o|���_n�����)_ٚ�~m�t�������x?Zr,�j�����Í�Lg�)=h��\\Y���sx�:��r���99���l��z}Z�vN����)�q�:���V�j-6������3��8'�ߌ�΋ևӥd��X��R@�j��|����q'�{[��~
^��Jݻ���'$V�W��xm��˅��ރ{p2�Rk�k}�k���||�2�X2���y��(��Om���/�f�י[KOpM}�t��Y̬l��W���/�F�tg�՛R/�\�ɏ&x��i���jn�΂ŠvzZ�$ҫ;����Y�՛�m��}�(m�/�^��������/W�'|�e+���_��
��Jr����)Qn������l7W���� Y�x�H���խ�֙�F�=�^�d�i�ꤋťQR��9��v§��~s�-\4'����nv����d��a%��~���z�]I�Ǘ���F���}���X��*�L�A����������{���~?�L$�������������I��5��d<�ծW3���T�y�5���Wm�?'�޷��ޗs�/OW���ӥĴo����t���;�����֯���~17��,8{9��xΗA�P@�*������~��_(ճg?^D�L�4z��+�����ɬ]���K�����F�� ���B!X�x[떃��^oz? ��wl>�3�7��r��-|�=K'���_��vic1z��S�^�����Et�wA������;}�꿇xl����V�mv�Z%ȇ_p����[Z���{e������bq��]��ˠw��k���3�xf+����V��'�d����sls����o���㗿��/�qz$㽝����Op��R�������ә�,XY Ci����ƭ�~l������vJ?�m,%���ŕ���s���{b�������j8��ew�[��R%���Zix���Ï�U���ܛ� 4ȝ����_7o6�^�$�+���F���)�P�k���az�"�����\\�6��7u_uN��c6� ��'�m��}��������7�S���sr�˞�����{�t�)�ݎ.�I�?�/>�B�����l�{�7'� W�����R��e���^n��W��Э�BDo�^_���B���_ Z��at�Ynx�[�(��}�O;�T�/��ۿ���$W�����0��z4�s����j��$��7��ft�V��;�;6����6�����\�h
�@�EA���=���y���r��^�g��z0�]���]5{��}R�®�|m�3�^���>�����m���wN�.�8�V�[� �d����{���;'���7'��鼇����o�{���я.����|4� ?��q�� 7���s���S��s��]�zo�<�srp���^���5��zN��{W۷(5�k����9O� �=�������_?os׏��nfI��濩ں(Tbkk������zwp��O|A��ҟ��k�%�b��}Y�������惹���p�f��<#���m3���������_܌?��o�� �����IPlF����͛���y���.�<�}�����y�q�99������}"��'�o9'g��~�9���Y��;��>��}*\�厪��t� �s�o�tZA��c�?l�$h�]?h� �@@��m �@@�� ��� 4h�F4h� �@@h� �@@��m �@@�� ��� 4h�F4h� �@@h� �@@��m �@@�� ��� 4h�F4h� �@@h� �@@��m �@@�� ��� 4h�F4h� �@@h� �@@��m �@@�� ��� 4h�F4h� �@@h� �@@��m �@@�� ��� 4h�F4h� �@@h� �@@��m �@@�� ��� 4h�F4h� �@@h� �@@��m �@@�� ��� O�������IEND�B`�
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment