Nadieh  Bremer 

After all of that very serious and interesting and important talks is will be very much not important and just hopefully a little bit of fun and inspiration for you. So, I don't remember when I first heard it, but I've heard the saying that everything is connected at some point in my life, and I don't want to be whether or not everything is connected but I have noticed that connection is really can be found everywhere. Connection really are a part of us of the world from connections between people, between cultures, within language and nature itself.

You know some being literal connections are disconnected across time and others only exist through the meaning we as humans give them and, in these days, when more data is being collected than we could ever hope to explore the variety and connections being gathered is opening up possibilities to visualise more of these often-complex networks. So, I've been doing data visualisation or focused on it for a few years now and I typically like to take on the bigger datasets. Those that have a lot of diversity, so I can show context and other stories besides the main insight. After I started free lancing, I noticed that a lot of my projects can really be seen as revealing connections. some very obvious, some more subtle, some ending up as actual network visuals while others need a different visual form to best display the insights. and during this talk, I'd like to take you through the design journey of several of my favourite connected projects revealing the ugly truth that goes into creating these often big and complex and elaborate and interactive visuals and stories. and I want to start out with straightforward connections, literal lines that are being drawn and only through those lines to the connections even exist. Consolation so being officially an astronomer, I have a very big bias for anything space. I often get inspiration in terms of design from space I mean just look at the James Webb photo that was released today and I also find myself creating a visualisation about astronomy every once in a while, and so, for my final project to a yearlong collaboration that I did together with Shirley Wu called data sketches I found myself turning back to strongly yet again.

So, there were different projects, 12 of them each of them had a different theme and the final one had to be about myths and legends which through a winding road of ideas eventually left me to the concept of myths in the night sky because sure I can pinpoint some of my favourite constellations but those are all from western culture and I wondered what if other cultures across space and time see in the night sky, and are there certain shapes that almost every culture identifies with. so, I drew this really tiny little sketch in my notebook, but in my mind that sort of sky map would eventually be something that would definitely take inspiration from you know the amazing historical sky maps in real life and whatnot. So, really enthusiastic to get started that was one big hurdle though you know would there be diverse cultural consolation data available online, seemed like a niche of the niche of a niche but thankfully I stumbled upon this to Lori and pretty quickly which is a free planetarium software and even better it's open source and so after some digging around in their GitHub repo I found that that time they had constellation information available for 28 different cultures you know from western to Chinese to Korean to Hawaiian and even ancient Mayan and Egyptian. and after some data preparation I was ready to make my visual and I hate starting out with a blank page so I generally try and look up some simple examples and I used D3 JS to programme basically all of my visuals so I looked up some star maps from the three and the code for this was actually pretty simple not a whole lot lines of code it's all handled under the hood but like the Geo functions of D3 and so this was one of those rare cases where I thought I perfectly copy pasted the code from the example into my file plugged in my data and everything work on the first save and reload but of course real life

happens and all my stars appeared along the line. After looking a little bit deeper I found my mistake I thought and then they appeared all over the page but you know I wasn't really confident and then point anymore so it could also be like a random distribution of dots, so I just continued like all single see once I figure out if this was wrong or not I added a background group which seemed correctly and then I thought wait you know I'll add those western consolation lines because those I know and then I immediately noticed Orion which is my favourite constellation you know everyone has their favourite constellation. and this is in essence a sky map but I very boring one though and so I spent hours trying to make it based more on reality by making it you know having the stars have the proper colour making them glow adding the Milky Way in the background but also remembering what I like from those historic sky Max you know the embellishments of all of the degrees in the clipping into a circle and the Zodiac size spirit details and just show you the final result because it kind of comes down to setting up my grid area in terms of what I was really going for, because this is sort of the base map that I ended with but what would make my map most different from a typical star map would really inclusion of several different constellations at once so my approach was so they would take one star and then I would visualise all the constellations that used that one star and so I started out by creating these little doughnut charts around all of the stars that were being used in all those constellations together to really show you like some stores are being used more than others. and then I also wanted to draw these parallel lines between these stars one for each of the constellations, and what I do typically when it comes down to these sorts of geometry math things is that I draw out what I want in my little notebook and trying deconstructed in terms of the math. and in this case though I wasn't really working and then thankfully though I liked geometry but I really didn't like linear algebra during my astronomy years but there is there are some useful things to linear algebra I mean there's actually a lot but I remember the normal vector which was just very easy way to then have like the formula for actually shifting these lines left to the top of bottom and so actually the parallel lines came about quite fast. and this is sort of the main visualisation and it shows you all of the constellations that uses star Beetlejuice and when I first saw this I thought it was so amazing to see that so many of these cultures are using the exact same sort of hourglass shape, but of course each culture sees something different in them you know from objects to mythical beings and persons an even things that I don't even know what they should be legends and myths and of course there are also those that kind of defy what everybody else has seen in them like I love this we can see it's a dark purple like this man that seems to be throwing in bold boomerang I'm still not sure or this one from the Egyptians that's much bigger even than a Ryan looking at this point so that was really cool to see. I also looked at a lot of other stars I looked at serious for example which is the brightest star in the night sky but it doesn't have a lot of constellations and that's I think because it doesn't have a lot of bright stars around it so it doesn't have like a killer shape. I also found this cute little deer shape in the southern hemisphere which I hope to find when I when I go down there at some point hopefully and what seems to be the most common shape that these cultures these 28 cultures that had in my data set identify with is the one that we usually known as the Big Dipper. and I turned all of this into sort of an article that looks like I said these stars and a lot of other stars and looked at the data in different ways all just kind of give a sense of how people saw connections in the night sky. and I only work in digital, and so I'm always really happy when I can take a little bit of my digital and turn it into the physical and so I was really happy that there was some interest in this particular article and that people thought well actually I never knew about that I never considered that and then

they actually wanted to have it into their home so I was really happy to sort of create posters for the first time and then you know look into that that was pretty cool. but I think when people think about connections to probably think about family ties you know how are you connected to your parents, your great grandparents and so on and for another project in that data sketches collaboration the topic was presidents and royalty and I've always been intrigued by how intermarriage the royal these really are northern cousins twice removed there's a closer of farther than that and I was really looking forward last three generations of 1 royal house to create something more standard looking like this no I want it as many connections as possible crossing royal houses going back as far as royal houses going back as far as possible and again I was in luck after some Googling I found my way to this amazing looking website well this is one of the things that definitely learned during data sketches like the quality like of the design says nothing about the quality of the data that is sharing but it had a gigantic family tree of 3000 people connected to all European royal houses going back more than a millionaire. it was from 1992 so I did have to spend an evening on Wikipedia adding one or two more generations in the main line of succession looking up some other famous Royals to get into the mood but there the problem that I typically have with these very interconnected networks is that it's very hard to draw anything less abstract then just a bunch of circles connected by align and that's because the best way to visualise that network is so inherent to the connections within the network and So what I do instead is I plop all of the data on the screen as fast as I can with the network algorithm and then continue to go from there see what see what I can find I did that in this case as well and just plopped it on let the network stuff do its thing and then this happened an explosion of points and lines moving out of my screen so that will go I'll add a little bit of gravity to this giant cloud of points but then there was this sort of tipping point and I was left with a giant hairball not very useful even if I coloured it by year of birth. thankfully though in the browser you can play with the last man gravity a little bit and so I pulled it apart by year of birth which was better but it was still a rather an insightful bundle at this time I already spent several hours playing with the network settings trying different kinds of connections adjusting my data and I was kind of ready to just give up and try a different angle like how much of the royal spending these days but always makes you cry anyway but I gave it one last shot and that's when I decided to focus on the current royal leaders so I placed these in align as big circles and then I let the vertical gravity depend on which of these world leaders you will most closely related to and that's when I finally saw it insights for example that the queen of Denmark and the late queen of England and the king of Norway are quite heavily interrelated, but the Prince of Monaco Lyon separated from Europe over 200 years ago and it was only after I found the story the inside that I really started caring about the visual design and like I say I often get inspiration from space and networks remind me of constellations so that was the main reason why I just turned it into a story night doesn't really have to have a good reason sometimes and this is the final project turned 90 degrees to better fit a typical screen and because I wanted people to understand the connections how closely people were connected I added two types of interactions so you can hover over any person and see how far 6 degrees of separation reaches into this web, which for this lady Pauline of Wharton Berg, she's connected to six current oil leaders and only six steps I believe she's felt like the grandmother of Europe. but we can also click on anybody like for example if we have the late Queen Elizabeth and Anne Sissy and we can see the shortest path between them which in this case they're not necessarily very closely related but Elizabeth was and the king of Norway are actually family like this it's not that far back.

Thankfully though the royal houses have realised about 100 years ago that inbreeding is not a good thing for health, and so you can see that the lines have starts to really separate out in the last sort of 100 plus years good thing. So, I was connected to the guardian US by a mutual friend and through the Gates Foundation they have an entire section on their website that focuses on homelessness in America. and for one of their flagship pieces about how homeless people were being bussed around the country by given free single way tickets they were looking for outside help they've been gathering data from cities and shelters about the bus tickets for over a year and they were looking for someone to bring those to life and because I knew this piece was too big for me alone I asked Shirley Wu from the data sketches collaboration to become my partner on this project and with my data science background I took the data cleaning analysis report on me and all these cities and shelters and all the data that was collected it was all in different formats PDFs, excel files different ways to name it so that was really fun but the real fun really it came in in in in the shape of typos and in state errors because the properly know where a homeless person was moving to I needed an existing city. and so comparing against a sort of official data set of U.S. cities. I created a collection of fuzzy text matching techniques that would try and figure out the actual city in cases where an exact match wasn't found. I manually checked each of these automated corrections to see if I agreed, but I also spend several hours on Google trying to find the city in cases when even my fuzzy matching couldn't help me and that's how I've actually come to learn that the US should never have created four states that start with the letter MI that was that of that cost me six hours of my life. so after all of this data analysis resulting in 35,000 journeys the sort of the well the analysis part begins with the prep was done the analysis began and so I kind of dissected this data in several different ways looking for trends and patterns you know what about age versus gender, what about big versus small cities, what destination was most popular and what have you tried to account for distance and simply visualising these 35,000 journeys I knew would be an important part of the whole but just plotting them as lines from start to finish didn't really speak to me a man was just kind of a mess, so I knew that needed something else. well partly due to lucky timing everybody involved in the story could be in the same room together for two days during which we figured out the entire story that we wanted to tell an we're surely and I…. figured out kind of at what points we need a visual to help the conclusion of the story and one of my main visuals would be that map of the US showing all of these journeys and I drew sketches then where I thought well instead of showing all of these journeys that once I want to show each one separately each one should move from starting point to the end point it should come in animation and then overtime circles would still show kind of row behind these cities to show you know where all of the homeless people were moving to so and then back home you start creating it and of course you start bracing bowling gets more complex but you get some silly results in the meantime like if everything starts and ends at the same time you have these tiny US is growing into the big one if you give everybody the same speed it's like a shockwave across EU S also not a good metaphor but once you go you keep her finding it at some point it does start to look at you know what you have in mind but I was still interested in these arcs like if I do an animation what if I use marks for the animation so I kind of went into a tangent trying to get these entities arcs to work again that doesn't work so you know the first time but got there however it's wasn't when I was looking for it like it was still very busy in a way it wasn't really giving me the sense of people moving around even if I make these tiny little arcs it was kind of weird it seemed like somebody was moving through Canada to get from A to B which just didn't make sense and

so I went back to my little stream listen I tried lots of different things to add more like being able to follow a person for a little while but eventually we decided that the core was enough it was enough to simply show all these people moving and to show you the final result see I studied I studied the keystroke for going to the next tab they don't lie framing so I was having to switch so here is the full article and here we have that map and if you haven't heard of it this technique is called scrolly telling where you basically have the visual stay in place and then the text goals over it and then visual updates based on where you are in the text so we have the animation starting here and the goal for this animation is really to show you that so many people so many homeless people are being moved across the US and that they're going to places all across the US. it's kind of to give you the sense, the numbers of the like these are real people and there are many more visuals in this story as well as videos and photos and interviews to really try and find a good balance between these very personal stories but also the insights that this very high-level data set was able to provide us.

So, we can also look at culture if we talk about connections so since 2003, UNESCO has been gathering a safeguarding an ever growing list of intangible cultural heritage which can be anything from practises knowledge and skills that people see as being part of their cultural heritage and about 40 new elements could add it to the list each year and it's almost 700 by now maybe across 707 right now and you can browse the list and there's not so very inviting table on the UNESCO website if you click on something you get more information as well as videos and photos but there's something else here as well in the lower left which is probably too small to see but it's called concepts and you can see this as tags so people experts off these cultural elements have extensively tagged each of them and so if you look at these sort of these different cultural elements they all have their own tags and there's no surprise that some tags happen for more than one of them like vocal music being a part of all of these except for one and while one man within UNESCO had this vision where people would truly be able to see and interact with these connections between these cultural elements to see that maybe some cultural elements from places across the world could be very similar based on all of the shared tax that they had. Well he had convinced management to give him some funding hearts and for the back end and he came to me for the visual side and he was very honest in his first e-mail about the scope of the network so at that point in time there were about 450 elements still some countries and regions that had to be taken into account World Heritage sites and 1000 different concepts and that together gave me about 2000 nodes which is more of a technical term for so at least circles in a network and between them they shared a whopping 12,000 connections and I have I have to be honest I did not know that I would ever be able to untangle that I mean the royalty project only had four and a half thousand connections and that already was such a pain to sort of tease out but on the other hand you know I was a freelancer I did not want to say no to a client like UNESCO so I kind of just cross my fingers hoping that future me would figure it out and said yes of course like the royalty case though I completely skipped any sketching face that I would normally do and just blocked all of the data on my screen and also actually expected I ended up with hairballs, giant infectious looking disease things kept appearing on my screen no matter what I tried but there was one aspect of the data that saved me not all of these connections were of equal importance. So, if we go back to the table and we have the concepts there are actually two times well three actually but their primary and secondary concepts like the tango it has dance instrumental and vocal music as the primary concepts but it has a lot more secondary ones like choreography and emotion and although UNESCO did not want me to aggregate away any of the connections they were OK with me just using the primary

connections to place everything in the in the network in a way so I temporarily filtered out anything that wasn't a primary connections to a cultural element and then I read it the network and I saw this where the yellow ones on the cultural elements and the concepts are all teeny tiny because I didn't want to care about overlap for now but this was looking a lot more ordered in fact I felt that I was starting to see communities which would be a great way to untangle this web one step further so in network analysis you talk about communities when you have groups of knows that are more interconnected between themselves and they are to the rest of the group and then smart people have written algorithms to find these communities we check and then used to them for example colour each of them differently which is what I did here as well using just you know basic rainbow scheme but it was definitely seeing that there was something going on here with like this green over here and then there's this sort of lilac over here and the orange so this was looking well and at that time I thought well by now it's also let's look at these concepts because I want to play with that as well let's give them a size that's based on how many connections they have such as vocal music is used a lot so that one it becomes very big and wood is not used that much it becomes very small it also creates some visual diversity like something that makes it more interesting for the I see if there's like a little bit of a change in sizes but I thought typically in network algorithm places everything on the page randomly at the start and then tries to sort of use the connections to figure out where to place it but I thought I kind of know what should belong together I know what should be in one community so I don't want them to start randomly because sometimes it just kind of gets mixed up in a way so I thought well you know I'll place them in a circle instead of randomly I'll place everything in a circle and then I will let the network algorithm do its thing and I was really happy to see that in this case most of these circles they stay pretty close to that starting point they really only move because I don't want anyone of them to overlap so I believe forcefully pushed them out and there's really only some of them that get drawn towards the middle because they have more ambiguous connections and that's how it showed me that looking at this particular network from the angle of communities was really fitting with the connections to the network well I was home to put everything back in that filtered out before placed initially kind of averaged on what was already there and then ran a second network algorithm to have it move about based on everything and there we have the base network I did go to a different rainbow scheme still rainbow because there were a lot of groups to work with but I also use different shapes like hexagons diamonds filled circles stroke circles and a kind of linked how if you zoomed in it reminded me a little bit of like a schematic clerk of artistic look of outer space and my client that UNESCO started calling this visualisation the constellation which force again in astronomy theme so I didn't object at all but now thankfully the circles were figured out an it was time to look at these lines so how to handle 12,000 lines or grain street is boring to me so I made them curve and coloured but yeah 12,000 lines of full opacity's not good so again I had to sort of think about how am I going to handle this not everything worked out but eventually I came upon the idea that you know it seems so obvious afterwards but if you have are over something you see all of its connections with the primary ones a little bit thicker than the secondary ones and then if you don't hover anything it really only shows you the primary connections there are much fewer of those. before she didn't end there because the client also wanted it that if you hover over a region it showed all of the countries and then all of the cultural elements connected to that you had to be able to send a query to the visual which would then fix everything you if you click on a node and fixed it you would still have to be able to hover over everything else and get

information if you zoom in far enough the photos had to be able to show off the cultural elements and if you clicked on something you still have to be able to click on something else then see a modal popup more information videos and photos and that was just the tip of the iceberg and I'm not I'm not trained to do interaction programming so this is like a beast underneath in the code but here is the actual visual and kind of show you how it works with the idea is so let's say you start here and let's go kind of zoom in and just pick this one I will not be able to pronounce this so we have this cultural element and if we click on that we can see all of its connections we can see that it has it's about democracy and percussion instruments and we have our education we can click on that line and were taken to the other side and we can see this is also connected to some cultural elements like graphic arts, Fine Arts I guess so it's an in between one and this one is connected to Chinese calligraphy that makes sense and then we can see oh that's to do with weddings and cultural elite and art aesthetic education like kind of like wedding so go there and of course there's quite a lot connecting to weddings and that's kind of how this visual tries to make it a little bit of playful to make you move across this map from different places to different places and kind of show you that in the end I mean it's it takes much less than six steps to get from one cultural element to the next and this is a really fun project in the end because also how open UNESCO was in electing trying things to tackle this network because it really it didn't seem like we would ever be able to figure it out at start. So, now I want to look at connections between involve within language depending on how you look at the sentences and similarities between sentences. So, for the past few years now Google News lab has been asking data visualizers to create nativist driven stories based on Google data and I've already made one about translations as a non-native English speaker was always interested like what word single word is used like translate most often in Google translate and I'm so happy that it is in a word you can say at work it's beautiful actually so that's nice that was really helpful but they and they came back to me to ask him to do another one and this time I came up again with a set of ideas but there was one that really stood out to both me and my contact at Google and that was doing something about pets. so having these two cute little fluff balls in my house I mean they're like four times bigger right now but I found myself on Google quite often recently just trying to figure out some certain behaviour or why this why the boxes like you know and I was kind of curious why you know what do people search for on Google to better understand their pets and the approach was like this I would get the most popular questions that people ask about cats and dogs. so, you know why does it cat why do cats why does my kid and then the same for dogs and look at you know similarities and differences in trends and patterns and make that into a story. And I drew this sketch for them like what visualisation I wanted to create and my main visual was this thing in top left which I call kind of like a word tree is sentence tree where I would break apart all of these sentences and rebuild it in this kind of tree like structure let me try and explain that a little bit better though so in the end I got 2000 of the most popular questions that people ask about cats like why and from that I can say well give me all of the things that have to word like as the first word you know why do cats like but you see a smaller set an but from that set there are actually three that have to work boxes as the second word so I can combine that one step further and if I keep continuing to do that I will eventually create this sort of tree like structure where I can build up a sentence again by following the lines from left to right you know so why do cats like to go in the bathroom with you it is a thing yes or outside to go outside but this is taking up a lot of space so I thought instead you know I wanted to be around the sort of central like circle but I also want the circles to be scaled based on

popularity so why do cats like boxes as much more popular then why do cats like feet and my kids don't like feet I don't think so but this is only one small part of the data and I actually wanted to create this kind of tree for all 2000 questions at once and so my quest began where I started out with this very simple network and then trying to make these connections visible but I also had to really increase the size of these circles because I wanted as many of the words that the circles represented to be inside of the circles. that will just make it easier for people to understand to relate with this visual however that makes circle so big that these connections between them just be creating these sort of agree blurs going outward, you couldn't see who was the parents circle and who was the child circle and so I had to try all kinds of things to make that clear like I tried to group all of the sort of the children of the same parents but then it was still unclear who the parent was, and then I would get the strangest things at times where here I still do not know why they start rotating. I would just have to undo in my code and until the point stop doing it maybe some random stuff I don't know when I had some bigger ideas about drama in my notebook to see if they made sense and spend hours actually coding then actually seeing that no it doesn't actually work when you apply to all of this data I would get chaos from time to time I kind of like this one though and I don't know how many things I tried and in the end I even made everything draggable I thought you know if I can programme it I'll just do it manually I took me about two hours to kind of manually drag this right hand side I took a step back it's just still not working for me it's not getting to the point where I think this will make people want to look into it. so at this point this was 40 hours after that initial network thing and that's when I finally decided to give up but it was a client assignment so you know I need to deliver something and what I typically try trying to and I'll see you see that later is that I look back on everything I've done because sometimes I can have these blindfolds on like and that is my goal and if it's not exactly that goal I'll just ignore it but now the right sort of given up on that particular goal I look back and see you know is there anything interesting that I did that I could maybe work with and that's when I remembered the mini trees like at some point and tried cutting the sort of the connection to the main central cat circle so that each branch would become its own mini tree we'd already seen like before but there's also lick and meow and again of course this didn't go right the first time it did when I remembered thinking that these mini trees were actually a lot more easy to understand and to look at and more fun in a way and so I thought how can I use these mini trees so I'll try and put into military in a circle and let these circles sort of grouped together So what happens now is that I have a bunch of circles and just randomly place it then I have an algorithm that pushes everything inside so it all fits and then within each of these circles I run a network algorithm that place is sort of the trees all this is done under the hood though the animation is only for now and when I saw this is end result and I was probably biased after 40 hours of failure I felt like it finally found this sort of compromise between giving people access to all of the data while not feeling too overwhelming for you to want to explore and especially then if I looked into the design and I made that very whimsical and sketchy and playful so that you would want to move your mouse over it like it's just fun to kind of have this happen at least I find it and see the sketching is move around is like why wait was it my diamond Lloyd why does my cat like my diamond ring no never but of course this wasn't the end that was supposed to be a whole story so that it started again with other visuals an I don't tried I don't know how many different colour palettes and font choices I had to write the text for the page and come up with the layout for it has had a different kinds of interactions for my desktop and the phone like in personally I'm really happy that we have smartphones but professionally I'm really not

happy that we have smartphones as a data visualizer imagine having to make it work like a big complex visual on that amount of space is just like if you ask Van Gogh it's like you have that amount of space for your flowers it's notice I'm not I'm not comparing myself to thing going anything we sorry this it was just a metaphor all other things that had to happen but let me just show you the final result so why do cats and I'm trying to start out a little bit simpler like just give you a little bit of the data maybe pick some point that is particularly interesting like the cats versus cucumbers meme that was pretty big so people want to know you know why do cat markets afraid acute numbered 's but also you know why do cats purr and lick and bite and then after opponents like OK you kind of if you're still reading it until this point you're ready for the full data set so here you go one of my favourite ones is so fake why do cats eat fake Christmas trees but you can also look at the data in different ways so there's a subtle interesting difference between people asking why does my cat versus why does a cats like people ask more about smelling and throwing up and drooling and sneezing about their own pet then generally about cats of course it's cats versus dogs. this is the biggest project I've ever worked on also because I just couldn't stop wanting to make new visuals about it thankfully Google was very helpful in that point it's like OK you can you can have more budget that was very nice so for my final example I want to step away from connections that somehow relate to humans and really this one kind of only relates to systems so I was approached by a by Alice which is a start-up in South Africa that uses machine learning to find good investment opportunities and to do this they've created their own operating system and they wanted me to visualise how that system functioned and to give you a little bit of information about the data each data point was a service some task that is being run which could be as simple as a file copying tasks or to running a predictive model and each of these services falls into a specific domain so just all file handling tasks or all machine learning tasks and they wanted a visualisation that could be used both for management purposes so to see you know how the system doing is there something that is not working and what is working right now how big is it but they also wanted it to be used for marketing purposes so it also had to look good and interesting it has to be in line with their house style which was just black white and red and these colours in these photos of car streaks in the service like these long exposure photos so three colours that was fun and the reason why they approached me was that they felt that my way of visualising the royalty network would work perfectly for their data so in the world to network we had time on the vertical scale and then the network was pulled apart by the different royal leaders and they thought well we have creation time on the vertical and then on the horizontal we can have the different domains which pull apart the network and you know the way they explained it seemed to make sense to me so I said sure I can create that for you but when they did it was immediately clear for me to me that it did not work for their particular data set because on the one hand when a computer creates a task in these tasks they can create other tasks that of course happens within seconds from each other so all of these services want to sit at exactly the same creation time and there were barely any crossings between these domains so that just didn't make any sense I tried making other things but it just wasn't working and at that point I went back to my client and I said you know I really hated to go into a proper design phase and come up with something that is very custom to your particular data set and so over the next three days I would spend some hours throwing ideas in my notebook and then more hours actually programming it to see if it would work just starting out a simple with a like a circle and then ordered by domain and by time and then what about spokes where each sort of domain was a different spoke but then you can have things where

like here it was very unbalanced and maybe that wouldn't fit on the page or maybe a network then but then I saw seven little hairball sounds like no and then I saw this radio tree where you can clearly see the dependencies so we have the different domains is the starting point and then these are services that are created which create other services which can and so on create other services but this wasn't really working perfectly because sometimes a surface could create a task in another domain which was not possible to visualise here I went back to the spokes maybe if I made them into a spiral it would actually fit on the page but then you would have these lines crossing over other spokes I went to circle packing but at this point it was clear to me that nothing obvious was working and like I said I sometimes didn't have this goal and it's not working so let me reflect back on what I have tried and what did I like from all the things that I tried one of them being but I like this circle where everything is just simply ordered by domain and then chronologically and I really like that radio tree where you could clearly see the sort of the hierarchical dependencies of the tasks and that well can I combine those two things so in this case I would move a task a child task one step further back if you know if it was created from the parent which is what I tried here and these two basically my gosh it's hard to see these two circles are kind of the same is it possible to sort of dim the lights on the on me or this where I'm at to see the screen better is a set otherwise I'm just if it's too long I just can just continue we have more black images to come anyway so we have two circles and basically all of the services that you'll see are exactly the same angle but on the right hand side there moved one step further outward so creating this kind of depth we're going away and then I don't know if I should wait to hopefully make it seem better but in the next slide might actually have a better so I send this idea anyway so this idea to my client and they really liked the concept so I said about making it a little bit more on brand by making the sort of the failed services making them glow as if they were car lights and also making the running surface glow but I also wanted to have these lines that run between sort of the circles themselves to look a little bit like the cars streaks from the long exposure photos so I would kind of want to jiggle them around which it took me some time to get the math working for that particular process of jiggling but I've I got there at some point and then of course I had to make it updateable an interactive and be able to handle different kinds of data sets in there we go as good for the finale then maybe it will actually is much better thank you. OK so this is how it actually looks, so here we have the interactive then we can see for example how for this particular service which called this service with cola bunch of other services but eventually this woman failed which cascaded back down to make this service fail and then they wanted things to be able to look deeper into her particular domain and of course it had to again with the marketing angle it had to look interesting so it has a fun animations and whatnot and also have different kinds of time scales where you could jump between different time scales and such but in the end I was just happy that I was able to sort of come up with an approach to visualise this particular sort of network of connections especially looking at how dreadful that initial idea look that they had and I implemented and that's really to again emphasise that point that I had at the beginning is that the best way to visualise any network any group of connections is so inherent to the actual connections within that network and it doesn't really stop there I mean there are different ways of connections to find within the organisational structure of your company there are different kinds of connections between people besides families such as friends or lovers there are connections across time so just visualising all of the fights the characters of Dragon Ball Zee have appeared in very important and I mean what I what I hope have shown you is that connections can just be amazingly diverse and I found that

being able to visualise them requires a very creative and iterative and custom approach I mean sometimes the network can be simple and you can actually create some designs on paper beforehand but more often than not these connections can be so complex and elusive and unknown that there's nothing else for me to do but just put everything on the screen and then continue to design with code to see how my design choices affect the network as a whole and find what really brings this network together. where you can find all of these examples on My Portfolio and more they didn't even have time to show like a sentence really a lot of my projects are somehow connections but you can also follow me on Twitter and Instagram if you really want to follow me which is just my newsletter because you know who gets notifications on Twitter anyway and finally thank you very much for your attention