In the run up to the third Avengers movie, I was wondering which characters have appeared together, and when. With dozens of characters across eighteen Marvel Cinematic Universe (MCU) movies, this will make Avengers Infinity War one huge mashup. In the style of the XKCD narrative diagrams, I plotted out the journey each character has taken across the numerous movies. I also got carried away and created a similar (yet smaller) diagram for the Netflix Marvel shows.

Marvel Cinematic Universe - Iron Man (2008) though Avengers: Infinity War (2018)

click to open an interactive version

Marvel Cinematic Universe - Netflix Shows

click to open an interactive version

I would like to thank the contributors to marvel-movies.wikia.com where I got all the information. As well as Simon Elvery who created the d3-layout-narrative module for d3.js that made these diagrams easier to create. Check back in future when I write up an article on how I created these diagrams. As always, I welcome feedback, you may contact me at @TheBramp.

I’m happy to announce one of my projects, js-sequence-diagrams. This uses Javascript to draw UML sequence diagrams in SVG format. Here is an example:

You can alter the diagram in real time, and I even have a simple jQuery plugin to make this easy to use on your own sites.

<script src="sequence-diagram-min.js"></script>
<div class="diagram">A->B: Message</div>
<script>
$(".diagram").sequenceDiagram({theme: 'hand'});
</script>