[{"data":1,"prerenderedAt":420},["ShallowReactive",2],{"project-9224776":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":28,"sentiment":29,"stance_mix":30,"scored_comments":34,"aspects":35,"strip":44,"post_text":46,"what":47,"said":95,"maker_in_thread":207,"shape":218,"grid":222,"attempts":383,"same_week":384,"maker_shows":18,"maker_hidden":412,"reader_version":413,"card":414},"9224776","Textures.js","Textures.js, SVG Patterns for Data Visualization","title","Show HN: Textures.js, SVG Patterns for Data Visualization","http:\u002F\u002Friccardoscalco.github.io\u002Ftextures\u002F","riccardoscalco.github.io","ricsca",1426678973,2015,404,61,28,2565,2,"legend","data","data visualisation library","library",[24,25,26,27],"svg patterns","data visualization","svg textures","d3 patterns","loved",0.507,{"positive":31,"neutral":32,"mixed":18,"critical":33},22,10,4,38,{"design":36,"idea":39,"execution":41,"docs":43},{"positive":37,"critical":38},8,1,{"positive":37,"critical":40},3,{"positive":40,"critical":42},0,{"positive":38,"critical":42},[45,40,42,40,42,40,42,45,42,45,38,38,42,45,42,45,38,45,42,38,45,40,42,42,45,45,40,45,40,42,45,40,45,45,45,42,45,45,45,40],5,null,{"problem":48,"audience":46,"pricing":46,"motivation":46,"time_to_build":46,"stack":64,"openness":92,"stage":93,"team_size":94},{"value":49,"source":50,"evidence":51},"Showing categories in data graphics without relying on colour","commenter",[52,56,60],{"id":53,"by":54,"text":55},"9225042","matt4077","Loving the retro look. But I'm not sure if patterns are as good as colors in communicating data. As soon as the data has even an ordinal scale, gradients or hues should work…",{"id":57,"by":58,"text":59},"9225528","Normangorman","Patterns are actually much better for colour-blind people like myself.",{"id":61,"by":62,"text":63},"9225544","kenbellows","You are probably right if the data you're representing is scaled, but this sort of solution is fantastic for categorical data. Also, see other comments re: accessibility for…",[65,76,82,88],{"value":66,"source":67,"evidence":68},"JavaScript","inferred",[69,73],{"id":70,"by":71,"text":72},"9225550","ttty","I never like how they chain methods. A better way would be: ``` texture({lines: true, heavier: true, stroke: 'red'}) ``` Is easier to configure if you need reusable textures.",{"id":74,"by":71,"text":75},"9229183","Image you have an UI which talks to this. For example you have a button on\u002Foff. How would you do? ``` var t = texture().lines().stroke('red') if(this.button.on) t=…",{"value":77,"source":78,"evidence":79},"SVG","maker",[80],{"id":81},"post",{"value":83,"source":78,"evidence":84},"d3.js",[85],{"id":86,"by":11,"text":87},"9225430","I did it with d3.js and topojson, then I used the resulting svg image on the website. You can find the code here https:\u002F\u002Fgithub.com\u002Friccardoscalco\u002Ftextures\u002Fblob\u002Fgh-pages\u002Fmap.js",{"value":89,"source":78,"evidence":90},"topojson",[91],{"id":86,"by":11,"text":87},"open_source","launched","unknown",{"praise":96,"objections":140,"requests":161,"questions":170,"alternatives":178},[97,116,129],{"value":98,"source":50,"evidence":99},"Beautiful, lovely visual design",[100,104,108,112],{"id":101,"by":102,"text":103},"9224928","anoother","This is lovely. When I see this, I don't think 'patterns', rather, 'hatches'. Makes me wonder what the state of modern SVG is w.r.t. real-world units - something like this really…",{"id":105,"by":106,"text":107},"9226287","bujatt","beautiful!",{"id":109,"by":110,"text":111},"9225076","kenrick95","Very beautiful :D",{"id":113,"by":114,"text":115},"9224886","radiodario","this is awesome! excellent for monochrome.",{"value":117,"source":50,"evidence":118},"Useful for colorblind readers and monochrome or print output",[119,123,124,128],{"id":120,"by":121,"text":122},"9224985","Hytosys","Awesome for colorblind people! Looking forward to using this.",{"id":57,"by":58,"text":59},{"id":125,"by":126,"text":127},"9231333","mmf","This library is fantastic. These patterns are essential in the production of print-ready and print-like contents. With the high resolution screens available today these make for…",{"id":113,"by":114,"text":115},{"value":130,"source":50,"evidence":131},"Well executed attention to detail",[132,136],{"id":133,"by":134,"text":135},"9225063","Fiahil","Very good attention to details! (like the position of circle patterns on edges of shapes) Have a star, you deserve it :)",{"id":137,"by":138,"text":139},"9228149","hackerews","Incredibly well done.",[141,153],{"value":142,"source":50,"evidence":143},"Patterns can be noisy and less effective than colour for data",[144,145,149],{"id":53,"by":54,"text":55},{"id":146,"by":147,"text":148},"9225654","jweir","Tufte points out 1 + 1 is 3 or more visually. The two lines create two elements, then the space is another, then the space on either is potentially another.…",{"id":150,"by":151,"text":152},"9225594","marxidad","Isn't this what Tufte refers to as \"chartjunk\"?",{"value":154,"source":50,"evidence":155},"Method chaining API is harder to configure than a config object",[156,157],{"id":70,"by":71,"text":72},{"id":158,"by":159,"text":160},"9225762","findjashua","imho, if the operations are to be performed in a certain order, use chaining. Otherwise, passing a config object is much cleaner",[162],{"value":163,"source":50,"evidence":164},"Support a config-object constructor API",[165,169],{"id":166,"by":167,"text":168},"9225943","wayfarer2s","An initial config object would probably be ideal, and then you could have the chaining to supplement those values. You could have the initial method take in the config and use…",{"id":74,"by":71,"text":75},[171],{"value":172,"source":50,"evidence":173},"Best use cases beyond geographic maps",[174],{"id":175,"by":176,"text":177},"9229524","jpatel3","Wonderful! What are the best use case for using this patterns apart from geo graph representation?",[179,191,198],{"value":180,"source":50,"evidence":181},"Tufte and Bertin principles on graphical design",[182,183,187],{"id":146,"by":147,"text":148},{"id":184,"by":185,"text":186},"9226551","sairion","It reminds me of Semiology of Graphics by Bertin. Nice work! I would like to work on React port, only if I have a spare time...",{"id":188,"by":189,"text":190},"9229126","jacobolus","Here’s what Tufte says: > Can optical art effects ever produce a better graphic? Bertin exhorts: “It is the designer’s duty to make the most of this variation; to obtain the…",{"value":192,"source":50,"evidence":193},"CSS repeating-linear-gradient",[194],{"id":195,"by":196,"text":197},"9226820","pdknsk","I just want to point out that many of the line textures can also be made with repeating-linear-gradient() from CSS, perhaps more efficiently so.",{"value":199,"source":50,"evidence":200},"ColorBrewer",[201,204],{"id":202,"by":147,"text":203},"9225661","Shades of gray would work as well. Also checkout http:\u002F\u002Fcolorbrewer2.org\u002F It has an option for creating color sets which are \"colorblind safe.\"",{"id":205,"by":189,"text":206},"9229141","Of course he did consider color blindness. Tufte recommends Imhof’s book Cartographic Relief Presentation on the subject of choosing colors for data graphics, and I’d second the…",{"comments":37,"answered":18,"key":208},[209,212,215],{"id":210,"text":211},"9225647","Interesting point. I simply relied o this post of Mike Bostock http:\u002F\u002Fbost.ocks.org\u002Fmike\u002Fchart\u002F.",{"id":213,"text":214},"9232300","It should be ``` var t = texture().lines().stroke('red') if(this.button.on) t.heavier() ```",{"id":216,"text":217},"9225744",":D thanks! Very good point.",{"commenters":219,"max_depth":45,"maker_replies":37,"first_comment_mins":220,"lifespan_hours":221},46,33,27,[223,225,229,231,233,235,236,239,242,243,246,247,251,253,256,259,261,263,266,268,270,273,275,277,279,280,283,286,288,290,294,296,297,298,301,304,307,310,312,316,321,323,326,328,332,335,337,342,344,348,351,355,360,363,366,368,372,374,375,376,380],[101,42,45,224,102,42],"project\u002Fpositive\u002Fdesign",[226,42,42,227,228,42],"9228286","other\u002Fneutral\u002Fnone","hardmath123",[70,38,40,230,71,42],"project\u002Fneutral\u002Fdesign",[210,38,42,232,11,38],"maker\u002Fneutral\u002Fdesign",[158,38,42,234,159,42],"commenter\u002Fneutral\u002Fdesign",[166,38,40,230,167,42],[237,38,42,234,238,42],"9226680","bkirwi",[240,38,40,230,241,42],"9227424","mbostock",[74,38,40,230,71,42],[244,38,42,234,245,42],"9230118","siddboots",[213,38,42,232,11,38],[248,18,45,249,250,42],"9225653","project\u002Fpositive\u002Fidea","swayvil",[216,18,42,252,11,38],"maker\u002Fpositive\u002Fnone",[254,40,45,249,255,42],"9228632","bennstancil",[257,33,40,230,258,42],"9224957","collyw",[150,45,38,260,151,42],"project\u002Fcritical\u002Fidea",[146,45,38,262,147,42],"project\u002Fcritical\u002Fdesign",[264,45,42,265,11,38],"9225815","maker\u002Fneutral\u002Fidea",[267,45,42,227,147,42],"9225904",[188,45,42,269,189,42],"other\u002Fcritical\u002Fidea",[271,45,45,249,272,42],"9225848","ncza",[205,45,42,274,189,42],"commenter\u002Fneutral\u002Fnone",[276,45,42,227,189,42],"9229115",[120,278,45,249,121,42],6,[202,278,38,260,147,42],[133,281,45,282,134,42],7,"maker\u002Fpositive\u002Fexecution",[284,37,45,224,285,42],"9226381","dylanrw",[287,37,42,252,11,38],"9226431",[53,289,38,260,54,42],9,[291,289,40,292,293,42],"9225066","project\u002Fmixed\u002Fidea","detaro",[295,289,42,265,11,38],"9225198",[57,289,45,249,58,42],[61,289,40,292,62,42],[299,32,42,227,300,42],"9225476","swah",[302,32,42,227,303,42],"9225687","gearhart",[305,32,42,227,306,42],"9226367","reverius42",[308,32,42,309,300,42],"9227510","other\u002Fcritical\u002Fnone",[184,311,45,224,185,42],11,[313,314,45,249,315,42],"9224988",12,"OliverM",[317,318,40,319,320,42],"9225388",13,"project\u002Fneutral\u002Fexecution","neumann",[86,318,42,322,11,38],"maker\u002Fneutral\u002Fexecution",[324,318,45,325,272,42],"9225874","project\u002Fpositive\u002Fexecution",[327,318,40,322,320,42],"9226320",[329,330,42,227,331,42],"9224919",14,"BaconJuice",[333,330,42,227,334,42],"9225116","ygra",[125,336,45,224,126,42],15,[338,339,45,340,341,42],"9225682",16,"project\u002Fpositive\u002Fdocs","emehrkay",[195,343,40,319,196,42],17,[345,346,45,252,347,42],"9225849",18,"jwiley",[175,349,40,350,176,42],19,"project\u002Fneutral\u002Fidea",[352,353,45,249,354,42],"9226667",20,"rcazangi",[356,357,45,358,359,42],"9224899",21,"project\u002Fpositive\u002Fnone","paulliwali",[361,31,45,249,362,42],"9224994","degroote",[364,365,42,252,11,38],"9225444",23,[113,367,45,224,114,42],24,[369,370,45,224,371,42],"9225126",25,"b4x",[137,373,45,325,138,42],26,[109,221,45,224,110,42],[105,16,45,224,106,42],[377,378,40,230,379,42],"9226997",29,"frik",[381,378,42,227,382,42],"9231941","shiggerino",[],[385,389,394,399,402,407],{"id":386,"name":387,"points":388,"category":20},"9200726","GraphpostgresQL",195,{"id":390,"name":391,"points":392,"category":393},"9193102","Wget-finder",130,"dev_tools",{"id":395,"name":396,"points":397,"category":398},"9191241","RealProblemHunt",122,"consumer_social",{"id":400,"name":401,"points":397,"category":393},"9224488","FasteR",{"id":403,"name":404,"points":405,"category":406},"9213637","Moltin",116,"web_saas",{"id":408,"name":409,"points":410,"category":411},"9191092","New Tab",73,"productivity",false,"v2",{"id":415,"name":5,"line":6,"ai":412,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":416,"top":18,"kw":417,"maker":11,"domain":10,"tier":19,"attempts":42,"strip":418,"url":9,"mix":419,"praise":98,"objection":142,"sub":21},9224776,0.51,[24,25,26,27],"5303030505110505150153005535305355505553",[31,32,18,33],1794036529492]