Skip to content

Instantly share code, notes, and snippets.

@enjalot

enjalot/_.md

Last active December 26, 2015 07:18
Show Gist options
  • Save enjalot/7113759 to your computer and use it in GitHub Desktop.
Save enjalot/7113759 to your computer and use it in GitHub Desktop.
Download ZIP
html5devconf icons
Raw
_.md
Raw
config.json
{"description":"html5devconf icons","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"survey.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"sticker.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"icons.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12},"icons.html":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/bb32bdE.png","controls":{},"ajax-caching":true}
Raw
icons.html
<div style="display:none">
<svg width="60px" height="59px" viewBox="0 0 60 59" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<g id="Crunchy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M10.1517437,19.811531 C8.30208971,19.0468471 7,17.2244814 7,15.0980392 C7,12.288199 9.28194504,10 12.0968669,10 L48.9031331,10 C51.7172088,10 54,12.2824699 54,15.0980392 C54,16.9209557 53.0395484,18.5243177 51.5962156,19.425752 C51.6317408,19.7322065 51.65,20.0439393 51.65,20.3599478 L51.65,41.9929934 C51.65,46.4243156 48.0661151,50 43.6451691,50 L18.1381643,50 C13.7089538,50 10.1333333,46.415141 10.1333333,41.9929934 L10.1333333,20.3599478 C10.1333333,20.1755961 10.1395361,19.9927252 10.1517437,19.811531 Z" id="Rectangle-1" stroke="#D5C8A1" fill="#F3EDD6" sketch:type="MSShapeGroup"></path>
<path d="M16.1123047,14.4902343 L18.2851563,31.2343747 L6.10565665,41.0041634 L21.2916158,46.1941912 L33.7854606,50.4641488 L38.5517588,37.2216803 C38.5517588,37.2216803 47.8943433,33.8751084 47.8943434,33.5 C47.8943434,33.1092484 47.8943415,16.5358512 47.8943415,16.5358512 L32.3095694,21.6455077 L16.1123047,14.4902343 Z" id="Path-1" fill="#BA8624" sketch:type="MSShapeGroup"></path>
</g>
</svg>
<svg width="60px" height="59px" viewBox="0 0 60 59" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<g id="Smooth" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M10.1517437,18.811531 C8.30208971,18.0468471 7,16.2244814 7,14.0980392 C7,11.288199 9.28194504,9 12.0968669,9 L48.9031331,9 C51.7172088,9 54,11.2824699 54,14.0980392 C54,15.9209557 53.0395484,17.5243177 51.5962156,18.425752 C51.6317408,18.7322065 51.65,19.0439393 51.65,19.3599478 L51.65,40.9929934 C51.65,45.4243156 48.0661151,49 43.6451691,49 L18.1381643,49 C13.7089538,49 10.1333333,45.415141 10.1333333,40.9929934 L10.1333333,19.3599478 C10.1333333,19.1755961 10.1395361,18.9927252 10.1517437,18.811531 Z" id="Rectangle-1-copy" stroke="#D5C8A1" fill="#F3EDD6" sketch:type="MSShapeGroup"></path>
<path d="M28.8163666,15.7537234 C17.3294107,19.7854942 11.4597263,27.3924302 14.9467527,36.9804023 C18.4337794,46.5683742 29.4417436,47.1820755 38.3767624,46.1496676 C47.3117812,45.1172597 48.0535529,40.5283336 48.0535529,35.8333991 C48.0535526,31.1384645 43.7660294,27.3012885 38.3767624,22.7670273 C32.9874958,18.2327655 40.3033227,11.7219534 28.8163666,15.7537234 Z" id="Path-1" fill="#BA8624" sketch:type="MSShapeGroup"></path>
</g>
</svg>
<svg width="60px" height="60px" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<g id="Chocolate" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M18.0859375,21.6777344 C18.0859375,26 29,56 29,56 L40.84375,20.5664062 C40.84375,20.5664062 18.0859373,17.3554688 18.0859375,21.6777344 Z" id="Path-11-copy" stroke="#D5C8A1" fill="#FFFEDB" sketch:type="MSShapeGroup"></path>
<path d="M41.7110928,8.78417969 C39.6087014,4.76935624 35.1547106,2 30,2 C24.8177608,2 20.3437457,4.79901461 18.2554253,8.84860927 C16.5540425,9.59875711 15.9678149,12.0673817 14.9599609,14.4423828 C13.9138737,16.90748 12.6956831,18.1464062 13.3007812,19.0180416 C14.5068359,20.7553463 14.9941405,23.35547 18.4160157,23.3554688 C21.8378909,23.3554678 20.9619139,26.0000004 22.0810547,26 C23.2001955,26 29.4335944,30.2802731 32.6162109,29.0195312 C35.7988274,27.7587891 36.1464851,26.0000003 38.7314453,26 C41.3164055,26 44.6835926,23.4223881 44.6835937,22.3173828 C44.6835949,21.2123775 45.2050809,18.4501953 45.2050781,16.8974609 C45.2050755,15.3447266 45.4550808,11.3798828 45.4550781,11.3798828 C45.4550755,11.3798828 43.4003914,8.78417969 42.1191406,8.78417969 L41.7110928,8.78417969 Z" id="Oval-26-copy" fill="#976105" sketch:type="MSShapeGroup" transform="translate(29.297301, 15.625951) scale(-1, 1) translate(-29.297301, -15.625951) "></path>
</g>
</svg>
<svg width="59px" height="59px" viewBox="0 0 59 59" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<g id="Vanilla" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M18.0859375,22.6777344 C18.0859375,27 29,57 29,57 L40.84375,21.5664062 C40.84375,21.5664062 18.0859373,18.3554688 18.0859375,22.6777344 Z" id="Path-11" fill="#976105" sketch:type="MSShapeGroup"></path>
<path d="M40.7110928,9.78417969 C38.6087014,5.76935624 34.1547106,3 29,3 C23.8177608,3 19.3437457,5.79901461 17.2554253,9.84860927 C15.5540425,10.5987571 14.9678149,13.0673817 13.9599609,15.4423828 C12.9138737,17.90748 11.6956831,19.1464062 12.3007812,20.0180416 C13.5068359,21.7553463 13.9941405,24.35547 17.4160157,24.3554688 C20.8378909,24.3554678 19.9619139,27.0000004 21.0810547,27 C22.2001955,27 28.4335944,31.2802731 31.6162109,30.0195312 C34.7988274,28.7587891 35.1464851,27.0000003 37.7314453,27 C40.3164055,27 43.6835926,24.4223881 43.6835937,23.3173828 C43.6835949,22.2123775 44.2050809,19.4501953 44.2050781,17.8974609 C44.2050755,16.3447266 44.4550808,12.3798828 44.4550781,12.3798828 C44.4550755,12.3798828 42.4003914,9.78417969 41.1191406,9.78417969 L40.7110928,9.78417969 Z" id="Oval-26" stroke="#D5C9A1" fill="#FFFEDB" sketch:type="MSShapeGroup"></path>
</g>
</svg>
<svg width="59px" height="59px" viewBox="0 0 59 59" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" >
<g id="No-pulp" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M11.9326172,5.33203125 L46.8662109,5.08203125 L40.1386719,55.4726562 L18.8505859,55.4726562 L11.9326172,5.33203125 Z" id="Path-5-copy" stroke="#C3CCCC" fill="#E6F7F7" sketch:type="MSShapeGroup"></path>
<path d="M13.9326172,16.7568359 L44.5258793,16.7568359 L39.579102,55 L18.9613747,55 L13.9326172,16.7568359 Z" id="Path-6-copy-3" fill="#F6B638" sketch:type="MSShapeGroup"></path>
</g>
</svg>
<svg width="59px" height="59px" viewBox="0 0 59 59" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<g id="Pulp" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M11.9326172,6.33203125 L46.8662109,6.08203125 L40.1386719,56.4726562 L18.8505859,56.4726562 L11.9326172,6.33203125 Z" id="Path-5" stroke="#C3CCCC" fill="#E6F7F7" sketch:type="MSShapeGroup"></path>
<path d="M14.1386719,17.7568359 L44.731934,17.7568359 L39.7851567,56 L19.1674294,56 L14.1386719,17.7568359 Z" id="Path-6-copy-2" fill="#F6B638" sketch:type="MSShapeGroup"></path>
<circle id="Oval-5" stroke="#F0931B" fill="#FDCF57" sketch:type="MSShapeGroup" cx="20" cy="20" r="3"></circle>
<circle id="Oval-5-copy" stroke="#F0931B" fill="#FDCF57" sketch:type="MSShapeGroup" cx="23" cy="23" r="3"></circle>
<circle id="Oval-5-copy-2" stroke="#F0931B" fill="#FDCF57" sketch:type="MSShapeGroup" cx="29" cy="17" r="3"></circle>
<circle id="Oval-5" stroke="#F0931B" fill="#FDCF57" sketch:type="MSShapeGroup" cx="30" cy="22" r="3"></circle>
<circle id="Oval-5-copy" stroke="#F0931B" fill="#FDCF57" sketch:type="MSShapeGroup" cx="33" cy="25" r="3"></circle>
<circle id="Oval-5-copy-2" stroke="#F0931B" fill="#FDCF57" sketch:type="MSShapeGroup" cx="39" cy="19" r="3"></circle>
<circle id="Oval-5" stroke="#F0931B" fill="#FDCF57" sketch:type="MSShapeGroup" cx="21" cy="30" r="3"></circle>
<circle id="Oval-5-copy" stroke="#F0931B" fill="#FDCF57" sketch:type="MSShapeGroup" cx="24" cy="33" r="3"></circle>
<circle id="Oval-5-copy-2" stroke="#F0931B" fill="#FDCF57" sketch:type="MSShapeGroup" cx="30" cy="27" r="3"></circle>
<circle id="Oval-5" stroke="#F0931B" fill="#FDCF57" sketch:type="MSShapeGroup" cx="30" cy="31" r="3"></circle>
<circle id="Oval-5-copy" stroke="#F0931B" fill="#FDCF57" sketch:type="MSShapeGroup" cx="33" cy="34" r="3"></circle>
<circle id="Oval-5-copy-2" stroke="#F0931B" fill="#FDCF57" sketch:type="MSShapeGroup" cx="39" cy="28" r="3"></circle>
<circle id="Oval-5" stroke="#F0931B" fill="#FDCF57" sketch:type="MSShapeGroup" cx="30" cy="40" r="3"></circle>
<circle id="Oval-5-copy" stroke="#F0931B" fill="#FDCF57" sketch:type="MSShapeGroup" cx="33" cy="43" r="3"></circle>
<circle id="Oval-5-copy-2" stroke="#F0931B" fill="#FDCF57" sketch:type="MSShapeGroup" cx="39" cy="37" r="3"></circle>
<circle id="Oval-5" stroke="#F0931B" fill="#FDCF57" sketch:type="MSShapeGroup" cx="22" cy="40" r="3"></circle>
<circle id="Oval-5-copy" stroke="#F0931B" fill="#FDCF57" sketch:type="MSShapeGroup" cx="25" cy="43" r="3"></circle>
<circle id="Oval-5-copy-2" stroke="#F0931B" fill="#FDCF57" sketch:type="MSShapeGroup" cx="31" cy="37" r="3"></circle>
<circle id="Oval-5" stroke="#F0931B" fill="#FDCF57" sketch:type="MSShapeGroup" cx="27" cy="49" r="3"></circle>
<circle id="Oval-5-copy" stroke="#F0931B" fill="#FDCF57" sketch:type="MSShapeGroup" cx="30" cy="52" r="3"></circle>
<circle id="Oval-5-copy-2" stroke="#F0931B" fill="#FDCF57" sketch:type="MSShapeGroup" cx="36" cy="46" r="3"></circle>
</g>
</svg>
<svg width="61px" height="59px" viewBox="0 0 61 59" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<g id="Top-of-the-tube" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Rectangle-5">
<path fill="none" sketch:type="MSShapeGroup" transform="translate(27.148781, 24.992171) rotate(45.000000) translate(-27.148781, -24.992171) " d="M47.7481775,21.1539709 L43.6666014,16.5698358 L43.6666014,16.372233 C43.6666014,16.372233 42.2209274,20.3680674 35.584019,20.3680674 C32.0955022,20.3680674 23.988418,17.4196278 16.6475718,16.372233 C10.0224476,15.4269574 3.936528,18.574664 3.936528,18.574664 L3.936528,24.9793611 L3.936528,31.0074073 C3.936528,31.0074073 10.0372634,34.6776391 16.6475718,33.5864893 C24.269607,32.328336 32.7111454,28.864019 35.584019,28.864019 C40.5096322,28.864019 43.2042145,32.845511 43.6120798,33.4968659 L43.6120798,33.4968659 L43.6120798,33.5123212 L43.6172849,33.5051961 C43.6501513,33.5579093 43.6666014,33.5864892 43.6666014,33.5864892 L43.6666014,33.4376877 L48.4483392,26.8920562 L50.3610344,26.8920562 L50.3610344,21.1539709 L47.7481775,21.1539709 Z"></path>
<path fill="none" d="M47.7481775,21.1539709 L43.6666014,16.5698358 L43.6666014,16.372233 C43.6666014,16.372233 42.2209274,20.3680674 35.584019,20.3680674 C32.0955022,20.3680674 23.988418,17.4196278 16.6475718,16.372233 C10.0224476,15.4269574 3.936528,18.574664 3.936528,18.574664 L3.936528,24.9793611 L3.936528,31.0074073 C3.936528,31.0074073 10.0372634,34.6776391 16.6475718,33.5864893 C24.269607,32.328336 32.7111454,28.864019 35.584019,28.864019 C40.5096322,28.864019 43.2042145,32.845511 43.6120798,33.4968659 L43.6120798,33.4968659 L43.6120798,33.5123212 L43.6172849,33.5051961 C43.6501513,33.5579093 43.6666014,33.5864892 43.6666014,33.5864892 L43.6666014,33.4376877 L48.4483392,26.8920562 L50.3610344,26.8920562 L50.3610344,21.1539709 L47.7481775,21.1539709 Z"></path>
<path fill="#50DAE2" fill-rule="evenodd" d="M47.7481775,21.1539709 L43.6666014,16.5698358 L43.6666014,16.372233 C43.6666014,16.372233 42.2209274,20.3680674 35.584019,20.3680674 C32.0955022,20.3680674 23.988418,17.4196278 16.6475718,16.372233 C10.0224476,15.4269574 3.936528,18.574664 3.936528,18.574664 L3.936528,24.9793611 L3.936528,31.0074073 C3.936528,31.0074073 10.0372634,34.6776391 16.6475718,33.5864893 C24.269607,32.328336 32.7111454,28.864019 35.584019,28.864019 C40.5096322,28.864019 43.2042145,32.845511 43.6120798,33.4968659 L43.6120798,33.4968659 L43.6120798,33.5123212 L43.6172849,33.5051961 C43.6501513,33.5579093 43.6666014,33.5864892 43.6666014,33.5864892 L43.6666014,33.4376877 L48.4483392,26.8920562 L50.3610344,26.8920562 L50.3610344,21.1539709 L47.7481775,21.1539709 Z"></path>
</g>
<path d="M46.4545898,52.8818359 C46.4545898,51.9506836 46.3017578,47.5908203 46.3017578,47.5908203 L47.5019531,47.8925781 L49.0214844,47.6425781 L50.5405273,48.0454102 L51.902832,47.6425781 L53.1396484,47.9853516 L54.9370117,47.4853516 L55.8398438,48.0454102 L57.2539062,47.328125 L57.1333008,52.4658203 C57.1333008,52.4658203 46.4545898,53.8129883 46.4545898,52.8818359 Z" id="Path-19" stroke="#979797" sketch:type="MSShapeGroup"></path>
<path d="M45.4287109,51.5561523 C37.0300607,51.5561524 24.0542152,50.3424488 14.3803711,50.1850586 C7.41562465,50.0717445 2.98411921,50.8527145 2.98411921,50.8527145 C2.44060518,50.934058 2,51.4426603 2,51.9989566 L2,54 L56.0069304,54 C57.1076723,54 58,53.1038782 58,52.0043917 L58,51.5561523 L45.4287109,51.5561523 Z" id="Rectangle-13" fill="#E22D2D" sketch:type="MSShapeGroup"></path>
<g id="Path-3-copy-+-Path-15-copy" sketch:type="MSLayerGroup" transform="translate(52.000000, 43.000000) rotate(-330.000000) translate(-52.000000, -43.000000) translate(45.000000, 36.000000)" stroke="#4FDAE2">
<path d="M1.32735676,7.62757554 C0.797009701,6.55910601 1.12750415,5.13609773 1.67905858,4.4371584 C2.23061305,3.73821907 2.41341886,3.5204488 3.73085598,3.5204488 C6.30258673,3.52044879 6.45355216,6.18590114 8.04179421,6.1859013 C9.63003627,6.18590154 11.1340443,3.5204488 11.1340444,3.52044879 C11.1340445,3.52044878 12.0848189,4.37244875 12.4835955,5.45107812 C12.6543259,5.9128775 12.7238751,6.41621803 12.5743099,6.91202239 C12.0754041,8.56588188 10.3114089,10.8280517 7.49128749,10.828052 C4.67116607,10.8280523 2.00907765,9.00101199 1.32735676,7.62757554 Z" id="Path-3-copy" fill="#BBF4FA" sketch:type="MSShapeGroup" transform="translate(6.857871, 7.174250) rotate(316.000000) translate(-6.857871, -7.174250) "></path>
<path d="M2.13452148,10.5136719 C2.34977527,9.49612396 1.95170735,8.47310218 3.62817383,7.85998535 C4.5177002,7.53466797 5.82282299,8.34742614 7.60913086,7.85998535 C8.38272331,7.64889043 9.51647949,5.95874023 9.51647949,4.54821777 C9.51647946,3.88952637 9.1431885,2.14709471 8.01062012,1.52624512" id="Path-15-copy" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
<svg width="60px" height="59px" viewBox="0 0 60 59" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<g id="Bottom-of-the-tube" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Rectangle-5-+-Path-3-copy" sketch:type="MSLayerGroup" transform="translate(28.635611, 23.638618) rotate(45.000000) translate(-28.635611, -23.638618) translate(4.635611, 14.138618)" fill="#50DAE2">
<path d="M45.2330897,5.78173783 L41.8780407,1.19760282 L41.8780407,1 C41.8780407,1 37.6027291,0.0956495938 31.9326002,1 C23.9377178,2.27513453 13.3214873,5.48888826 9.32628649,5.48888826 C2.4976102,5.48888826 1.00000013,1 1.00000013,1 L1.00000013,9.60712809 C0.999999842,12.3460305 1.00000013,18.2142562 1.00000013,18.2142562 C1.00000013,18.2142562 3.80687577,13.7722789 9.32628632,13.7722789 C12.6806689,13.7722789 23.5835451,17.3232103 31.9326002,18.2142564 C37.3213529,18.7893668 41.8780407,18.2142562 41.8780407,18.2142562 L41.8780407,18.0654546 L41.8780407,18.0654546 L45.8086216,11.5198232 L47.3808539,11.5198232 L47.3808539,5.78173783 L45.2330897,5.78173783 Z" id="Rectangle-5" sketch:type="MSShapeGroup"></path>
</g>
<g id="Path-3-copy-+-Path-15-copy" sketch:type="MSLayerGroup" transform="translate(53.000000, 42.000000) rotate(-330.000000) translate(-53.000000, -42.000000) translate(46.000000, 35.000000)" stroke="#4FDAE2">
<path d="M1.32735676,7.62757554 C0.797009701,6.55910601 1.12750415,5.13609773 1.67905858,4.4371584 C2.23061305,3.73821907 2.41341886,3.5204488 3.73085598,3.5204488 C6.30258673,3.52044879 6.45355216,6.18590114 8.04179421,6.1859013 C9.63003627,6.18590154 11.1340443,3.5204488 11.1340444,3.52044879 C11.1340445,3.52044878 12.0848189,4.37244875 12.4835955,5.45107812 C12.6543259,5.9128775 12.7238751,6.41621803 12.5743099,6.91202239 C12.0754041,8.56588188 10.3114089,10.8280517 7.49128749,10.828052 C4.67116607,10.8280523 2.00907765,9.00101199 1.32735676,7.62757554 Z" id="Path-3-copy" fill="#BBF4FA" sketch:type="MSShapeGroup" transform="translate(6.857871, 7.174250) rotate(316.000000) translate(-6.857871, -7.174250) "></path>
<path d="M2.13452148,10.5136719 C2.34977527,9.49612396 1.95170735,8.47310218 3.62817383,7.85998535 C4.5177002,7.53466797 5.82282299,8.34742614 7.60913086,7.85998535 C8.38272331,7.64889043 9.51647949,5.95874023 9.51647949,4.54821777 C9.51647946,3.88952637 9.1431885,2.14709471 8.01062012,1.52624512" id="Path-15-copy" sketch:type="MSShapeGroup"></path>
</g>
<path d="M46.4545898,51.8818359 C46.4545898,50.9506836 46.3017578,46.5908203 46.3017578,46.5908203 L47.5019531,46.8925781 L49.0214844,46.6425781 L50.5405273,47.0454102 L51.902832,46.6425781 L53.1396484,46.9853516 L54.9370117,46.4853516 L55.8398438,47.0454102 L57.2539062,46.328125 L57.1333008,51.4658203 C57.1333008,51.4658203 46.4545898,52.8129883 46.4545898,51.8818359 Z" id="Path-19" stroke="#979797" sketch:type="MSShapeGroup"></path>
<path d="M45.4287109,50.5561523 C37.0300607,50.5561524 24.0542152,49.3424488 14.3803711,49.1850586 C7.41562465,49.0717445 2.98411921,49.8527145 2.98411921,49.8527145 C2.44060518,49.934058 2,50.4426603 2,50.9989566 L2,53 L56.0069304,53 C57.1076723,53 58,52.1038782 58,51.0043917 L58,50.5561523 L45.4287109,50.5561523 Z" id="Rectangle-13" fill="#E22D2D" sketch:type="MSShapeGroup"></path>
</g>
</svg>
<svg width="65px" height="59px" viewBox="0 0 65 59" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<g id="Over" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<rect id="Rectangle-11" stroke="#979797" fill="#FFFFFF" sketch:type="MSShapeGroup" transform="translate(34.000000, 28.000000) rotate(15.000000) translate(-34.000000, -28.000000) " x="5" y="11" width="58" height="34" rx="31"></rect>
<ellipse id="Oval-1" stroke="#979797" fill="#FFFFFF" sketch:type="MSShapeGroup" transform="translate(49.000000, 32.000000) rotate(15.000000) translate(-49.000000, -32.000000) " cx="49" cy="32" rx="14" ry="16"></ellipse>
<path d="M2.70155257,22.9281856 C1.74060036,26.610428 4.37141909,31.2917654 6.06253669,37.7674705 C7.16072834,41.9727163 4.37141914,46.8751117 4.37141914,46.8751117 L30.7771359,52.6067554 C30.7771359,52.6067554 35.3894423,48.179679 35.3894425,43.7589828 C35.3894425,37.7674705 32.6283218,27.4110466 32.6283218,26.3703801" id="Path-7" stroke="#979797" fill="#FFFFFF" sketch:type="MSShapeGroup" transform="translate(18.942831, 37.767471) rotate(15.000000) translate(-18.942831, -37.767471) "></path>
<ellipse id="Oval-2-copy" fill="#515357" sketch:type="MSShapeGroup" transform="translate(50.000000, 31.500000) rotate(15.000000) translate(-50.000000, -31.500000) " cx="50" cy="31.5" rx="5" ry="5.5"></ellipse>
</g>
</svg>
<svg width="61px" height="59px" viewBox="0 0 61 59" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<g id="Under" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M25.1377902,23 C22.582126,32.7929687 26.0840793,40.1972656 22.3790012,43.8486328 C18.6739235,47.5000002 13.8340793,49.2675781 13.8340793,49.2675781 L47.3243137,53 C47.3243137,53 51.5850559,49.2705078 52.6065402,44.9433594 C53.6280243,40.6162109 54.0665012,29.4482423 54.0665012,23.0000001" id="Path-7-copy" stroke="#979797" fill="#FFFFFF" sketch:type="MSShapeGroup" transform="translate(33.950290, 38.000000) rotate(15.000000) translate(-33.950290, -38.000000) "></path>
<rect id="Rectangle-11-copy" stroke="#979797" fill="#FFFFFF" sketch:type="MSShapeGroup" transform="translate(30.000000, 22.500000) rotate(15.000000) translate(-30.000000, -22.500000) " x="1" y="6" width="58" height="33" rx="31"></rect>
<ellipse id="Oval-1-copy" stroke="#979797" fill="#FFFFFF" sketch:type="MSShapeGroup" transform="translate(44.000000, 26.500000) rotate(15.000000) translate(-44.000000, -26.500000) " cx="44" cy="26.5" rx="14" ry="15.5"></ellipse>
<ellipse id="Oval-2-copy" fill="#515357" sketch:type="MSShapeGroup" transform="translate(45.000000, 26.500000) rotate(15.000000) translate(-45.000000, -26.500000) " cx="45" cy="26.5" rx="5" ry="5.5"></ellipse>
</g>
</svg>
</div>
Raw
inlet.js
var results = tributary.survey;
var re = new RegExp(' ', 'g');
results.forEach(function(d) {
d.evil = +d.evil;
d.passion = +d.passion;
d.age = +d.age || 0;
d.exp = +d.exp;
d.oj = d.oj.replace(re, '-');
d.toothpaste = d.toothpaste.replace(re, '-');
d.time = new Date(d.time);
})
var qmap = {
time: {q: "Timestamp"},
pb: {q: "What type of peanut butter do you prefer?", a: ["Crunchy", "Smooth"]},
toothpaste: {q:"Where do you squeeze the toothpaste from?", a: ["Top-of-the-tube", "Bottom-of-the-tube"]},
cv: {q:"Vanilla or Chocolate?", a: ["Chocolate", "Vanilla"]},
tp: {q:"What direction does toilet paper go on the holder thingy?", a: ["Over", "Under"]},
oj: {q:"Do you prefer pulp or no pulp in your orange juice?", a: ["Pulp", "No-pulp"]},
evil: {q:"Where do you sit on the good vs. evil scale?"},
age: {q:"How old are you?"},
passion: {q:"How passionate of a person are you?"},
exp: {q:"How many years have you been building for the web?"}
}
var questions = [
"pb", "toothpaste", "cv", "tp", "oj"
]
var stickers = {};
questions.forEach(function(q) {
var answer = qmap[q].a[0];
stickers[answer] = d3.sticker("#" + answer);
answer = qmap[q].a[1];
stickers[answer] = d3.sticker("#" + answer);
})
console.log(stickers)
var field = questions[4];
console.log("field", field)
results.sort(function(a,b) {return b[field] < a[field] ? -1: 1 })
var colorScale = d3.scale.ordinal()
.domain(qmap[field].a)
.range(["#fff", "#000"])
var display = d3.select("#display")
var ppl = display.selectAll("div.person")
.data(results)
ppl.enter()
.append("div").classed("person", true)
ppl.style({
width: "60px",
height: "60px",
float: "left",
margin: "2px"
//"background-color": function(d) { return colorScale(d[field]) }
})
ppl.each(function(d) {
stickers[d[field]](d3.select(this).append("svg"))
})
var legend = display.append("div")
.style({
float:"left",
clear:"left"
})
var qs = legend.selectAll("div.question")
.data(questions)
var qse = qs.enter()
.append("div").classed("question", true)
.style({
float: "left",
margin: "10px",
clear: "left",
cursor:"pointer"
})
qse.append("span")
.text(function(d) { return qmap[d].q })
qse.append("div")
.style({width: "60px", height: "60px", float:"left"})
.each(function(d) {
stickers[qmap[d].a[0]](d3.select(this).append("svg"))
})
qse.append("div")
.style({width: "60px", height: "60px", float:"left"})
.each(function(d) {
stickers[qmap[d].a[1]](d3.select(this).append("svg"))
})
qs.on("click", function(d){
field = d;
ppl.sort(function(a,b) {return b[field] < a[field] ? -1: 1 })
ppl.each(function(d) {
d3.select(this).select("svg").remove();
stickers[d[field]](d3.select(this).append("svg"))
})
})
Raw
sticker.js
(function() {
d3.sticker = function(selector) {
var string;
var node;
var svgElement; //for deserializing svg elements
var sticker = function(selection) {
return sticker.append(selection);
}
sticker.copy = function(selector) {
node = d3.select(selector).node();
if(!node) return sticker;
//we keep track of svg element
if(d3_isSVG(node)) {
sticker.isSVG = true;
svgElement = node.ownerSVGElement;
}
node = node.cloneNode(true);
node.removeAttribute("id");
return sticker;
}
sticker.paste = function() {
if(!node) return;
return node.cloneNode(true);
}
sticker.node = function(_) {
if(!arguments.length) return node;
node = _;
if(d3_isSVG(node)) {
sticker.isSVG = true;
svgElement = node.ownerSVGElement;
}
return sticker;
}
//append a copy of the sticker to the selection
sticker.append = function(selection) {
return selection.select(function() {
return this.appendChild(sticker.paste());
});
}
//insert a copy of the sticker into a selection similar to the d3 insert API
sticker.insert = function(selection, before) {
if(!string) return selection;
return selection.select(before).select(function() {
return this.parentNode.insertBefore(sticker.paste(), this);
});
}
sticker.string = function(_) {
if(!arguments.length) return string;
string = _;
return sticker;
}
sticker.serialize = function() {
//Serialize the selected element into a string
string = new XMLSerializer().serializeToString(node);
}
sticker.deserialize = function () {
//check if our element is SVG
if(sticker.isSVG) {
node = d3_makeSVGFragment(string, svgElement);
} else {
node = d3_makeFragment(string);
}
return node;
}
sticker.toString = function() {
sticker.serialize();
return string;
}
if(selector) {
return sticker.copy(selector);
}
return sticker;
}
function d3_isSVG(el) {
if(!el) return false
return !!el.ownerSVGElement;// || el.tagName === "svg";
}
function d3_makeFragment(fragment) {
var range = document.createRange()
return range.createContextualFragment(fragment);
}
function d3_makeSVGFragment(fragment, svgElement) {
//we need to wrap our element in a temporarary intermediate svg element
//so that the browser knows to instanciate the Node properly.
//for some reason having the range select an svg element isn't enough.
// TODO: Allow optional namespace declarations
var pre = '<svg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink>';
var post = '</svg>';
var range = document.createRange();
range.selectNode(svgElement);
var contextFragment = range.createContextualFragment(pre + fragment + post)
var intermediateSvg = contextFragment.childNodes[0]
var node = intermediateSvg.childNodes[0]
return node;
}
}());
Raw
survey.csv
time pb toothpaste cv tp evil oj age passion exp
10/20/2013 15:16:09 Crunchy Top of the tube Chocolate Over 7 Pulp 35 2 12
10/20/2013 15:16:24 Smooth Bottom of the tube Chocolate Over 2 No pulp 30 8 1
10/20/2013 15:16:48 Smooth Top of the tube Chocolate Under 7 Pulp 29 6 10
10/20/2013 15:17:39 Crunchy Bottom of the tube Vanilla Over 3 No pulp 40 6 4
10/20/2013 15:22:30 Smooth Bottom of the tube Chocolate Over 3 Pulp 33 3 15
10/20/2013 15:28:16 Smooth Top of the tube Chocolate Over 4 Pulp 34 7 16
10/20/2013 15:32:51 Smooth Top of the tube Chocolate Over 4 Pulp 29 3 6
10/20/2013 15:34:49 Crunchy Top of the tube Vanilla Over 3 No pulp 29 7 3
10/20/2013 15:36:10 Smooth Bottom of the tube Vanilla Over 1 Pulp 32 6 16
10/20/2013 15:37:18 Crunchy Bottom of the tube Chocolate Over 2 Pulp 55 6 0
10/20/2013 15:39:38 Crunchy Bottom of the tube Chocolate Over 7 Pulp 30 7 3
10/20/2013 16:00:46 Smooth Bottom of the tube Vanilla Over 8 No pulp 27 7 7
10/20/2013 16:01:19 Crunchy Top of the tube Chocolate Over 2 No pulp 23 8 15
10/20/2013 16:06:25 Crunchy Top of the tube Vanilla Over 3 No pulp 26 7 7
10/20/2013 16:07:51 Crunchy Bottom of the tube Chocolate Over 3 Pulp 27 7 0
10/20/2013 16:12:50 Crunchy Bottom of the tube Chocolate Over 3 Pulp 7 7
10/20/2013 16:12:57 Crunchy Top of the tube Vanilla Under 3 Pulp 42 6 1
10/20/2013 16:18:00 Crunchy Bottom of the tube Chocolate Over 4 No pulp 27 3 1
10/20/2013 16:36:29 Crunchy Bottom of the tube Chocolate Under 9 Pulp 46 8 20
10/20/2013 16:38:44 Smooth Bottom of the tube Vanilla Over 4 Pulp 26 7 8
10/20/2013 16:43:12 Smooth Bottom of the tube Vanilla Over 8 No pulp 34 5 13
10/20/2013 16:52:04 Smooth Top of the tube Chocolate Over 7 Pulp 36 8 2
10/20/2013 16:56:41 Smooth Top of the tube Chocolate Over 3 Pulp 46 7 5
10/20/2013 17:03:52 Crunchy Bottom of the tube Chocolate Over 2 Pulp 35 3 18
10/20/2013 17:08:03 Crunchy Bottom of the tube Chocolate Over 5 Pulp 44 7 15
10/20/2013 17:08:07 Crunchy Top of the tube Chocolate Under 3 No pulp 34 8 10
10/20/2013 17:09:27 Crunchy Top of the tube Chocolate Over 3 Pulp 26 4 1
10/20/2013 17:14:13 Crunchy Bottom of the tube Chocolate Over 3 No pulp 38 6 14
10/20/2013 17:19:48 Crunchy Top of the tube Chocolate Over 2 Pulp 39 7 1.5
10/20/2013 17:23:47 Smooth Bottom of the tube Chocolate Over 3 Pulp 6 5
10/20/2013 17:34:03 Crunchy Bottom of the tube Vanilla Under 3 No pulp 41 5 2
10/20/2013 17:34:32 Crunchy Top of the tube Chocolate Over 3 Pulp 27 6 3
10/20/2013 17:40:23 Crunchy Top of the tube Chocolate Over 2 Pulp 28 6 12
10/20/2013 17:42:09 Smooth Bottom of the tube Chocolate Over 10 No pulp 37 7 12
10/20/2013 17:52:57 Crunchy Bottom of the tube Vanilla Over 5 No pulp 8 10
10/20/2013 17:59:52 Crunchy Bottom of the tube Vanilla Over 3 Pulp 30 3 4
10/20/2013 18:00:56 Crunchy Bottom of the tube Chocolate Under 4 No pulp 31 5 6
10/20/2013 18:04:30 Crunchy Bottom of the tube Chocolate Over 2 Pulp 28 3 8
10/20/2013 18:04:32 Smooth Bottom of the tube Vanilla Over 1 Pulp 33 8 8
10/20/2013 18:30:29 Crunchy Bottom of the tube Chocolate Over 4 Pulp 34 5 10
10/20/2013 18:42:40 Smooth Bottom of the tube Vanilla Over 6 No pulp 42 7 17
10/20/2013 18:44:26 Crunchy Top of the tube Chocolate Over 6 Pulp 24 7 4
10/20/2013 18:56:14 Smooth Bottom of the tube Vanilla Over 3 Pulp 26 8 4
10/20/2013 19:31:36 Crunchy Bottom of the tube Chocolate Over 3 Pulp 24 7 10
10/20/2013 19:44:35 Smooth Bottom of the tube Vanilla Over 8 Pulp 28 2 3
10/20/2013 20:15:55 Crunchy Bottom of the tube Chocolate Over 3 Pulp 24 6 1
10/20/2013 20:42:24 Crunchy Bottom of the tube Chocolate Under 9 Pulp 42 7 5
10/20/2013 21:03:37 Smooth Top of the tube Chocolate Over 6 Pulp 33 7 7
10/20/2013 21:36:36 Crunchy Bottom of the tube Chocolate Over 3 Pulp 31 7 10
10/20/2013 22:18:58 Crunchy Bottom of the tube Chocolate Under 2 No pulp 25 7 2
10/20/2013 22:26:43 Crunchy Top of the tube Chocolate Over 5 No pulp 25 6 4
10/20/2013 22:47:34 Smooth Bottom of the tube Vanilla Over 3 No pulp 45 3 14
10/20/2013 23:30:03 Crunchy Top of the tube Chocolate Over 4 Pulp 40 6 9
10/20/2013 23:31:38 Crunchy Top of the tube Vanilla Over 4 Pulp 26 6 1
10/21/2013 3:18:11 Smooth Top of the tube Vanilla Under 7 Pulp 42 8 15
10/21/2013 5:20:55 Smooth Bottom of the tube Vanilla Over 4 No pulp 60 7 20
10/21/2013 6:37:17 Crunchy Bottom of the tube Chocolate Over 2 Pulp 36 6 3
10/21/2013 7:47:32 Smooth Bottom of the tube Chocolate Over 4 No pulp 31 3 16
10/21/2013 8:33:04 Smooth Bottom of the tube Vanilla Over 5 Pulp 29 8 10
10/21/2013 9:18:56 Smooth Bottom of the tube Vanilla Under 4 Pulp 35 8 11
10/21/2013 10:39:05 Crunchy Bottom of the tube Vanilla Over 2 Pulp 37 4 12
10/21/2013 11:10:38 Smooth Bottom of the tube Vanilla Over 4 No pulp 28 6 2
10/21/2013 11:31:47 Crunchy Bottom of the tube Chocolate Over 5 Pulp 43 4 3
10/21/2013 13:24:26 Crunchy Top of the tube Chocolate Over 3 No pulp 30 5 4
10/21/2013 13:26:47 Smooth Top of the tube Vanilla Over 7 Pulp 29 6 6
10/21/2013 13:42:11 Smooth Bottom of the tube Chocolate Under 2 Pulp 40 2 10
10/21/2013 14:20:26 Smooth Bottom of the tube Vanilla Over 5 No pulp 31 4 2
10/22/2013 2:27:42 Smooth Bottom of the tube Chocolate Over 3 Pulp 31 5 14
10/22/2013 3:43:32 Crunchy Top of the tube Chocolate Over 1 Pulp 25 8 1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment