[{"data":1,"prerenderedAt":392},["ShallowReactive",2],{"project-36447871":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":29,"sentiment":30,"stance_mix":31,"scored_comments":36,"aspects":37,"strip":44,"post_text":46,"what":47,"said":88,"maker_in_thread":183,"shape":196,"grid":199,"attempts":355,"same_week":356,"maker_shows":41,"maker_hidden":385,"reader_version":386,"card":387},"36447871","React Graph Gallery","A gallery of graphs built with React and D3.js","title","Show HN: A gallery of graphs built with React and D3.js","https:\u002F\u002Fwww.react-graph-gallery.com","react-graph-gallery.com","holtzy",1687532863,2023,297,61,150,3109,5,"legend","dev_tools","charting examples gallery","web_app",[24,25,26,27,28],"d3.js","react charts","data visualization","graph examples","svg charts","loved",0.5,{"positive":32,"neutral":33,"mixed":34,"critical":35},14,4,0,2,20,{"idea":38,"performance":39,"docs":40,"design":42,"execution":43},{"positive":35,"critical":34},{"positive":34,"critical":34},{"positive":33,"critical":41},1,{"positive":33,"critical":34},{"positive":34,"critical":41},[45,34,34,18,34,34,45,34,41,18,18,41,34,18,34,18,18,34,34,18,34,34,34,34,18,34,34,34,34,18,18,18,34,34,18,34,45,45,18,18],3,"Many JS libraries exist to build graphs on the web (Vega, chartJS, Plotly...).\n\nThey allow to make charts quickly. \nBut you lose flexibility: you're limited by the options they offer.\n\nI just created a gallery with hundreds of graphs made with d3.js and React. \n- Examples are split by graph types\n- They all come with explanation and code sandboxes\n- Gradual complexity to ease the learning curve\n\nIt took me ages to create this project! Feedback welcome!",{"problem":48,"audience":54,"pricing":66,"motivation":67,"time_to_build":66,"stack":71,"openness":86,"stage":87,"team_size":86},{"value":49,"source":50,"evidence":51},"Charting libraries limit flexibility; wants building graphs with d3 and React.","maker",[52],{"id":53},"post",{"value":55,"source":56,"evidence":57},"Developers learning or building data visualizations with D3 and React.","inferred",[58,62],{"id":59,"by":60,"text":61},"36448643","julien040","This is awesome! I have always wanted to learn about D3.js, but I've never really started. I hope these well-made examples will help. Thank you for creating this.",{"id":63,"by":64,"text":65},"36449265","sputknick","This is really helpful for me, the right level of example. I find most D3 examples to either be too simple or too complex, this nails the sweetspot of visually impressive, while…",null,{"value":68,"source":50,"evidence":69},"Flexibility beyond limited options of charting libraries; teaching graph building.",[70],{"id":53},[72,76,80],{"value":73,"source":50,"evidence":74},"D3.js",[75],{"id":53},{"value":77,"source":50,"evidence":78},"React",[79],{"id":53},{"value":81,"source":50,"evidence":82},"Next.js",[83],{"id":84,"by":11,"text":85},"36462503","Substack is just the tool I use for the newsletter! The website is made using Next.JS","unknown","launched",{"praise":89,"objections":115,"requests":133,"questions":156,"alternatives":164},[90,100],{"value":91,"source":92,"evidence":93},"Examples are clear and the right level of complexity for learning.","commenter",[94,95,96],{"id":63,"by":64,"text":65},{"id":59,"by":60,"text":61},{"id":97,"by":98,"text":99},"36447939","aweb","Wow, I don't know a thing about dataviz but I really liked the website! The real world examples are really helpful to understand why we could use a certain kind of chart. Keep up…",{"value":101,"source":92,"evidence":102},"Beautiful design and background.",[103,107,111],{"id":104,"by":105,"text":106},"36450536","comboy","Well, I don't have any constructive feedback, but it's beautiful.",{"id":108,"by":109,"text":110},"36448626","SkyPuncher","The page background is wild. It's really neat how it reacts to the mouse cursor.",{"id":112,"by":113,"text":114},"36451942","MR4D","Did anyone else just waste 5 minutes playing with the background image? I haven't seen that before - very cool.",[116,126],{"value":117,"source":92,"evidence":118},"Some chart sections like connections\u002Fmaps are broken or not ready.",[119,123],{"id":120,"by":121,"text":122},"36453723","sterlind","The link for \"Connections\" (I've been calling them geo-graphs or network maps) seems to be broken, which is a shame. I've had a hard time finding good libraries for them, and…",{"id":124,"by":11,"text":125},"36462573","All the map sections are not ready yet. But they will be soon!",{"value":127,"source":92,"evidence":128},"Examples can be too shallow for complex charts.",[129],{"id":130,"by":131,"text":132},"36449592","mhh__","In my experience of implementing some clever financial plots in D3 I find that most examples on websites such as these are very quickly exhausted - unless you're dealing with a…",[134,149],{"value":135,"source":92,"evidence":136},"More writing on performance and animation.",[137,141,145],{"id":138,"by":139,"text":140},"36448433","azangru","Could you tell us what you have learnt about the performance of these tools? E.g. when you write about different approaches to building charts with d3 and react here…",{"id":142,"by":143,"text":144},"36450913","tunesmith","This subject goes so deep, thank you for creating this. I spent significant time creating my own component that uses elk to lay out a graph, and d3 transitions with interpolation…",{"id":146,"by":147,"text":148},"36470448","Tokumei-no-hito","Do you have a Substack? I remember your name from the data-to-viz. I’m interested in reading more about your experiences and thoughts on the space",{"value":150,"source":92,"evidence":151},"Export charts as PNG or base64.",[152],{"id":153,"by":154,"text":155},"36449081","cududa","Just curious, does your setup support exporting the charts as base64 or PNG’s?",[157],{"value":158,"source":92,"evidence":159},"Performance limits of React versus direct D3 DOM rendering for large datasets.",[160,161],{"id":138,"by":139,"text":140},{"id":162,"by":139,"text":163},"36449716","> I.e. the data calculations and the drawings shouldn't be done in the same framework (thats were React comes into play). I used to think so too; but I don't any longer.…",[165,172,179],{"value":166,"source":92,"evidence":167},"Visx",[168],{"id":169,"by":170,"text":171},"36448961","jitl","Very cool to explore the code here. Have you looked at Visx? It’s a D3+React mashup library, used by Airbnb and Notion for graphs. https:\u002F\u002Fairbnb.io\u002Fvisx\u002Fgallery",{"value":173,"source":92,"evidence":174},"Observable Plot",[175],{"id":176,"by":177,"text":178},"36451480","xnx","Observable Plot (based on D3) might be a better place to start: https:\u002F\u002Fobservablehq.com\u002Fblog\u002Fintroducing-observable-plot",{"value":180,"source":92,"evidence":181},"Vega, Chart.js, Plotly",[182],{"id":53},{"comments":184,"answered":185,"key":186},18,7,[187,190,193],{"id":188,"text":189},"36462460","Yes I know about VisX. The approach is kind of in-between what I suggest and what a classic JS library like Vega does. It is definitely a very good abstraction imo!! But I'm…",{"id":191,"text":192},"36462583","This is a very good question as performance is a key struggle in Data Visualization. Swizec answer below is great. I will write more about performance soon. But using several…",{"id":194,"text":195},"36448001","Thanks a lot for the nice feedback!",{"commenters":197,"max_depth":18,"maker_replies":184,"first_comment_mins":33,"lifespan_hours":198},35,85,[200,202,206,208,211,213,217,219,222,224,226,229,230,232,234,236,238,240,243,245,246,250,252,255,256,258,261,265,266,269,271,273,275,277,281,283,285,289,291,296,298,300,304,307,310,311,316,318,320,324,327,330,332,335,337,340,341,343,345,349,353],[169,34,45,201,170,34],"project\u002Fneutral\u002Fidea",[203,34,34,204,205,34],"36449582","commenter\u002Fneutral\u002Fnone","internetter",[207,34,34,204,170,34],"36451066",[209,34,34,204,210,34],"36451266","patrickthebold",[188,34,34,212,11,41],"maker\u002Fneutral\u002Fidea",[214,41,18,215,216,34],"36448897","project\u002Fpositive\u002Fidea","littlecranky67",[162,41,34,218,139,34],"other\u002Fneutral\u002Fperformance",[220,41,34,218,221,34],"36451370","jdonaldson",[223,41,34,204,216,34],"36457307",[138,35,45,225,139,34],"maker\u002Fneutral\u002Fperformance",[227,35,34,218,228,34],"36448701","Swizec",[191,35,34,225,11,41],[130,45,41,231,131,34],"project\u002Fcritical\u002Fdocs",[97,33,18,233,98,34],"project\u002Fpositive\u002Fdesign",[194,33,34,235,11,41],"maker\u002Fpositive\u002Fnone",[63,18,18,237,64,34],"project\u002Fpositive\u002Fdocs",[239,18,34,235,11,41],"36462568",[120,241,41,242,121,34],6,"project\u002Fcritical\u002Fexecution",[124,241,34,244,11,41],"project\u002Fneutral\u002Fnone",[112,185,18,233,113,34],[247,185,34,248,249,34],"36452107","other\u002Fneutral\u002Fnone","Juicyy",[142,251,34,248,143,34],8,[253,251,34,254,11,41],"36462564","maker\u002Fneutral\u002Fnone",[146,251,18,235,147,34],[59,257,18,237,60,34],9,[259,257,34,248,260,34],"36448803","mjfisher",[262,257,34,263,264,34],"36450331","other\u002Fneutral\u002Fdocs","vidyesh",[176,257,34,204,177,34],[267,257,34,268,11,41],"36462550","maker\u002Fneutral\u002Fdocs",[270,257,18,237,264,34],"36488601",[272,257,34,263,260,34],"36483098",[274,257,34,263,264,34],"36488619",[276,257,34,248,11,41],"36462556",[278,279,34,248,280,34],"36459933",10,"ttfkam",[282,279,34,204,11,41],"36462483",[284,279,34,204,280,34],"36465066",[286,287,18,237,288,34],"36448809",11,"itairall",[290,287,34,268,11,41],"36462494",[292,293,34,294,295,34],"36450949",12,"other\u002Fneutral\u002Fidea","epgui",[297,293,34,212,11,41],"36462536",[299,293,34,248,295,34],"36474494",[301,302,34,263,303,34],"36451439",13,"jibbit",[305,302,34,263,306,34],"36452482","spion",[308,302,34,309,11,41],"36462528","maker\u002Fneutral\u002Fdesign",[108,32,18,233,109,34],[312,313,18,314,315,34],"36450670",15,"project\u002Fpositive\u002Fnone","_Parfait_",[317,313,34,254,11,41],"36462518",[104,319,18,233,105,34],16,[321,322,34,263,323,34],"36448786",17,"wing-_-nuts",[325,322,34,263,326,34],"36448938","azemetre",[328,322,34,263,329,34],"36451160","p4ul",[331,322,34,268,11,41],"36462513",[333,184,18,235,334,34],"36448726","jsweojtj",[336,184,34,235,11,41],"36462506",[338,339,45,244,205,34],"36449594",19,[84,339,34,254,11,41],[153,36,45,342,154,34],"project\u002Fneutral\u002Fexecution",[344,36,34,342,11,41],"36462498",[346,347,18,215,348,34],"36449075",21,"motohagiography",[350,351,18,235,352,34],"36453038",22,"erksa",[354,351,34,204,11,41],"36462487",[],[357,362,367,371,376,380],{"id":358,"name":359,"points":360,"category":361},"36480687","Mofi",708,"creative",{"id":363,"name":364,"points":365,"category":366},"36470297","OpenResume",656,"productivity",{"id":368,"name":369,"points":370,"category":366},"36446045","Vrite Editor",460,{"id":372,"name":373,"points":374,"category":375},"36505859","background removal",395,"ai",{"id":377,"name":378,"points":379,"category":375},"36472854","WinGPT",382,{"id":381,"name":382,"points":383,"category":384},"36469297","Hypersomnia",270,"games",false,"v2",{"id":388,"name":5,"line":6,"ai":385,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":30,"top":18,"kw":389,"maker":11,"domain":10,"tier":19,"attempts":34,"strip":390,"url":9,"mix":391,"praise":91,"objection":117,"sub":21},36447871,[24,25,26,27,28],"3005003015510505500500005000055500503355",[32,33,34,35],1794036637341]