2

var svg, defs, pattern;

svg = d3.select("body").append("svg").attr("width", 192).attr("height", 192);

svg.append("rect").attr("width", 192).attr("height", 192).attr("fill", "#DEDEDE");

var defs = defs = svg.append("svg:defs");

var bw_bitmap = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAMVWlDQ1BEaXNwbGF5AABIiZVXd1RTdxt+7khCQtiIgoywlyiiIENmmIKAbHARkgBhhHhJUHFbShWsW0RxVLQqYrXVCkgdiFpcxb3q+FCLo1KLA7fy/ZFAbf3O953vd8699z3P+7zPO+49OXkBvXUihaKA1AcK5UomISJEkJaeIeDcAwES2nCBi0hcrAiOj48BgL7n38/LKyAA4KKbSKEo+Nz/X4+BRFosBoh4AFmSYnEhQPwI0GViBaME2N4AbKcqFUqAPQGAMZOWngGwFQCMc9R2GQDjLLVdDcCYSUoQAuydgBZfJGJyAN0mAIIScY4S0L0GwF0ukckBPS0AAeJckQTQiwQwpLCwSALoKQE4ZX2ik/M3zax+TZEop99W9wIA0AqVFSsKRNP/z3H871NYoOrL4QCAn8tEJgAwBohr+UXRCQD4ANElz4qNA2AIEK9lEkBtk7xcVWSymk+ai4uFGQBMANJdIgqNBmAOkOHygtgYDZ6VLQuPAqAPkNNkyqgkTewCaXFYokZzHVOUENdnZzPCYE3sLhEDaPjHVPnJwRr9a7nSqD79F6W5SanqmileiSwlFoAuQJkU5ydGqzmUXWmuMLaPw6gSkgHYAZSvVB4RotanJmUz4QkaPlNY3NcvtSBXFhWrsdcqc5MiNTo7xaKwRACDAKpJKg9O7tORFqfF9PUikYaGqXunzknlyZp+qQ6FMiRBE/tMURCv4dM8aUFEAgAbgDYvLknUxNIBSiZJ847oWIUyPkldJ52VJxoTr66HnoYYCBEKAVQQIAtFyIOsvauxCwKNJxwiMMiBFG4apC8iFSIwkEOERJTiD8ghRXF/XAhEYCBFCeT40I+q727IhggMSiBFMfJxHwwKEY0CSKECAynk/dlS8BsYyD7LLkYRClAEBrL/gAVDiBgNourTFej1Mdlh7FB2JDuc7Uyb0QG0Hx1DB9BBdADtQXvTPn3V/sVn3WedZ91lXWZ1sK5Pls1n/tGPAGPRAZVmVlJkfdoz7UB70J50CO1PB9A+ENAmtBnc6JG0Nx1MB9J+tCftA6GmchU+1/5bD59MXcPjunNJ7kBuENfpn5G6Lrqe/SpSyP82IXWtWf1zFfZ7/plf+MmkJShC9D+Z1AJqL9VGHaFOUgeoRgiow1QTdYY6SDV+8hX9BgY5/dkSIIUc+SiA7LN8Ik1OBlIUu9e7P3J/r/YppdOUACAsUkxnZDm5SkGwQlEgFUTJxUOHCDzch/sAaekZAvXP1HMTEAAIk1N/YVNaAJ8KgMj5CxPZAvvvA0Yv/8JsnwH8pcDBc2IVU6LGaABggQc9GMMUlrCFE9zgAS/4IQhhGIM4JCEdkyBGLgrBYCpmYh7KUYmlWIW12IjN2I7vsAeNOIAj+BmncQ6XcQMd6MRjdOMl3hEEwSF0CCPClLAi7AlXwoPwJgKIMCKGSCDSiUwih5ATKmIm8QVRSSwn1hKbiDriB2I/cYQ4SZwnrhN3iEfEM+ItSZF80pi0IB3IYaQ3GUxGk0nkRDKHnEKWkmXkYrKarCV3kg3kEfI0eZnsIB+TPRQobcqEsqbcKG9KSMVRGVQ2xVCzqQqqiqqldlHNVBt1keqguqg3NJs2ogW0G+1HR9LJtJieQs+mF9Fr6e10A32MvkjfobvpjywdljnLleXLimKlsXJYU1nlrCrWVtY+1nHWZVYn6yWbzTZhO7JHsSPZ6ew89gz2IvZ69m52C/s8+x67h8PhmHJcOf6cOI6Io+SUc9ZwdnIOcy5wOjmvtbS1rLQ8tMK1MrTkWvO1qrR2aB3SuqD1QOsdV59rz/XlxnEl3OncJdwt3GbuWW4n9x3PgOfI8+cl8fJ483jVvF2847ybvOfa2to22j7a47Rl2nO1q7W/1z6hfUf7Dd+Q78IX8ifwVfzF/G38Fv51/nMdHR0HnSCdDB2lzmKdOp2jOrd1Xusa6Q7VjdKV6M7RrdFt0L2g+0SPq2evF6w3Sa9Ur0pvr95ZvS59rr6DvlBfpD9bv0Z/v/5V/R4DI4PhBnEGhQaLDHYYnDR4aMgxdDAMM5QYlhluNjxqeM+IMrI1EhqJjb4w2mJ03KjTmG3saBxlnGdcafydcbtx9wDDASMHpAyYNqBmwMEBHSaUiYNJlEmByRKTPSZXTN4OtBgYPFA6cOHAXQMvDHw1aPCgoEHSQRWDdg+6POitqcA0zDTfdJlpo+ktM9rMxWyc2VSzDWbHzboGGw/2GyweXDF4z+BfzUlzF/ME8xnmm83PmPdYWFpEWCgs1lgcteiyNLEMssyzXGl5yPKRlZFVgJXMaqXVYavfBQMEwYICQbXgmKDb2tw60lplvcm63fqdjaNNss18m902t2x5tt622bYrbVttu+2s7MbazbSrt/vVnmvvbZ9rv9q+zf6Vg6NDqsNXDo0ODx0HOUY5ljrWO9500nEKdJriVOt0yZnt7O2c77ze+ZwL6eLpkutS43LWlXT1cpW5rnc9P4Q1xGeIfEjtkKtufLdgtxK3erc7Q02GxgydP7Rx6JNhdsMyhi0b1jbso7une4H7Fvcbww2Hjxk+f3jz8GceLh5ijxqPSyN0RoSPmDOiacTTka4jpSM3jLzmaeQ51vMrz1bPD16jvBivXV6PRtmNyhy1btRVb2PveO9F3id8WD4hPnN8Dvi88fXyVfru8f3Tz80v32+H38PRjqOlo7eMvudv4y/y3+TfESAIyAz4JqAj0DpQFFgbeDfINkgStDXoQbBzcF7wzuAnIe4hTMi+kFdCX+EsYUsoFRoRWhHaHmYYlhy2Nux2uE14Tnh9eHeEZ8SMiJZIVmR05LLIq1EWUeKouqjuMaPGzBpzLJofnRi9NvpujEsME9M8lhw7ZuyKsTdj7WPlsY1xiIuKWxF3K94xfkr8T+PY4+LH1Yy7nzA8YWZCW6JR4uTEHYkvk0KSliTdSHZKViW3puilTEipS3mVGpq6PLUjbVjarLTT6WbpsvSmDE5GSsbWjJ7xYeNXje+c4DmhfMKViY4Tp008OclsUsGkg5P1Josm781kZaZm7sh8L4oT1Yp6sqKy1mV1i4Xi1eLHkiDJSskjqb90ufRBtn/28uyHOf45K3Ie5QbmVuV2yYSytbKneZF5G/Ne5cflb8vvLUgt2F2oVZhZuF9uKM+XHyuyLJpWdF7hqihXdEzxnbJqSjcTzWwtJoonFjcpjZUK5RmVk+pL1Z2SgJKaktdTU6bunWYwTT7tzHSX6QunPygNL/12Bj1DPKN1pvXMeTPvzAqetWk2MTtrdusc2zllczrnRszdPo83L3/eL/Pd5y+f/+KL1C+ayyzK5pbd+zLiy/py3XKm/OpXfl9tXEAvkC1oXzhi4ZqFHyskFacq3SurKt8vEi869fXwr6u/7l2cvbh9ideSDUvZS+VLrywLXLZ9ucHy0uX3Voxd0bBSsLJi5YtVk1edrBpZtXE1b7VqdUd1THXTGrs1S9e8X5u79nJNSM3udebrFq57tV6y/sKGoA27NlpsrNz49hvZN9c2RWxqqHWordrM3lyy+f6WlC1t33p/W7fVbGvl1g/b5Ns6tidsP1Y3qq5uh/mOJfVkvar+0c4JO899F/pd0y63XZt2m+yu/B7fq77//YfMH67sid7Tutd7764f7X9ct89oX0UD0TC9obsxt7GjKb3p/P4x+1ub/Zr3/TT0p20HrA/UHBxwcMkh3qGyQ72HSw/3tChauo7kHLnXOrn1xtG0o5eOjTvWfjz6+Imfw38+2hbcdviE/4kDJ31P7j/lfarxtNfphjOeZ/b94vnLvnav9oazo842nfM513x+9PlDFwIvHLkYevHnS1GXTl+OvXz+SvKVa1cnXO24Jrn28HrB9ae/lvz67sbcm6ybFbf0b1XdNr9d+y/nf+3u8Oo4eCf0zpm7iXdv3BPfe/xb8W/vO8vu69yvemD1oO6hx8MDj8Ifnft9/O+djxWP33WV/2Hwx7onTk9+/DPozzPdad2dT5mnvc8WPTd9vu3FyBetPfE9t18Wvnz3quK16evtb7zftL1Nffvg3dT3nPfVH5w/NH+M/nizt7C3VyFiRAAACgCZnQ082wbopANG5wDeePWeBwAg1LspoP4P8p9t9S4IAPACtgUByXOBmBZgQwtgPxfgtwDxAJKCQI4Y0X9pTnH2CA+1Fp8BWK97e59bAJxm4APT2/tufW/vhy0AdR1omaLeLwGArQ98owsAJ9unfrYo/hut3X80KW0+GQAAAAlwSFlzAAALEwAACxMBAJqcGAAABidpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiBleGlmOlBpeGVsWERpbWVuc2lvbj0iNDQyIiBleGlmOlBpeGVsWURpbWVuc2lvbj0iNDM4IiB4bXA6Q3JlYXRlRGF0ZT0iMjAxOS0wNi0yMFQwMDoyOToyMyswMzowMCIgeG1wOk1vZGlmeURhdGU9IjIwMTktMDYtMjBUMDA6MzA6MjgrMDM6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMTktMDYtMjBUMDA6MzA6MjgrMDM6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0iRGlzcGxheSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyZjQwZjU4Zi1hOTM0LTRlOGItOWFhNC0yNDkwMzQ4ZTE2MjciIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDplM2QyYTU1ZS0yNDYwLWZmNGUtYTk1ZS05ZTAzODQ3OGI2ZDEiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplYmI4ZGU1Ni0yODQ1LTRhNmUtOWY4MS0xNmI4NTQxZDA1NjMiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDplYmI4ZGU1Ni0yODQ1LTRhNmUtOWY4MS0xNmI4NTQxZDA1NjMiIHN0RXZ0OndoZW49IjIwMTktMDYtMjBUMDA6MzA6MjgrMDM6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MmY0MGY1OGYtYTkzNC00ZThiLTlhYTQtMjQ5MDM0OGUxNjI3IiBzdEV2dDp3aGVuPSIyMDE5LTA2LTIwVDAwOjMwOjI4KzAzOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgKE1hY2ludG9zaCkiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+kpY1SgAAGTJJREFUeJzdXVnapTiOlQyvlbWB2mkut3sFVc8B9XCvjCwfDQb+yO50BB94BHyOBg/cn//888//OY7jH8dx0Hme9OvXLzqOgyR+HEdPk/jx66DjPHo5fbh1vmk6jureqRe1Y9uyaed5kgRmLl/rtEoZnSb3XLlf1u7N6//sRPQvSTiOY3ip8zyHDpK0KO6lEUiqBt1pErf5XprtcCm3AvxqvtzTXktoraVtReTR71F9NvRMrbV/7ud5/vs8zz8kU0CvAFsGn4jOJwwA7VrAJS0jiy5nCV8BpAqaBrna1h1CeM9efN5/77oDPOBtOOkcpErXsZ2v27RlUUASautaFRq1aVmv22utTW2tnuX6jpZA1zrI86H2M4Cj9K/0ExHRLp3kqXubF5FEaxGd9pPBAzeSfJF+D3xd3rZ3RyOgc7Us0iSVNqpld89eR+qdibtKXzEZq/k6eKBKnpfeWqNfv3657SESrABYqfNm3pvkYmaCJgDZawxwrn7vBA/QKO+S7s9z6WdApmLoKKpJs6darVO3At5baXfr7JkEQ9PQfYBZ5eu6UUDmQoe7eUSNiHyJ1/V7G+yXq0iWTavW94ij283I5bVVrTtoAKJcpZ/nGQ7pqo7k05BpCX2g5xHzYIeIWUdHeSvXK3l32iHyRyL6GDTAU+Cq9d8iiLyEHc4NZcj3HdD8gI5HKtQrVwWxEq9qBq9cpcykAWwHZeR4izw2RBJuQ2tNkWA2V9KeNQH2Xqijq0BV0lG+pLXW0rLV9MrzSto0DKwAKj7AKvCr5S0YWWjc6OTaPaTTMy2gr1clvAreiga481xRHh4GOuECfezIqrN2dzYwusdYEL94pL3QvSqd7+Wtgl4CrHE3ZW8TLHQCn/oHtj6r+YPVsKoNiL72n3AnyFnPtKH8NwB+sw1d1tr40iH90ZQGeNOOv92eDVqqOyFu3gYRyqZFQOl4468Nd7TQX37QB3TiyzFurcVOoB/e0xJ3w0CCRsQHUPX8PZzHQkNAC6y+Hyr7Vx9aC2hHsnHrUk5EPa+TlBQBIrX/VwO9EiIgkeZAGmClrSpAt8FlJnrQTmttABuVWXIC/85BAx11ti77FPBK2bfKeOVumoC/R0CawGqFamdHIKzUQSr96TNE6ZMTWFX5kvZ/VYMwzzuBmPnjCIGJQ0uCJ8cqGXRaa+2zOMWYBKtxSyybX9YAiBD6/Dt9BC25VoolTQ/vZAi60p5O13krYN8F7AnIWR0iom3biIhGDSCe8lvg/RQJtGQT0fLcgi6vAdbtZ8DqcraO10YEoki9eO3LdUFe448DOJRVIwMp2zWA3ub15uLQG0TQHX27PcYTQGhNwN7bAz+SeiLCIIDrSKIRwHcIYQnQWqPGjfZMeN6aEbxbZwV0NK8v1wjwqLy+no6GwfLKZQSoXFvwypqhfep67e92YafS2XcIcWchSINUCbIqWF0MshKv45HkN4olN8ubJJkwgJn0IyJEaagN6ASuAHyHOJVQlnw1tRmVRxpB5+n8YdYM5K+AbgHxzhWAp7x2TUGX2zeaZH8Ksu7MN21+FUy5b1S2qk0iqbdqNQJe4trbhgDzmC73q5AmI85k753ylxNYlPqsTJRXluqbAdl0NF9hQSa6QEJlVg7dubpdSdd53OZ0D+gSCb6gR1pg2zbjAwQTPdFWK2/ruAbZA/wJCSJpruRFJIyk36aJ9FrgUVsdrHbVldGBJ5kovaoZKnW7CZAH9jrNdaq+q2xe/k9MCAl4d8G3efydcdPA6TqhRmjm7JiAASDHGx8AUqpb6ntARlphIoUzisDfBawAmiy3rpLAk9BMcrM8awJaa/Tr/IWni43Ee/kdVMZSDMH1gBKAGpb+ynUk/V69ZROApEhPIv3uEBGGCNt+bwSg66F8jwSWNEM9VvHmgKjG6q0xMWPQsvhK2dAJ1C+BVPxQ9hzTUXjqB3ggN250nBdJ7fy/rt9aS78Gnuy8kqbwAMD2dJ7bqAAH1TgwLZ4W0A5hVA5qgBXA7Dz879AEnk33QEbERm1GZiA9aCYPUvmIXJnqdkEO0icCgGFh6AR6xKim6c5/EjywUbnJPBXSrOrW99T5ESmQh43ARGV1HT1Eq6rxKkm2tlHbriXhQQNIqGqDsbeotClz1QzY5+q34+9qnqpaUfkSR3MFw+usSL1jNjInDoEs4Gcge6Bbs9C4Udvy9vqewAiYSOo9J/AWmYIw1JWl68D8TKRx4ivgSkDq3EuT+pHKt5MzHdDBOVw4mKm1bfIBIAHQTJnEQ+0AJoLeBNyqfmQKqmUGwhrwbVs6XvEDBDgiGuw+Ah1rAZH8j/c/mAETFym32mL7tmEBtybFaolt22YNUAb1q/rfBv3u6CAjAzIBuh05W2m3JBCpljb71i1ufVMHAt43D3LPGexlyS8cmgSdANJRkTbw4tlkz0+NCiKyIDJYlV8lgmcStJQyc5/EYZol3hIgs+kp+Fu7tIPy9rN6SIO4TiBS+Tp4nv6d2b9KsKAhtY40GcrTbcpZX3v5Gkj3CyCwAoectgo4qIyo+q3hcpV2dFvDhyG28wZCWEfvxKYDAaXL3CHH5MQ5+wAzyZe8AWTKAUdpnwWdOc2qeesQZtKPSOKBWSFLRJBt2+IPQyLJ8nwAFN4AfUj/DgOR04fqW/BtOtIAkTmQ9OZIf2zz/RGEle5paKe1AGNQZzvfSBxNmQvQ7Q1OYGgCnKAlMZP2VSdvuE9gjqTtqZxX3wmeEyjSG2kFtDyMbH/mC2jVzswTYNmBJL8To23EG9PGFxHcYaDtuIkc12A8HEX8RNDbuivSr9X+ZAKA7Zd4aAIMwNmW7ioJJolX0quHeRZoHdeSnpWbloOral2+rnki1V7IAPTKeOWjsvZsAdTp4uFHhwXRtmfLWC0xALZd567itzaYiEzyIwJMJoDoki5vWKh9gPOIy/zU6AD5Jk/aQme5HjQB8PwtuJmmiBwzzxxosxCB70m+l8+NqYUgEwZzJUQzdwiISuC+8uYP21AaUufVet6hy1jJrvoBXbpv2PlBKxjwtQaQcjp/3/bZCYzCqoPo1X8vXCtRVVMU+Q1yjkCuagCdjiTclq34B1aleyahl0nMxb7vsxPoOX0S+rV2yh8SoxK0ba8MXa0PMDw7qKPPOr1y6L1+SOqRb5BJt3dGZBDpn8q0LWxvcgIllLx68QGcteA3ieCC/lUAESms06cJ4al8JKWRA2g/5fak3JP6oR77mgCRoat+x/Z78WkmUM7RcBDmnVe+F+6SwQP2lLwDzzNUCaHTBGD3WcDuX8/Ri4AW1ZyN7yseflfzjqePALdppeXgKO+vCMxE54ml+yqDh4E6bwCcaUob7L8iSNk0eP6B2kkMyZGYBm3XhxGCAdcjgPgGcDkYxbM8r/7bRPGk14IbOXlQ+nn25pFNn6QdbPj0/IDpEFVv9u15WqCre0uSrbmAR2TocW+sLtcugCcGGHXw22GlTeTYVdtEEk9E8KMQaM8dcyB1BfSetyULQVuu3pG670fbprTwyyCdN5kEsBfwztz/LQ1hqmRaoGQCKF4FHPb3Rw4hzT8IAYG30l+09550R46fVvnbbuotSb3GoGA2KhrChkxiNRhZO9aee1JezVux+8j+D2qeZ5WfkWDjYF7fqPl93y8p33ba9hn8bduo72/yHD13OjfhSMVXeBIsETwgqyaAyP99QNs+BNYD3Bw9v11qH+VDp1BN7CDgMxOA0u5/GKJMwB2NsRJcx+77cWdFq3gmIAIalakSwQPfcwY9FY60RDRtPNl9S4LtMwUMNYCn/iFBHCcQlUchMjWeSvaCZ8urbUY+ga4bqfwsbSRIPAcQAg28fvdoQAPY2UEBwwaPEN1feDgDmAHsTdastIfKe37BHYlf8QfG62AmsF1bvblxOJ9fGepZk7Dv++wE2o6PZgOjcLdeOYgn7hBhIgE7xAicPnt9B/QJVNkyHmiIbRu3a/P2IUGf52/Y60eaQo8aBPB936fraRi4PA1syqyk/1RA/oIG1psksoDra619Mmm3ZVprn5+zdz4NH4BrigRtG0cKYIawovozcxH+SFRo48/Yb/A6+2lg/mwK1VrAAzybEbSawHMEP4n5kjHy5IU8mb1n5nle36wZVMb+EGQ9JFQmYN93mn4bZWUuIApP6iNw7oSq42dBjOy4BbgErHOO8qK2Vg4hhm27zxdYlVnp9NY+P8zAx4fdJ8+/JtLa5y9ySTrz/Pf9pIwckr9tW7+2ZfrxXYo+6STeeGpHx+UdbRltf62kICfKSuEEkP0NHp7H7RmoGQk94iJtpuPStsV4vytpjRodPH5+bYG06S6YAChNGASq/Hm4rB10CPhS1gLeAQYTLx74Ynt1XD4X86QQapXvZ1+Zozmlgz+OZQFHhNktI5ZI8AXUjggzoLNDS6cFtRNBvlQ6L4IQ0UwUGbaqurZdd/hk9tm5wBsP3pNwD8Ahj/FnZxB0Dbheq7BOKMBY+mV/amclsPxOQCCZ1UOkH0myJ91aolc0gxAAOVDI8bKHB7z9TKxqBiLtUCGCJ+32LNe3CKClUYL1zHXZ8AcnEZH4+huDFcLQSXScl+QTUameECBS616eZw46odg3Fy4BEtUfST+S+gF0GkkgaY80AFL1Yg60tK2aBCFBqbx8J3jGdt8jhvUB+uSLA3AGaNcKG17uReagO3cc/8EqeMg/Y/snDQDMCjH449ERITSofhmi84w/2YoAQnZ6AlFGAAnAlz9ARI420Q5cd+S22o6aaF+f2HPX1huPvmoCKmof+gcOrI80gAbpUvOfZUIkxRYgBKA2L5Zw/V58DBIvecdxfJj+zQs1D510HpcJ0J9hoVEBAgTN0fdj8aPOAXhrCha1woST0RK6zEQAkT4PaC9cnU1EdEw+gbSRkUnCtm2QIEREG29TOtIa2v+AJGBgAoDK1+Zh0AAGvGEYmYz/V6S8cc3587QNIoakQQ0gnac70Fb2HLuPCWgDOAJMZAIsSDruAqjyiMYfrrb39kyJjNOj1TW9uOJNw+oRgfy6lyUBBAv8WZn+O0PBVnSk9nXcXkvchj4PcNJJfF7OgpYiRBCReEsMnSbt0kHdHCBANMDHcUyqW8DV7UfmQ8pL0HMDQ10eh4EW1EilhyODdk0CrXj+k4MIfl28xwnPGXhAe6ToGqB9Z/bQUA41NgHtAMPEdLZ5skhCa22YLh60xXF24mzbNgDrEUTy7LWnTbT6jqZ89UaKEgmSCSFt70V7ROrb0xy63zS4tg1LjMEEaJX/6SHqY3HboRkZbHoEgFy31iCoAr7O076BJoQmkvUZrDbQZaAPsCLthXH+BLp29to1/LPSHhJC/a2DyDxosC0JiAgT4KSTGjX4SxzInlfKoGtEBmTbI9/A3he12dOPz8JRSgAArrc4hLQFAk5LeU9Xf0HE0xIIeGb+7DEIANeCaK91nV1uFEl5FmzHW5B1fmTLrX/gAeoRJL1WpggRIAI1S/e0grdq6GkJ74hIE5ZPzMCuIzZUSGElW6ehtkTdR22sAByVQ2drAqpgR1PFkZpHaZsDeDWtmwCapRrhFWkIdyJIOsdz9jwQPRORgeYBHwF70rUaqPN0HZtmtYpoAE9avYUhT/L1ti5Puhtv4ydhzoeiIQmMCejmAew9tKDr+K3lYNSJ0TkjQAXsahkvH6ULye9I+7BkbNS79gVcVZ/8ybjhGn6KBlT8d8rXAxuZg12D+Uml0lDwic8Aw2cGeXjgVfJ8FMLpxwk7iJEPgCQfEmRh5s9O/lBLFoHQZBEztWSiqDuMhNU/kRkFDGBM+LD786yZFiiDx4uAG0BLpDBlKibAJQb45U3PARzUvfoyeDi32kjgk/ZFBQDfhZgvjCz43QSUpfgroQjYCugVIuh5hwjwJ3nouTQBKhqhH9so1RGAQzm+iDCUCf7K96y+sX1nZmrUOgki8CcTgK51p/U0pa51YDZrBLqcXEuzB7krd0Kknqb+RAwCNwI/IwEzT3v/3LmAh/sEBNCNr6niDOzlg67pfD1XIO/ar+mJE6jMgZX+1q5ZPXkY7V90YNqcJm1okCYfZQFcr6yYBbknBND5JOsO+FrCuV02f/p1ceePPVuClMlCM/AKRCJaMAEWiA7WScSNJ8Cna6Jhifjks2sEaWcgiwZN+QfD9SIJ7LXcc0Wy4cQOY29/sv08e/4W2DGOyYBNwjwPgIAf0phoF91cMQUwj8fr607gWpkAJjNT+JXK6N4QxIU8VFb7ACvAa38hVf1fM4P8A0uIkRQLE0MCLGO1D9M+ewIvhGynW5Wsg85D2iEDcQJDlqNfAHYl7pkA5OFnh6cdmGdpz8B85BOAPYLyrhbfx1vCdIcisD0yEI1LuFIG+QOorr5HlJaV0ZLYHTVnrj6S+mnyRw/xbmwPExOAzEYIPLG7kQT1w/BpmC2ENILXyYgMmTaRpV2vffQ8EZh3yloCIEJUJF/et9fRQzowRMykv3EjoromkHdBQFsc9PHKhyFV4KpSfCf9bltVcCvxAXxl89H6AFL1kkdE05+fK5GAafABKuS4vRagh346HXVy1H4EaJR/t559LqbLQcvsPjNPKt2aBPj7f4702/Sn9p+IiBMn0BIB7gqWkBEjU/GV0Nq14uip6GpYub/WSpmUl+y2md71wLcgQ4K1fEOof+CvgFG/PjIBmmGVcitl7hCpGmzbiAAQ3K/kyyxepCVkq1barlH9zDxt+HD9BbKSP6d7Uu9qgExdZ+ENfyILb5MDAVQhxbCoA1R+KPnGu7fPgcCb8toMrpAP2XtIBOLx07A7vsDvCNYsvXlfTx1XCTGAo/7mn7XlXh0EuJs3SffYJ5EGIKI+TJQ6xG9+Hv6DZBApeRpYLZH2tIAAGXBIEyCJ9XwLV7qtateLRsPsoL9a2OvqNDVKkLC8FrDc6T9Yj3n9521sWUgAntU09AkU+Eh6PUJ5wLtko8s/sMM8z2QgE4DCKwSogvVWGVkefvLs0s7gtQNphqAY4JF5yPyBzFeIjmq5ylHyAVbBs5KZteHeF6hsos9XTPPvm9G1lc2qeZ0A8qrAV9Ij6fYkfVL5+jBTu9pptHXsdSXsFjgU7qR7UvdW+26a3nQi6XpTiin/6eBGDUzXWrCIaPgTrqisd/bas5I9lE32/iPNoLeBpQdxToD/l2mO5vDqI4mMJD0FV3206al5InLzugA5U7v2QO8U5auOep8ActZzCt499A4iXcdrw2szerbs+UMCiGkIFnYQGZDURiQb2lC/K+yZkFALqJEBwsb2B/wyKOrESoeis1dWxzUZsngGdDWeSbUmAzUaFnbQ2YIrz43yXXAByby6k6SrYR7yMWy/wx+KrBLgTrm329ZxW8ZbzrZ1XOet8TDDl5014BEp3Dg34s2O9ed72edHRPD6xPbbnhV0r8G+899x7b1ctY6t70kkktAwzf14ozgyAA6fBTzTAMwMdwNZYui83XZI1mErYLU2f3V85x5P60fll4FO0jISeOBH28Qz+6/zZSu4fjd5X0SKwQS8BQi66ROSZffwdiBV77cCKAJOhl/iH1Tq9zRiOJtIhMmJgNd9bTWA1y8SygS4A8xq2Tfum7UhcUSAQRotYGKX21yuDDZfZJE2ZOk4raOe2wNYCEBEw8JPj4M601Sw15FvAYjiWoqz+0ZgRveP3gtJWDUeSaaXR0QD+JnzWD2G/uDx/Tx/bZoH8OL9rD89KnZ6BVB4r99wHkADO2o9SV+ND3l0aYKV4aGnCSYiCD5KVry+hk7gUzCe1JnaAKMNy/q795DzpPZNvAJOSoLG17qDxIN63rtWtIP0W9RPEqAPICz9/DfnoCx64KneV8qITmK67CEq593XPoOXXiGjB3YGzjIBHrYdTf4M8UD6UX/ttpGVDqyA46e1oFwj/bkaetGJdOpZLHmIaFCf9oycsSpY/dDOoU0nntYH9H0z4Kd3T0iA8nXQaeNEEF+qowbiWAdpAq/zQ2IxE4HhjD5Lm+iZK0SsdFzZGWsA+Eq7dNV/dH9pS3v9RUJMM4GM1LDTYSsdfKdsBthq+yJxWQetHClIwLFknqVf0jSpVp7jWjlsZDAegq03LQaxuiaiSQWtAvLGdZf24HlKz9r9D58A0o69vnXI/UT13/yLIPD4mpY5b80c7P0lu/qugZx1+CpJnpJLk2TlebL0p+DbZ8zi5ecA4FuNUiKANIacuUocEaMKavUeGZBERI2ZKCrDXxNgSFI5OkDyCx8qPnW6+COcSyO6zzCvf+M5s2Dr7JY5U8cWpiHvEGNgLa3fb0gbnCki5EBW2kvzRKo7yDfaWCzzZnso7FEjHmvudO6URmsd+JFgHsAdy36cnzskzZ4nIgSqM4yM3gKTTPsA2Ax4lLbbzKr0ZeXt1OqnIHVHCN0zVH+ft6bWgmdKJLP0HkFHe+BW+s97tzt9W30vD1udNu0Iut1x+nA81ArzuaAZ+oracA/RAuN9NBExqRb8DeDYVQGtADfFwTta8+a167Vtw87Mf0SdXQIN1VUP3xc+aHSapG27UFLxZuUejRc8Z6+zv/dEE1Z6U4t2+joRpbwBKwU3iN/N8+IWfJX3x87M/8vM/7gF8krHOxMiqD1vK9STo9K219FPwLFEKbcfTMIttwWuv/H//Bf4E+RospzRVAAAAABJRU5ErkJggg==";

var ptrn = defs.append("svg:pattern")
  .attr("id", "raster")
  .attr("width", 128)
  .attr("height", 128)
  .attr("patternUnits", "userSpaceOnUse")
  .attr("patternTransform", "translate(32,32)")
  .append("svg:image")
  .attr("xlink:href", bw_bitmap)
  .attr("width", 128)
  .attr("height", 128)
  .attr("x", 0)
  .attr("y", 0);

var filtered = svg.append("rect").attr("x", 32).attr("y", 32).attr("width", 128).attr("height", 128)
  .attr("fill", "url(#raster)").attr("filter", "url(#discrete)");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>

<svg width="0" height="0">
  <defs>
      
    <filter id="discrete" color-interpolation-filters="sRGB">
        <feComponentTransfer>
            <feFuncR type="discrete" tableValues="0 1"/>
            <feFuncG type="discrete" tableValues="0 1"/>
            <feFuncB type="discrete" tableValues="0 1"/>
        </feComponentTransfer>
        <feComponentTransfer>
            <feFuncR type="table" tableValues="0.486 1.0 0.937"/>
            <feFuncG type="table" tableValues="0.812 1.0 0.360"/>
            <feFuncB type="table" tableValues="0.847 1.0 0.125"/>
        </feComponentTransfer>
    </filter>
      
    <filter id="gradiental" color-interpolation-filters="sRGB">
        <feComponentTransfer>
            <feFuncR type="table" tableValues="0.486 1.0 0.937"/>
            <feFuncG type="table" tableValues="0.812 1.0 0.360"/>
            <feFuncB type="table" tableValues="0.847 1.0 0.125"/>
        </feComponentTransfer>
    </filter>
      
  </defs>
</svg>

На английском StackOverflow мне никто не смог помочь, может в русском сегменте помогут.

введите сюда описание изображения

Есть произвольное PNG изображение, где голубой это -1, белый 0, а оранжевый 1.0. Проще говоря это визуализация двумерного массива данных в области -1 ... 1.

Необходимо разработать SVG дисретный фильтр, который бы все значение от -1 до 0 показывал одним голубым тоном, 0 до 1 оранжевым.

Решение должно быть только в виде SVG фильтра, остальные методы не интересуют.

Пока мне удалось сделать нечто похожее, но если исходное изображение черно-белое, где промежуточный 'нулевой' цвет #808080.

Ссылка на оригинальную картинку https://yadi.sk/i/jE5RE7ktbF1IVw (PNG, 128x128)

9
  • Это можно сказать искуственная задача, для саморазвития так сказать. Поэтому нужно решение именно на SVG фильтрах.
    – VVK
    20 июн 2019 в 18:04
  • D3.JS основана на SVG, тащить в нее шейдеры конечно можно, но нужно именно то что описал. Тем более производительность не нужна.
    – VVK
    20 июн 2019 в 18:09
  • Одним, но самым жирным 😂
    – VVK
    20 июн 2019 в 18:15
  • Я с Вами особо и не спорю. Более того, если Вам не трудно, можете выложить сюда пример со стэком D3/WebGL/GLSL. Может кому-то пригодится такая альтернатива.
    – VVK
    20 июн 2019 в 18:25
  • Если формально, то меня текущий вариант устраивает. Хранить все в черно-белом формате, а просто менять два фильтра—discrete и gradiental. Но для саморазвития хотелось бы знать как из левого получить правый (см иллюстрацию) без трюка с черно-белой версией. Не должно быть сложно, но вчера, просматривая документацию ко мне SVG «примочкам», не нашёл ничего подходящего.
    – VVK
    20 июн 2019 в 18:33

1 ответ 1

2

Поколдовал с feColorMatrix, вот изображения до и после

введите сюда описание изображения


Как это работает:

первый фильтр:

  1. извлекает значения красного канала и вычитает из него 95%, соответственно в красном канале остается только область где было много красного.

  2. умножает значение зеленого канала на -1 и прибавляет 60%, соответственно в зеленом канале остается область где было зеленого меньше чем 40%

введите сюда описание изображения


второй фильтр:

многократно увеличивает значения в красном и зеленом канале, в итоге получается изображение в котором одна область красно-зелено-желтая а вторая черная

введите сюда описание изображения


третий фильтр:

делает черную область серой (0.5 во всех каналах), а цветную белой

введите сюда описание изображения


четвертый фильтр:

меняет черный цвет на цвет A и белый цвет на цвет B

введите сюда описание изображения

<img src="https://imgur.com/SD4DxlF.png">
<img src="https://imgur.com/SD4DxlF.png" style="filter:url(#f)">
<svg>
    <defs>
        <filter id="f">
            <feColorMatrix in="SourceGraphic" type="matrix" values="
                  1  0 0 0 -0.95   
                  0 -1 0 0  0.6
                  0  0 0 0  0 
                  0  0 0 1  0" result="f1" />
            <feColorMatrix in="f1" type="matrix" values="
                  111111 0      0 0 0   
                  0      111111 0 0 0  
                  0      0      0 0 0 
                  0      0      0 1 0" result="f2"/>
            <feColorMatrix in="f2" type="matrix" values="
                  1 1 1 0 0.5   
                  1 1 1 0 0.5  
                  1 1 1 0 0.5 
                  0 0 0 1 0" result="f3"/>
            <feComponentTransfer in="f3">
                <feFuncR type="table" tableValues="0.5 0.490 0.937"/>
                <feFuncG type="table" tableValues="0.5 0.812 0.360"/>
                <feFuncB type="table" tableValues="0.5 0.847 0.125"/>
            </feComponentTransfer>
        </filter>
  </defs>
</svg>

6
  • Ну тоже не идеальное решение. 1. Есть небольшой артефакт на большем разрешении yadi.sk/i/-Zhqv4Pw9H_yHg (голубая полоса). 2. Цвета не совпадают, при том что их пересчитал с большей точностью. Первый пункт весьма критичен. Так что скорее всего остановлюсь на своем варианте. Все равно огромное спасибо.
    – VVK
    22 июн 2019 в 5:42
  • @VVK из -а такой палитры сложно разделить цвета фильтром... 22 июн 2019 в 6:45
  • @VVK полосу я могу поправить, нарерное, а вот то что граница немного сдвинута - вряд ли. для другой палитры, где каждый из 2х цветов не является смешением всех 3х каналов все будет достаточно точно 22 июн 2019 в 7:09
  • @VVK а есть картинка хайрез, я бы подкрутил этот фильтр 25 июн 2019 в 19:13
  • Как раз в задаче картинки еще меньше, 16x16, даже 8x8. И паттерн, как Вы понимаете, всегда разный.
    – VVK
    26 июн 2019 в 8:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.