[{"data":1,"prerenderedAt":360},["ShallowReactive",2],{"project-13642967":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":27,"sentiment":28,"stance_mix":29,"scored_comments":34,"aspects":35,"strip":42,"post_text":45,"what":46,"said":76,"maker_in_thread":201,"shape":211,"grid":215,"attempts":323,"same_week":324,"maker_shows":33,"maker_hidden":352,"reader_version":353,"card":354},"13642967","illustrated-algorithms","Illustrated Quicksort algorithm","title","Show HN: Illustrated Quicksort algorithm","https:\u002F\u002Fillustrated-algorithms.now.sh\u002Fquicksort","illustrated-algorithms.now.sh","skidding",1487074490,2017,187,48,186,2242,9,"notable","learning_science","algorithm visualization","web_app",[24,21,25,26],"quicksort","sorting algorithms","learn algorithms","mixed",-0.059,{"positive":30,"neutral":31,"mixed":32,"critical":33},4,10,2,6,22,{"design":36,"idea":37,"execution":39,"performance":41},{"positive":32,"critical":32},{"positive":38,"critical":32},0,{"positive":40,"critical":32},1,{"positive":38,"critical":38},[38,38,38,38,43,38,44,43,38,43,40,38,43,38,40,38,43,40,38,43,40,38,43,38,38,44,44,43,38,43,40,44,43,38,38,40,38,38,38,38],3,5,null,{"problem":47,"audience":54,"pricing":45,"motivation":60,"time_to_build":45,"stack":64,"openness":73,"stage":74,"team_size":75},{"value":48,"source":49,"evidence":50},"Explaining how quicksort works through animation","maker",[51],{"id":52,"by":11,"text":53},"13643034","Hi. This is my 2nd algoritm visualization. Creating them is fun. Besides designing the illustrations, I've spent a lot of time crafting the framework so expect more of these in…",{"value":55,"source":49,"evidence":56},"Beginner programmers learning algorithms",[57],{"id":58,"by":11,"text":59},"13643730","Good points. I'll think about this and read more on Quicksort. Do you think these aspects can be incorporated without adding extra baggage for beginners (the primary target for…",{"value":61,"source":49,"evidence":62},"Creating algorithm visualizations is fun; aim to make algorithms approachable",[63],{"id":52,"by":11,"text":53},[65],{"value":66,"source":67,"evidence":68},"JavaScript","inferred",[69],{"id":70,"by":71,"text":72},"13650058","kbr","Hey, love it! I know that you know it can handle duplicates, but a simple fix can work here. Make an array called `equal` before making the `less` and `greater` arrays. ``` const…","open_source","launched","unknown",{"praise":77,"objections":94,"requests":132,"questions":162,"alternatives":177},[78],{"value":79,"source":80,"evidence":81},"Animations are well made and clear","commenter",[82,86,90],{"id":83,"by":84,"text":85},"13643976","Rabei","Good work, looks great! I have the following comments, hope you find them useful: * I find counter intuitive that the animation goes up, i think it should go down, but that…",{"id":87,"by":88,"text":89},"13643764","gigatexal","Thank you for this. The work to both understand the algorithm and then animate it, much appreciated",{"id":91,"by":92,"text":93},"13644576","notduncansmith","This was cool, the highlighted code tour is a great touch. For anyone else who enjoyed this, you might also enjoy this blog post full of animated algorithms by Mike Bostock:…",[95,107,114,125],{"value":96,"source":80,"evidence":97},"Fruit illustrations are less intuitive than numbers",[98,102,106],{"id":99,"by":100,"text":101},"13643635","snackai","Personally I find https:\u002F\u002Fvisualgo.net\u002F to be more helpful. I don't think the fruits are too intuitive.",{"id":103,"by":104,"text":105},"13649000","bastijn","I agree. I find https:\u002F\u002Fvisualgo.net\u002Fsorting to provide easier to understand animations. Also, the fruits are less understandable to me than simple numbers.",{"id":83,"by":84,"text":85},{"value":108,"source":80,"evidence":109},"Animation is too fast to follow; no slow mode",[110],{"id":111,"by":112,"text":113},"13643483","deanclatworthy","Looks great. Have an option to slow it down though. I couldn't follow the animation and the code on the right it was going so quickly.",{"value":115,"source":80,"evidence":116},"Implementation drops duplicate elements",[117,121],{"id":118,"by":119,"text":120},"13645387","bjarnagin","Nice work! One other note, in addition to the comments here: the algorithm as it's currently written will drop repeated elements. You can easily fix that by changing `greater` to…",{"id":122,"by":123,"text":124},"13646241","cmurphycode","I may not have parsed your question correctly, so I apologize in advance. Assuming you are asking about what happens to the \"equal\" elements- Yes, there is a bug in this code. It…",{"value":126,"source":80,"evidence":127},"Not in-place, unlike real quicksort",[128],{"id":129,"by":130,"text":131},"13643605","lanna","some constructive feedback: one of the greatest features of quicksort is that it is an in-place algorithm, it doesn't use any additional storage. qsort cleverest trick is to…",[133,140,147,155],{"value":134,"source":80,"evidence":135},"Add a slow motion or speed control option",[136,137],{"id":111,"by":112,"text":113},{"id":138,"by":112,"text":139},"13643913","That would be nice but auto play is good. Just allow 2-3 options for the speed of a tick.",{"value":141,"source":80,"evidence":142},"Add per-step and back\u002Fforward buttons",[143,146],{"id":144,"by":112,"text":145},"13643805","Sure but it would be nice to step through at your own pace rather than by intricately dragging a mouse and having to hold the click.",{"id":83,"by":84,"text":85},{"value":148,"source":80,"evidence":149},"Show in-place partitioning",[150,151],{"id":129,"by":130,"text":131},{"id":152,"by":153,"text":154},"13644625","Asooka","With so few elements, I think you can perform the in-place swap as one animation. Take the pivot out, put an arrow on the first and last elements in the list, then - if the left…",{"value":156,"source":80,"evidence":157},"Allow setting custom initial lists",[158],{"id":159,"by":160,"text":161},"13647955","vinylkey","That's snazzy, good work! I found myself wanting to set my own initial order of the list to see what some specific edge cases (already sorted, one element off from being sorted,…",[163,170],{"value":164,"source":80,"evidence":165},"Why use quicksort rather than mergesort as the example",[166],{"id":167,"by":168,"text":169},"13643643","amelius","Why do people keep using Quicksort as an example? I find Mergesort to be much more intuitive. And better yet, it has a much better worst-case performance.",{"value":171,"source":80,"evidence":172},"Is filtering into less and greater faster than a single pass",[173],{"id":174,"by":175,"text":176},"13646143","baby","That's amazing. Just two questions 1) on quicksort: ``` const less = list.filter(i => i \u003C pivot); const greater = list.filter(i => i > pivot); ``` Wouldn't this be faster: ```…",[178,183,187,194],{"value":179,"source":80,"evidence":180},"VisuAlgo",[181,182],{"id":99,"by":100,"text":101},{"id":103,"by":104,"text":105},{"value":184,"source":80,"evidence":185},"Mike Bostock's animated algorithms",[186],{"id":91,"by":92,"text":93},{"value":188,"source":80,"evidence":189},"Toptal sorting algorithms visualization",[190],{"id":191,"by":192,"text":193},"13646541","shric","This one? https:\u002F\u002Fwww.toptal.com\u002Fdevelopers\u002Fsorting-algorithms",{"value":195,"source":80,"evidence":196},"USF comparison sort visualization",[197],{"id":198,"by":199,"text":200},"13644210","liamondrop","Absolutely: https:\u002F\u002Fwww.cs.usfca.edu\u002F~galles\u002Fvisualization\u002FComparisonSort.html",{"comments":202,"answered":43,"key":203},12,[204,205,208],{"id":52,"text":53},{"id":206,"text":207},"13643509","Makes sense. I'm curious, is the fact that you can drag the progress bar back&forth to create a slow motion obvious?",{"id":209,"text":210},"13643872","You mean via back\u002Ffwd buttons? Those are definitely useful. Fun trivia, this is how the 1st prototype worked: https:\u002F\u002Fgithub.com\u002Fskidding\u002Fillustrated-algorithms\u002Freleases (scroll…",{"commenters":212,"max_depth":33,"maker_replies":202,"first_comment_mins":213,"lifespan_hours":214},27,13,77,[216,220,223,226,229,231,233,235,239,240,241,242,244,246,247,251,252,254,256,258,261,263,266,270,272,273,275,277,279,282,286,289,290,292,295,297,299,300,303,304,307,308,310,312,314,316,318,320],[217,38,38,218,219,38],"13644837","other\u002Fneutral\u002Fnone","bogomipz",[221,38,38,218,222,38],"13645840","Cyph0n",[224,38,38,225,219,38],"13646680","commenter\u002Fneutral\u002Fnone",[227,38,38,225,228,38],"13649139","kstirman",[52,40,38,230,11,40],"maker\u002Fneutral\u002Fnone",[111,40,43,232,112,38],"project\u002Fneutral\u002Fdesign",[206,40,38,234,11,40],"maker\u002Fneutral\u002Fdesign",[236,40,44,237,238,38],"13643539","project\u002Fpositive\u002Fdesign","croon",[144,40,43,232,112,38],[209,40,38,234,11,40],[138,40,43,232,112,38],[243,40,43,232,175,38],"13646459",[129,32,40,245,130,38],"project\u002Fcritical\u002Fidea",[58,32,38,230,11,40],[248,32,43,249,250,38],"13643828","project\u002Fneutral\u002Fidea","brudgers",[198,32,38,218,199,38],[152,32,43,253,153,38],"project\u002Fneutral\u002Fexecution",[118,32,40,255,119,38],"project\u002Fcritical\u002Fexecution",[257,32,38,218,175,38],"13646449",[259,32,43,249,260,38],"13647272","imh",[103,32,40,262,104,38],"project\u002Fcritical\u002Fdesign",[264,43,38,265,11,40],"13646984","maker\u002Fneutral\u002Fidea",[267,43,43,268,269,38],"13648432","project\u002Fmixed\u002Fidea","UweSchmidt",[271,43,38,230,11,40],"13651425",[99,30,40,262,100,38],[274,30,38,234,11,40],"13643695",[83,44,43,276,84,38],"project\u002Fmixed\u002Fdesign",[278,44,38,230,11,40],"13644060",[280,33,38,218,281,38],"13645976","blinry",[283,284,38,285,11,40],"13651725",7,"maker\u002Fneutral\u002Fdocs",[70,287,44,288,71,38],8,"project\u002Fpositive\u002Fexecution",[91,18,44,237,92,38],[174,31,43,291,175,38],"project\u002Fneutral\u002Fperformance",[293,31,38,294,11,40],"13646206","maker\u002Fneutral\u002Fperformance",[296,31,43,291,175,38],"13646235",[298,31,38,291,11,40],"13646427",[122,31,40,255,123,38],[87,301,44,302,88,38],11,"maker\u002Fpositive\u002Fnone",[159,202,43,232,160,38],[305,213,38,218,306,38],"13646396","hellofunk",[191,213,38,218,192,38],[309,213,38,225,306,38],"13669695",[167,311,40,245,168,38],14,[313,311,38,230,11,40],"13643676",[315,311,38,218,250,38],"13643777",[317,311,38,225,168,38],"13644268",[319,311,38,225,250,38],"13644629",[321,311,38,218,322,38],"13647384","gpderetta",[],[325,330,335,340,345,348],{"id":326,"name":327,"points":328,"category":329},"13642662","HTML Reference",728,"dev_tools",{"id":331,"name":332,"points":333,"category":334},"13628522","Rumuki",405,"security_privacy",{"id":336,"name":337,"points":338,"category":339},"13623852","Beehive",247,"infrastructure",{"id":341,"name":342,"points":343,"category":344},"13616751","Aragon",191,"web_saas",{"id":346,"name":347,"points":16,"category":329},"13628530","DeepUI Programming Studio",{"id":349,"name":350,"points":351,"category":329},"13628952","s3-lambda",177,false,"v2",{"id":355,"name":5,"line":6,"ai":352,"cat":20,"year":13,"points":14,"comments":15,"rec":27,"s":356,"top":18,"kw":357,"maker":11,"domain":10,"tier":19,"attempts":38,"strip":358,"url":9,"mix":359,"praise":79,"objection":96,"sub":21},13642967,-0.06,[24,21,25,26],"0000305303103010310310300553031530010000",[30,31,32,33],1794036552627]