[{"data":1,"prerenderedAt":269},["ShallowReactive",2],{"project-4706037":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":35,"aspects":36,"strip":40,"post_text":42,"what":43,"said":71,"maker_in_thread":174,"shape":185,"grid":189,"attempts":233,"same_week":234,"maker_shows":176,"maker_hidden":261,"reader_version":262,"card":263},"4706037","violin","Instrumenting and visualizing JavaScript with d3.js","title","Show HN: Instrumenting and visualizing JavaScript with d3.js","http:\u002F\u002Flatentflip.github.com\u002Fviolin","latentflip.github.com","philip_roberts",1351342446,2012,105,22,205,1677,13,"notable","dev_tools","code visualization","web_app",[24,25,26,27],"javascript visualization","d3.js","code instrumentation","execution graph","mixed",0.385,{"positive":31,"neutral":32,"mixed":33,"critical":34},6,2,4,0,12,{"design":37,"idea":38},{"positive":34,"critical":34},{"positive":39,"critical":34},5,[41,34,34,34,34,41,34,34,41,34,34,41,39,41,34,41,39,39,39,39,39,34],3,null,{"problem":44,"audience":42,"pricing":42,"motivation":54,"time_to_build":42,"stack":59,"openness":69,"stage":70,"team_size":69},{"value":45,"source":46,"evidence":47},"Makes JavaScript code more visual by showing how execution flows between methods.","maker",[48,51],{"id":49,"by":11,"text":50},"4706146","This is an initial concept\u002Fprototype I've been working on today. Pretty neat I think, but not exactly sure of the use case yet beyond making code more visual. All thoughts on…",{"id":52,"by":11,"text":53},"4706141","Not sure exactly! It just seemed like a fun thing to try. I guess I am just interested in how to make code more visual. I haven't tried it on a \"real\" code base yet but I will.",{"value":55,"source":46,"evidence":56},"Fun experiment to see how to make code more visual; use case not yet clear.",[57,58],{"id":49,"by":11,"text":50},{"id":52,"by":11,"text":53},[60,66],{"value":61,"source":62,"evidence":63},"JavaScript","inferred",[64],{"id":65},"post",{"value":25,"source":62,"evidence":67},[68],{"id":65},"unknown","prototype",{"praise":72,"objections":93,"requests":110,"questions":147,"alternatives":159},[73,89],{"value":74,"source":75,"evidence":76},"Visually cool and pretty","commenter",[77,81,85],{"id":78,"by":79,"text":80},"4706935","gojomo","Very cool. While I love the look of force-directed-graphs, they wind up representing lots of arbitrary\u002Frandom values, in all the degrees of freedom of the exact…",{"id":82,"by":83,"text":84},"4706170","gawker","This is really cool for sure. I can see how it's useful for teaching JavaScript concepts or doing analysis on code. Good job!",{"id":86,"by":87,"text":88},"4708019","VeejayRampay","This is pretty awesome, great job.",{"value":90,"source":75,"evidence":91},"Useful for teaching JavaScript or analyzing code",[92],{"id":82,"by":83,"text":84},[94,102],{"value":95,"source":75,"evidence":96},"Force-directed layout is distracting and represents arbitrary values",[97,98],{"id":78,"by":79,"text":80},{"id":99,"by":100,"text":101},"4707096","dmvaldman","This is something I've been thinking about myself. Sometimes when writing large Backbone apps you may find yourself binding the same event twice to a model, or creating memory…",{"value":103,"source":75,"evidence":104},"Unclear what the use case is",[105,109],{"id":106,"by":107,"text":108},"4706132","Swizec","This looks really cool! Not sure what I'd use it for, but it looks awesome. Have any use cases in mind?",{"id":49,"by":11,"text":50},[111,118,128,136],{"value":112,"source":75,"evidence":113},"Slow down visualization to see flow between methods",[114],{"id":115,"by":116,"text":117},"4706235","mnutt","It might be interesting to be able to slow down the visualization. Right now it all happens instantly, whereas you might be able to see the flow from one method to the next.",{"value":119,"source":75,"evidence":120},"Timeline view of method invocations",[121,125],{"id":122,"by":123,"text":124},"4706472","crucialfelix","It would be great to see a timeline, where each method invocation leaves a colored point behind it. So there would be colored trails as time progresses. Then it would be useful…",{"id":126,"by":11,"text":127},"4706863","I think a timeline view probably makes more sense ultimately, but I have just modified the demo so that the events happen sequentially, and you can see a trail of events via…",{"value":129,"source":75,"evidence":130},"Live injection via bookmarklet into running apps",[131,132],{"id":122,"by":123,"text":124},{"id":133,"by":134,"text":135},"4707030","ville","This would cool as a bookmarklet that can launch the graph in a modal window when viewing any JS app.",{"value":137,"source":75,"evidence":138},"Show object instantiation and graph of Backbone models and views",[139,143],{"id":140,"by":141,"text":142},"4706272","camus","I would like to be able to click and go into the prototype definition of the object it is displaying , would be a great thing. And also be able to use that live while an…",{"id":144,"by":145,"text":146},"4709905","alxndr","I have the same experience with Backbone apps... Even something that graphed model\u002Fcollection\u002Fview connections would probably be super useful.",[148,152],{"value":149,"source":75,"evidence":150},"What is the use case for this?",[151],{"id":106,"by":107,"text":108},{"value":153,"source":75,"evidence":154},"Is this static analysis or runtime instrumentation?",[155],{"id":156,"by":157,"text":158},"4710227","troels","Isn't that static analysis though? That would make it a bit different then.",[160,167],{"value":161,"source":75,"evidence":162},"colony (hughsk) static analysis of JavaScript",[163],{"id":164,"by":165,"text":166},"4706334","irickt","Recent similar project https:\u002F\u002Fgithub.com\u002Fhughsk\u002Fcolony Posted here but with no comments http:\u002F\u002Fnews.ycombinator.com\u002Fitem?id=4676314",{"value":168,"source":75,"evidence":169},"codeperspective C# visualization tool",[170],{"id":171,"by":172,"text":173},"4706809","swax","I have a visualization tool for c# - https:\u002F\u002Fwww.codeperspective.com . I found that left to right rank graphs work really well when showing order of execution as most programs…",{"comments":175,"answered":176,"key":177},7,1,[178,181,184],{"id":179,"text":180},"4706964","I think I agree! :) and thanks.",{"id":182,"text":183},"4706815","That looks pretty amazing!",{"id":49,"text":50},{"commenters":186,"max_depth":41,"maker_replies":175,"first_comment_mins":187,"lifespan_hours":188},16,76,34,[190,192,194,198,200,202,204,206,207,208,211,213,214,216,218,220,221,224,225,226,229,231],[78,34,41,191,79,34],"project\u002Fmixed\u002Fdesign",[179,34,34,193,11,176],"commenter\u002Fneutral\u002Fdesign",[195,34,34,196,197,34],"4707227","commenter\u002Fneutral\u002Fnone","stephth",[171,176,34,199,172,34],"other\u002Fneutral\u002Fnone",[182,176,34,201,11,176],"other\u002Fpositive\u002Fnone",[164,32,41,203,165,34],"project\u002Fneutral\u002Fidea",[156,32,34,205,157,34],"commenter\u002Fneutral\u002Fidea",[49,41,34,203,11,176],[115,41,41,191,116,34],[209,41,34,210,11,176],"4706241","maker\u002Fneutral\u002Fexecution",[126,41,34,212,11,176],"project\u002Fneutral\u002Fdesign",[99,33,41,191,100,34],[144,33,39,215,145,34],"project\u002Fpositive\u002Fidea",[106,39,41,217,107,34],"project\u002Fmixed\u002Fidea",[52,39,34,219,11,176],"maker\u002Fneutral\u002Fidea",[122,39,41,203,123,34],[222,39,39,215,223,34],"4707816","jmitcheson",[82,31,39,215,83,34],[133,175,39,215,134,34],[86,227,39,228,87,34],8,"project\u002Fpositive\u002Fnone",[140,230,39,215,141,34],9,[232,230,34,210,11,176],"4706286",[],[235,240,245,249,253,257],{"id":236,"name":237,"points":238,"category":239},"4723591","Circular",160,"productivity",{"id":241,"name":242,"points":243,"category":244},"4725210","Introducting C+",148,"languages",{"id":246,"name":247,"points":248,"category":20},"4725396","Python Tools for Visual Studio (PTVS)",139,{"id":250,"name":251,"points":252,"category":20},"4713110","Propeller",126,{"id":254,"name":255,"points":252,"category":256},"4714088","Django drip","web_saas",{"id":258,"name":259,"points":260,"category":256},"4715237","Userfox (YC S11)",100,false,"v2",{"id":264,"name":5,"line":6,"ai":261,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":265,"top":18,"kw":266,"maker":11,"domain":10,"tier":19,"attempts":34,"strip":267,"url":9,"mix":268,"praise":74,"objection":95,"sub":21},4706037,0.39,[24,25,26,27],"3000030030035303555550",[31,32,33,34],1793990886790]