Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Designing The “World Of Programming” Infographic

Information graphics (or infographics) are used to display information in ways that are more creative than plain old text. These days, they surround us in the media, published works, road signs and manuals. Lately, the Internet has been flooded with infographics on various topics, ranging from science and technology to society and culture. In this article, we’ll look at the process of designing an infographic about programming.

You may also be interested in the following articles we published earlier:

What the Infographic Shows Link

This infographic exhibits pioneers in the field of programming, along with the history and current statistics of various programming languages. Also included are some random facts and algorithm diagrams to make the infographic more visually appealing. Click on the image to enlarge.


Fewness Of Words Link

All of the pioneers in this infographic have had a big impact on the field of programming. Still, this list is in no way comprehensive. Programming languages like C, C++ and Java have shaped the programming world, and so including their creators here was essential. The same goes for pioneers such as Ken Thompson, Richard Stallman and Linus Torvalds, who have each made significant contributions to the open-source world.

You might also notice that some important algorithms — such as dynamic programming, brute force and hash tables — are missing. The reason is that explaining these algorithms in a single diagram is difficult. Hence, they were replaced with ones like insertion sort and merge sort, which are relatively simpler to explain. Eight Queens and N-puzzle have often been used as illustrative problems for various programming techniques, and so they, too, are included here.

Designing The Infographic Link

Infographics are visual representations of information, data and knowledge. So, layout, color and typography are critical to user comprehension. Let’s consider each of these in turn.

Layout Link

Given the available information, I decided to divide the infographic into three major sections:

  1. The most important people in the history of programming,
  2. A timeline of the history of programming,
  3. Statistics on programming languages.

The goal was to make the infographic simple yet beautiful. I came up with the following possible layouts to display the information:

The red squares denote illustrations, the arrows denote timelines, and the blue rectangles denote statistics on programming languages. In the third layout, the green circles denote random facts and algorithm diagrams.

This first layout is simple but lacks the attractiveness of a good infographic. So, I decided to abandon it.

In the second layout, the illustrations are arranged in a circle. But including the relevant information for each illustration consistently would have been difficult. So, I abandoned it, too.

I decided on a layout that combines the sine wave with golden rectangles, two properties that I discuss in an earlier article6. I put random facts and diagrams of algorithms in the remaining golden rectangles to make the infographic more attractive.

I used Pixus7 to create the golden rectangle grid for this infographic. It comes in handy when you have multiple golden rectangles in a design.

Color Link

Colors present themselves in continuous flux, constantly related to changing neighbours and changing conditions.

— Josef Albers

Picking the right colors is one of the most important things in graphic design. Color affects visual hierarchy and legibility of type, so it’s important to choose the right colors, and not just the expected ones. In an infographic, the background should blend perfectly with the illustrations. In this case, the illustrations looked dull against a white background and looked ugly against a dark background.

I chose a light shade of gold (#f9ebb3) for the background. Then, I applied a granular pattern to the background layer and scaled it down to 51%. I also reduced the opacity to about 52%. The illustrations now look good against this background.

I opted for “academic” colors for the typography because they blend well with the background and the illustrations. We all know that contrast is king8, and so I used mostly primary colors for the illustrations because they contrast well with the text blocks.

You can always get help from Adobe Kuler if you have trouble choosing colors for your design.

Typography Link

The typographer’s one essential task is to interpret and communicate the text: its tone, its tempo, its logical structure, its physical size, all determine the possibilities of its typographic form. The typographer is to the text as the theatrical director is to the script and the musician is to the score.

— Robert Bringhurst

Use two or a maximum of three font types in a design. I chose Colaboarte Light for the programmers’ names and Calibri Italic for their descriptions. Both are sans-serif.

Within a single typeface family, variations in weight, width and style can vary the rhythm substantially, thus affecting communication. To control this, I italicized Calibri to a font size of 15 and kept the programmers’ names at 21. Alignment is flush-left. I also used Calibri for the descriptions of illustrations but gave it a different color to distinguish it from the descriptions of programmers. I chose the ChunkFive font for the numerical values in the illustrations.

Displaying Stats Link

To envision information — and what bright and splendid visions can result — is to work at the intersection of image, word, number, art. The instruments are those of writing and typography, of managing large data sets and statistical analysis, of line and layout and color.

— Edward Tufte, Envisioning Information

For years, we have been displaying information in bars graphs and pie charts. In fact, Edward Tufte coined the term “chartjunk” to refer to useless, uninformative or information-obscuring elements in quantitative displays. But this trend has shifted in recent times with the rise of infographics.

I opted for three different ways to display the statistics on programming languages. The Project Euler statistics are displayed in circles of different radii. The project is based on mathematical problems, and so displaying the statistics in geometric shapes was apt. The StackOverflow statistics are displayed as appearing in text editors of various sizes and colors, while the Tiobe Index statistics are displayed in terminals of various sizes and colors.

Final Thoughts Link

An infographic is all about displaying information in creative ways. The process of designing infographics can help us understand and implement certain graphic design principles much better than by designing for the Web alone. It’s all about applying the fundamental principles of design; we’ll always come up with better results if we can do that well.

Also check out these related books:


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13

↑ Back to top Tweet itShare on Facebook

I am a web designer and developer from India. I have deep interests in computer science, art, math and astrophysics in-spite of the fact that I graduated as a Petroleum Engineer. I am a devoted fan of Salvador Dali and have spent a considerable amount of time in studying various art movements. I spend most of my time in web design and in coming up with new ideas to enhance productivity. Oh, and this is an additional but somewhat useless fact - I have four international research papers in the field of petroleum engineering.

  1. 1

    What about the Internet? I don’t see any mention of IBM anywhere… What about the advent of the Personal PC?

    What about Lisp?
    What about C? Why the jump from Punch Cards and Vacuum tubes straight to C++?

    I am no computer wizard… But this doesn’t make a lot of sense to me… There are alot of gaps it would seem, with no real cohesion. Especially since the Internet is absent from it.

    EDIT – My apologies, I saw mention of C… It must have skimmed it too fast the first time around. Looks really good…

    If the author comes along to read this… they might be interested in this guy… – I know it’s not “programming”, but it’s certainly interesting. It seems like people are starting to push the limits with “machine learning” techniques.

    Also, because it’s very interesting. Greek Logic philosophies resemble MIT mantras very closely… It’s uncanny…

    • 2

      I came back to take another look. I didn’t realize it was art critique. Sorry…

      I think it’s good, the bleed is a little absent, the arrangement you chose while is a bit “grid-like” is a good choice as it uses the space well but I think it detracts from the illustrations which are so good they seem hidden in less prominent position and size than the other stuff… Edgar is great example of good text wrapping and space. Allan is getting stabbed in the eye…

      Your sense of color is good. It’s nice and warm. The contrast on the Name vs the description text might be reversed or the name might not be large enough. This is after all an info graphic on the pioneers and their names could pop, maybe?

      The yellows attract much more attention than the other colors. The colors are electric, some are a lot brighter than the others, I’m not sure if that’s what you wanted.

      Everything seems to be fighting for space, with the exception of everything below the time line, I think you had more fun eying the placement for those elements and it shows… Maybe if you were as creative with the spacing on the other elements it would seem less cramped.

      Hope that helps… I learned a lot from it… thank you…

  2. 3

    Michael Clarke

    June 6, 2010 4:17 am

    Generally a good article although I dont see any real value in the samples provided. Since they themselves required an explanation it devoids their use.

    Any infographic should be simple and self explanatory. Tailor it to your users and the rest will take care of itself. Your users will have different styles which its your job to identify. Otherwise its all pointless.

    This comment isn’t strictly negative though I fully agree with the use of infographics just trying to stress the point it should be tailored to your users.

    • 4

      I totally agree with you about the content to be simple and self explanatory.

      There’s no point making an infographic which itself looks so cluttered with information that its hard to make out which direction is the entire presentation heading.

  3. 5

    Really nice article. But the absence of John McCarthy is a design fail ^^

    • 6

      the biggest design flaw or rather lack of basic knowledge is the omission of object-oriented programming, Simula, Kristen Nygaard and Ole-Johan Dahl.
      American ignorance!

      • 7

        The author is an Indian dude.. So what does eventual American ignorance has to do with it, I think this is European uncritical American Criticality. However, I agree that Nygaard and Dahl should have been mentioned, but the author has to make some decision and focus on some.

      • 8

        Typical non-american ignorance! If its not perfect, it must have been done by an American right? You sir are an idiot of the fullest degree.

    • 9
  4. 10

    Chandra Tewary

    June 6, 2010 4:37 am

    No doubt a very good article. But, world of programming section is not as simple as explained by author in Geek Graph. WOP is not only about established programming languages and common names. Also, it has no mention of languages which came during internet age. How can one forget Niklaus Wirth (Pascal) & Alan Cooper (VB) ?. Anyways, good job !!.

    • 11

      I agree that there are many great programmers besides the ones covered in this infographic. However, it’s impossible to cover all of them in a single infographic. In fact, there can be many versions of this infographic to cover various other great programmers! :)

      • 12

        Haha nice idea, let’s generate a full family of template instances

  5. 13

    Nice work, Adit. You have exhibited the ‘world of programming’ in a crisp manner. Simple and precise though it is, its not exhaustive. Of course, we both know that we cannot explain the word of programming in a simple infographic, but I think you did a good job with this one. I believe that the timeline should have been given more emphasis too :)

    The effort you put into doing this is commendable and certainly very intriguing. The quotations were spot on. Thanks for those links to the resources you used to create the infographic.

    Good work!

  6. 14

    I like this idea, especially for someone like me who has no idea about programming languages but would like to learn. The statistics at the end seem useless to me. I’d rather like to know which language is used for what kind of problem..which industry etc.
    The color choice and the portraits are very good. But there is something wrong with the headline typography, too big maybe? And it should be called pioneers of programming and not the world of programming.

    • 15

      Hello! Thanks for your wonderful comment!
      There is no restriction on solving a particular problem with any particular language. You can solve any problem with any language as long as they are Turing Complete. However, the solution may look more elegant in one programming language as compared to another. The statistics are just included to give an overview of the popularity of programming languages. It’s true that major portion includes pioneers of programming, however, it also includes a timeline and some statistics. Hence, I had to call it world of programming :)

  7. 16

    Although the effort is good, I found the result to be mediocre.

    For me, a good “infographic” leads me through the story it wants to tell. But, this graphic fails to draw me in and lead me through any conversation. From the overly parchment background color, to the distracting use of colors in the graphics, I can’t see a flow that would encourage me to read it.

    The graphics in many cases are disconnected from the text that sort of explains why there’s a graphic (but sometimes does not). (Sometimes the graphic is to the left, sometimes below, etc.).

    Although the world of programming shouldn’t be focused on a timeline, it does seem like the inclusion of a timeline would suggest that a connection between the various figures of the “world of programming” and the timeline would be made more obvious. A horizontal layout of the world may have been a better choice with a timeline suggesting a better flow through the various people and points in time.

    The curly brackets around the text, although creative at some levels, are more than likely distracting to non-computer programmers.

    The 3 completely unrelated things at the bottom in my opinion should be removed as their stats are all very questionable (and so different as to not be helpful to the reader).

    • 17

      Hello Aaron! Thanks for your comment :)
      We all can have a different opinion based on our view of a design. I have given explanations on choosing a particular layout, background and colors of different elements in the infographic. I hope it can give some answers to the points you have raised :)

  8. 18
  9. 19

    The solution of the eight queen problem is wrong.
    Have a look here


  10. 21

    The graphic looks great. Information well presented, but the 8 queen solution isn’t a valid solution. FYI.

  11. 22

    ya, I notice that too, the diagram of the 8 queen problem is wrong.

    • 23

      Thanks for noticing that. Yes, the queen in the first bottom row is not at the right position. I will correct it ASAP.

  12. 24

    I love this article.

    However, George Boole, the inventor of Boolean logic is missing.

  13. 25

    Who invented Object Oriented Programming ?

  14. 26

    The picture of Eight Queens problem is wrong…

    • 27

      It has been corrected in the enlarged version. It would be corrected in the smaller version too :)

      • 28

        Joseph Jaber

        June 9, 2010 1:41 pm

        There is no visual indication that there are sine waves, no visual indication that graphics are there randomly and not tied to the textual material. There is no indication of how to read it. What automatically would be assumed would be right to left, that’d be wrong. Or top to bottom, that’d also be wrong. This layout completely breaks what normal usage perceptions would be and doesn’t actually deliver anything in a visually helpful manner.

        If the design is completely not intuitive and easily understandable. How can you believe you did a good job on it? Infographics are meant to lend an added perception of how to more easily digest and interpret the data, this serves neither of those functions. In terms of “function” this is quite possibly one of the worst functioning infographics I’ve seen. Simply providing reasoning for such decisions doesn’t justify those choices.

        Saying I should make look and function like an Amazonian women, and explaining that I chose to do that, doesn’t make it a functional or optimal design choice. Is a design really a good design when it can only be used and understood properly after reading an entire explanatory article on how it works? Isn’t it the design’s job to do that on its own? Imagine if I were to design a website and append a huge required article on how it works and the decisions I made just so others may simply “use” it properly.

        Usability is key here. Function should always outweigh form, most definitely in the attitude of a programmer, where pragmatism trumps all else. And telling commentors, “Well you should read the article for my rhetoric and maybe you’ll understand why I designed it that way” is quite a terrible defense. Though criticism would be negative if I didn’t provide anything actionable. I suggest you check out David Mccandless’ work, a real infographic designer. Learn and take cues from his design choices, it’s not quite as simple as you may think.

        • 29

          Completely agree. Felt like the author completely dismissed my points as , “we have differing opinions” and too bad that I’m right because I justified them. I think the graphic could have been better if common infographic design patterns would have been applied. As you and I both pointed out, it failed to be easy to read.

  15. 30

    1 & 2 GLs? Assembler baby. Don’t forget the true pioneers (aka masochists) – machine language, which started it all. Languages in general – Lisp, Ada, SmallTalk, RPG, PL/1,Scala; the list goes on and on; A & B preceded C, etc. REXX has heavy use.

    I think two infographics would do; one for the languages, another for the people. Algorithms could be a 3rd.

    It’s a huge and tough topic. Even this infographic doesn’t cover it all:

  16. 31

    There is a lot to talk about here, thanks for putting together this post, Adit.

    I wish there had been more connection between the disparate parts of the graphic: the programmers/innovators, the program timeline, and the bottom bits. To me, this seems like you start by defining a question your graphic will answer, or maybe deciding on the narrative path you’d like to take the user down.

    Ignoring the episodic strategy, I like your sketched layouts better than the final, maybe because they’re simple checkboards and not yet constrained by the false mysticism of the golden ratio. The golden ratio and the F-sequence make me a little crazy: they don’t REALLY exist in nature (overlay a golden spiral on a nautilus shell, and you’ll find it doesn’t match), and what’s more, I don’t find them particular “beautiful” or aesthetically appealing.

    At its heart, these ratios and all of nature, is about growth, or the efficient scaling of a fundamental principal. I think your layout suffers because of the crutch of the golden ratio, among other things.

    Much has been made of the golden ratio in architecture, but think about the brick: its form doesn’t derive from the golden ratio that dominates the facade. The brick’s dimensions are defined by the building system of which it is a part. The system wouldn’t work if someone had determined the bricks dimensions based on anything other than how to make the brick work best as a brick. Why did you decide on the golden ratio to determine your brick?

    • 32

      Hi Andrew! Nice comment! Much appreciated :)
      Let us try to analyze this infographic:
      1) How to contain a lot of information in limited space? You might say that the circular pattern may look more organic as compared to the golden rectangle layout. But the problem with circular pattern is that it’s tough to display entire information in it. One can offer a solution to this problem, like, making the infographic horizontal and then listing various pioneers in multiple circles. But you can realize that having multiple circles will take away the organic feel and it would rather look like arrangement of gears.
      2) Secondly, I did intend to follow a certain narrative path. And hence this layout was better as compared to others.
      I will not say much about golden ratio because it’s quite a subjective matter :)

  17. 33

    Dan Bookman

    June 6, 2010 9:33 am

    Needs John Carmack! What’s the use of computers without the ability to blow up monsters?

  18. 34

    Hi Andrew! Nice comment! Much appreciated :)
    Let us try to analyze this infographic:
    1) How to contain a lot of information in limited space? You might say that the circular pattern may look more organic as compared to the golden rectangle layout. But the problem with circular pattern is that it’s tough to display entire information in it. One can offer a solution to this problem, like, making the infographic horizontal and then listing various pioneers in multiple circles. But you can realize that having multiple circles will take away the organic feel and it would rather look like arrangement of gears.
    2) Secondly, I did intend to follow a certain narrative path. And hence this layout was better as compared to others.
    I will not say much about golden ratio because it’s quite a subjective matter :)

  19. 35

    This is a very worthwhile topic to approach, and really quite daunting. I had been inclined at first to agree with @defifee, that “Pioneers of Programming” would be a more appropriate title, but your timeline does extend right into the present, and does include “Age of the Internet”, so I think you did choose the right title. (So generous of me to conceed that to you, insert small ironic smile here). You have omitted many things, but you covered many others, and it is far better to produce work of substance in a timely manner than aim for near-perfection that is late or never completed at all!

    Suggestions: You covered past and present, but I would’ve alluded to the future of programming by including a relevant software-specific insert of Moore’s Law as a simple x-y coord graph, in place of one of the three charts that you chose in the “statistics” section. I liked that section very much, and since I am not so subtle in my recognition of Golden Mean proportions, I would’ve liked to see the three charts you did include, and a second row of three more below, with Moore’s Law perhaps the last on the right.

    Regarding typography, I just recently noticed Calibri font, and have been using it for much of my image work for the past 3 months. How validating to see that you like it too! Your use of font sizes and even mixed fonts is not an issue. However, the font color choices, and use of color in general, was a real obstruction to readability for me. The programming pioneers’ names were very difficult to read in that light color. I understand why you’d want to use more subtle “academic colors”, rather than say, day-glo pink green and orange, and I realize that you documented your use of shading gradations. However, the entire effect was too washed out to be read easily. I also had trouble determining whether the three round color circles in the upper right at the top had any relation to the colors in the depictions of each pioneer’s theories. And the timeline had yet more varied colors which were difficult to determine signifcance, if any.

    This infographic could be exceptionally useful for educational institutions, for elementary and middle schools, or enlarged for a museum exhibit or conference backdrop. However, the facial images of the pioneers need to be improved, particularly if used for student audiences. Maybe small cameo-style photo images, or much more sparsely rendered drawings? Ada Lovelace was reasonably attractive yet is so sketchily drawn that she looks worse than Whistler’s Mother. That will not help young women to perceive her as any sort of role model. Similarly, many of the men look just awful: Dijkstra seems close to tears, poor Ritchie looks simian, Stroustrup and Gosling could be identical twins. Mere superficialities? Not in this context. I couldn’t do any better, thus my suggestion of small photo image inserts if fine art portraiture is understandably not your strong point. Note the group of three men and one woman on this page, bottom right. Try that style instead, with more formal posture, historically correct attire and coiffures?

    • 36

      Hi Ellie! That was a wonderful comment :) Thanks!
      I could have inserted Moore’s Law, but that would have taken the infographic into Hardware zone. This would then demand inclusion other hardware related information also. I have not taken all this into consideration as the infographic is all about programming. :)
      The sketches have been made directly from their real life photographs. There’s no alteration in their facial expressions from my side. :) The reason for not including their photographs is that it would have made the infographic non-uniform. Hence, I decided to rather sketch them for the sake of uniformity.

  20. 37

    I appreciate the beautiful design but have to point out at the lack of factual computer history, you are omitting two key seminal players that render your work null, and you are not the first one to do so!
    Konrad Zuse : The world’s first functional program-controlled Turing-complete computer, the Z3, in 1941, Zuse also designed the first high-level programming language, Plankalkül, first published in 1948.He also was seminal in starting Digital Physics: In 1967 Zuse also suggested that the universe itself is running on a grid of computers (digital physics); in 1969 he published the book Rechnender Raum (translated into English as Calculating Space)MIT press.
    And of course Wilhelm Schickard who built the first calculating machine in 1623 two hundred years before Charles Babbage built his difference engines.
    So yes you can’t include everyone in an info graphic but this data is fundamental.

    • 38

      And of course there’s always the Greek Antikythera mechanism built more than two millennia ago …

  21. 39

    Thanks Adit Gupta.

    I introduce this article on my blog in Korean. ^^

  22. 40

    We just built our infographic, about North America’s ‘wildness’:

    I must admit that we weren’t quite as thorough in our approach, though we did do our best to maximize the beauty of the layout.

    One consideration which you didn’t mention is the infographic’s, shall we say, publishability. That is, how easy is it for people to embed it in their own site or blog? If, for example, it’s very wide, some site publishers may pass on trying to squeeze it into their layout.

  23. 41

    Nice article, but, as a graphic designer it my opinion that the designer of an infographic should be trying to use words and imagery together creatively, but most importantly, to make the information more understandable and useful than plain text/spreadsheet.

    Don’t be scared of using ‘too much text’ – if the text is useful in explaining the information, keep it.

    The most important thing before designing an info graphic could be to consider is whether the information you are trying to communicate needs an info graphic to make it more understandable. Sometimes the inclusion of imagery can actually confuse the communication of the data: organization of type or data can often be enough to improve the communication.

    Just a few thoughts for you :-)

    • 42

      And that’s not to say that all of the points you made in the article are worthwhile, but different points of view are always interesting!

    • 43

      Good comments @Spencer. Since I’m not a graphic designer and didn’t want to load on anymore criticism I erased my thoughts about the use of text. I echo your sentiment: nothing wrong with more text and less image. If the subject matter would’ve made sense as mostly narrative, with just a few visuals, that’s okay. It can still be a fun and interesting infographic.

  24. 44

    I am surprised to see so much attention to the layout and fonts despite the flaws in the writing, which is of utmost importance.

    This was an enjoyable history, and while I applaud the underlying substance of the work, the typos were distracting. The author obviously cares about this subject, and should take a little extra time to spell-check and avoid broken English to maintain credibility.

  25. 45
  26. 46

    punda magan

    June 6, 2010 9:14 pm

    Great work dude.

  27. 47

    Where’re the inventors who create the button on the radio, TV or remote control? Considering gaming, animation, flashing, those time-line basis programming, do we forget other half of the world?
    [Traditional programming logic — which is invalid of mathmatic]
    >a = a + 1
    [Timeline basis programming]
    >a(t) = a(t-1) + 1
    >perform A at t=8

  28. 48

    Pretty nice overall. I’m sure you could gather a bunch of programmers together and get more opinions than programmers present about what to include. What’s shocking is that the timeline ends fifteen years ago.

    • 49

      When you consider the importance of the contribution, 15 years ago is pretty good. While we may have had advances, most of those are repeating what Smalltalk (Kay) and Lisp (McCarthy) did years ago. Which leads to the missing people?

      An infographic is only as useful as the content, and while skipping dynamic typing is fine, when you consider the impact of Lisp and Smalltalk, I don’t understand how you can leave them out.

      As a design study, though, it’s very nicely done. Thank you for sharing your approach!

  29. 50

    @aditgupta Beautiful work on the “World of Programming…”. I’m writing to you to ask for permission to translate to portuguese. Thanks

  30. 51

    The ‘CPU’ part in von Neumann Architecture should be Control Unit (CU) . Both CU and ALU form the CPU.

  31. 52

    David N. Welton

    June 7, 2010 3:34 am

    Nice, except that you should have used instead of TIOBE, as the results are better, being an aggregation of different sources.

  32. 53

    Beautiful work but as usual Alan Kay and Smalltalk are always absent from the history of programming.

  33. 54

    Very nice! I would have included McCarthy as well. Simula or Smalltalk (by Kay) should get a nod as being the beginnings of the Object-Oriented paradigm.

    Also, I would make a case to extend the timeline as far back as 1740, when Thomas Simpson introduced an iterative, calculus-based approach to solving Newton’s Method for calculating real roots of a polynomial. Or at least Bernhard Riemann and Riemann Sums for calculating integrals — these are the bedrock upon which modern computing is built.

  34. 55

    Nothing about either Boyce or Codd, the guys who created the relational database, as well as SQL?

  35. 56

    I think your infographic looks great and conveys a fair amount of interesting information, and the layout is pleasing to the eye. However, the information in the first half seemed mostly disconnected. A few of the “random facts” and illustrations had connections to the neighboring biographies, but not many, and some of the algorithmic diagrams were confusing to this non-programmer; I can understand what they are representing, just not how it is relevant. It seems like a poor use of space to throw random computer-related pieces in with an otherwise decently well-connected/tight-knit infographic.

    I also liked part of the bottom section about programming languages, especially the middle (stackoverflow) one; it allowed us to see a snippet of each language.

    The only other comment I have is that it seems like there’s too much whitespace at the bottom. Was this planned or did it just end up that way?

  36. 57

    Thanks for your nice comment Meli! :)
    The purpose of the infographic was to highlight various well known algorithms+practices in the programming world along with the pioneers in this field. Hence, I decided to highlight algos in alternate rectangles. It’s true that there’s no obvious connection between some of the algorithms and the mentioned personalities. But the purpose was to slightly touch upon various things in programming. I could have included the relevant information along with the personalities.But, it would have been really boring to see C++ code next to Bjarne and C code next to Ritchie. Hence, I decided to include algorithm diagrams to make things a bit more interesting :) Also, it makes the infoghraphic more complete as most programmers have also worked with various algorithms mentioned in the infographic. :)
    I decided to include a few more things at the end, but it was taking away the hierarchy of information. Hence, it was decided to stick with the whitespace. Although, I have reduced it in the improved version of this infographic :)

    • 58

      George Egonut

      June 7, 2010 2:29 pm

      I think that your reasoning is understandable, but the end result with the “random” algorithms makes the infographic confusing overall, not in spite of, but because of the fact that some of the algos pertain to some of the programmers. This becomes confusing, as you are setting reader expectations one way or another (either the first algo they see pertains to the nearest bio, or it doesn’t) and then guaranteeing that you will break that expectation later. Making them truly random or absolutely pertaining to the nearest bio would set and meet a user expectation, which makes the infographic communicate more effectively.

  37. 59

    you guys are funny, everyone complains about the omissions or historical inaccuracies, but nobody points out the numerous grammatical errors … stupid computerfuckers

    • 60

      Wrong! @Hutch made note of typo’s and grammatical errors if you had read comments more thoroughly. We aren’t stupid and it isn’t nice to use the f word.

  38. 61

    Where is Simon Peyton Jones? :|

  39. 62

    Mandeep Singh

    June 7, 2010 1:31 pm

    Nicely done Adit!

    There is a slight historical inaccuracy though. The organization of the processor and memory credited to Von Neumann was the brainchild of John Mauchly. It was his conception after his work on the Eniac which he shared with Von Neumann in their encounter at Defense Research. Due to internal politics, army policy, and ethical violations by Von Neumann, no one knows who John Mauchly is any longer and that Von Neumann architecture is actually Mauchly Architecture.

    Very informative – and nicely compiled.

  40. 63

    Claudio M. Alessi

    June 8, 2010 2:16 am

    Where are Rob Pike and Brian Kernighan? O.o

  41. 64

    Adit, a nice infographic – well done, and I like how you presented the process of making it. However, I would offer a little editorial suggestion:

    1) since in any infographic you are juggling information vs. space, you should drop irrelevant text. Every text block about the programmers includes “He is [the]…” – this is quite unnecessary, since we can see who you are talking about. So instead of, say “Richard Stallman / He is the creator of Emacs editor” just put in “Richard Stallman / creator of the Emacs editor and lead architect and organizer of the GNU project…” for example. Trimming the text this way also makes it easier to read.

    • 65

      Thanks Luka!
      I am really glad that you’ve “pointed out” my mistake. That’s what I was looking for! I think this is the right way of criticism, i.e, constructive criticism! I will surely keep this in mind next time. Thanks again!

  42. 66


    June 8, 2010 11:34 pm

    Great resource!

  43. 67

    Great job – added to Style&Flow

  44. 68

    Have you considered making an infographic about infographics? :p

  45. 69

    Not mentioning Konrad Zuse in this Article is blasphemy!

  46. 70

    Aditya Dipankar

    July 22, 2010 11:32 am

    Hey Adit!

    Good job there! I have but one suggestion to make which can probably take care of the problem of real estate being a barrier to a (sort of) comprehensive collection of subjects is making it interactive and maintaining a database which dynamically pulls in data upon requests. Unsatisfied users will find (or lose) their way out there! You know what I’m talkin’ bout ;)

  47. 71

    As Meli says before: “I think your infographic looks great and conveys a fair amount of interesting information and the layout is pleasing to the eye.”
    I’m totally agree.

  48. 72

    Hi everybody, hi Adit.

    I made my humble contribution to this great work by translating it into Spanish.

    Here you can read about this translation

    Please do not hesitate to ask me if you would like to get the Spanish version in good quality.

  49. 73

    David Stephenson

    April 20, 2012 10:21 pm

    Is it possible to buy this as a large poster?

    I teach computing and would love something like this for my room.

    Excellent Work.


↑ Back to top