 Hello everyone Okay, nice to meet you. My name is Sujin and Today I'm going to talk about the recent graphic that I work named NDP song project So today you're going to exploring the Singaporean NDP songs reading sounds and emotion. Are you excited? Okay, let's getting started Okay, so let me introduce myself for a little bit My name is Sujin and I can't I came from South Korea so I live in there and time my life and Last January I moved to Singapore because of my work Yeah, so previously I studied in music college for four years And then after that I really wanted to make my own the music application But I couldn't do right now on the single line of the code so I started the Python running community with my from some friends and learn and I was like it was amazing work so I keep learning and I Started my career as a product manager for three years So I wanted to more like developer developing sign. So I wanted to change my career So blah blah blah thing happens. I moved to Singapore. So for now is our first The first first the company that I work as a web developer. So I am very new Okay So, do you know NDP songs? Right Yes Yeah Okay, you can you can go to this link sr.se slash NDP songs 19 and you can explore the Visualization work that I did and you can also go to this link and then you can access this slide Okay Before getting to start I will explain what is time to be songs. Yeah in shortly So what is NDP songs? So since 1980s, Singapore government has commissioned National songs to inclicated civil religion that distracts favor and towards the nation so make more Singaporean more happy and Great five. Yeah, so what we can assess that? This is the one way of building a nation and it is very necessary way So we want to encourage this habit of singing. So I bet everyone can sing very well Okay, so or so it stressed the themes such as love belonging a pride attending its Excellence in IT coming man to the Singapore product PT hard work and teamwork such kind of the good things Yeah, so briefly the NDP songs can be divided into the three stages So first stage is national building and the second is a local talent is focused on like the Singaporeans and then The for now they are trying to appeal to the younger generation So this is so overview of my our the team visualization work So we focus on the three top topics Which is which are the bereaved sound and emotion. So based on the this research questions We gather the data Sometimes or so we are so fear out fear out which data is more suitable and then we finalize the visual and the design and Yeah, the make the website So let's go inside the release part at the first So you can go to this link and then you can see my the Python code in there In terms of the lyrics there are many approaches But the most is just a thing is that I'm using the MLB national language processing So I exactly follow that this a recipe to analyze the lyrics so to refer to start I Collected all the various the data over the 26 songs and then I also did the text processing so women of Star Wars and punctuation and space white spaces and did the text normalization like the steaming and And and they come into the non. They're kind of that And then or so I did the worst and digitization Expand expanding the construction and fix some type of errors by the model and then finally if you are Your data is already and then you can go inside the future engineering stuff like make the back of the worst model or IDF Yeah, what are the bad or so you can't do the cost cosine similarities and this is the parallelism and Okay, this writer is a copy someone else writing. Yeah, something like kind of that So after that I delivered the data to the designer and the journalist So they are trying to find out and what is the top was in the older remix So this is the data that I get to them and then we make the back of the world model And then this data is converted into the finalized the graphic So our designer make this nice the heat map based on our data yeah, so I Don't know you may know the previous the risk research question So our research question was the how and if it song this has been changed over the years So based on the bike based on our data We found that together pick at 21 times in 2013 one song named Singapore one Singapore and dream has been the most consistently used only six songs have not Used in the over the years. So that was quite interesting for me Okay, the next sound analysis. This is the most perform part that I did So if you want to Analyze the sunset pot you may know about the good understanding about the signal processing or freedom Transformation something like that. So it is very very hard and tricky to start and Get the information data from the sound it's like the sound waveform. So Incest instead of the those kind of approaches I found a very good at the API in the spotify So if you go to the spotify.com and then you can find a lot of the APIs Which is support the sounds analysis based on their algorithm. So when I fetch the data On the particular the ID ID and then I can't which is such kind of the information data for example I can also see great duration key mode time signature a kidney extensibility Energy blah blah blah something like that. And then I did draw the chart Okay using the Python library So it was the pretty cool But but however you can see that there are so many information So we want to want to get which quality qualities are more important and more understandable for the normal readers So we filter features and min max normalizations And then change name names to be more familiar word for example speechiness When I say the speechiness to my mother and then she might mean not bad. What is that? Right the violence if I said that no one can understand. So instead of using little bit sounds Sophisticated and scientific work to be more we sounds like natural or the familial Familiar so we change the world and then draw the SPG shot. Actually, I was trying to make the made a child using the D3 and BJS, but I I couldn't do that So if you wanted to draw based on the mathematics and you can visit this link and the follow the tutorial So after that we are so the main The music search region based on the The qualities yeah that we got from from the Spotify. So it was pretty cool and And also we our general is Make the storyline based on the data So we compare between the real Singapore original and then the rhythmic version So it was quite interesting. We overlaid the two different songs Polygon at the same the place and then we can figure out that which quality sir Really effective and different. So for example the spoke spoke words are increased And then I don't know how many you guys have heard recent this music, but the introduction the pot There are also red part Song by lion lion. Yeah, I forgot his name The rap part is a bear and then that's the ability you can see there significantly The length here is increased So it means that this music has more beat in the background so How any big song appeals to young younger audiences with remix and pop melodies So I don't know is it correct, but it seems to be Carry on in the pop sensibilities and a bit of vibrant to appeal to young girl audiences Yeah Okay, let's go to the Developer development side. So I'm going to tell about how we build the interactive user plot So we designed the interactive users emotion chart based on the losses complex the model Actually the he suggests that All the universe share the same emotion Regardless of the culture or race or the nationalities So this chart identified two dimension of the emotion, which are the balance and a result So this model currently states the subjective aspect of the motion as opposed to the cognitive or the biological aspects. So it's very very Can sounds active diagram So if we if we apply this model into the music area, so we are so Can figure out that which okay, this music is sounds a bit Happier or less and make more and be sad or maybe move that kind of that so currently the many The music Move recognition or music classification that using the machine learning or dim learning model They use that this model. So this is quite well known the mood model using mode mode so So we want to make more simplified. So we get rid of all the like the inner circle and then introduce The emojis on the axis So this is the final version that we've made So now I am going to tell about the overview of Interactive emotion chart development Yeah, so I made with BJS So if you see that and you can Divide this whole chunk of the chart Into the three sections the carousel part and the scatter plot and the summit button So actually this is very very tricky to understand the whole of Stead of flow, but I wanted to delete more simplified and then Like make more you guys more be under send the whole the structures So basically there are two states to main the state Which is which are the on stage in the stage? so when you drag the component in here and then drag it here and The dragging and active is updated and then if you that just drop down here And then there the condition will be checked. Okay, this circle is here or not so if the circle inside the plot and then stage will be push the new element and Then Automatically don't age is a filter so, yeah, so This is in this kind of the interactive shot. It's very important to keep to know that The this length and this length which are the written height so how I Make the component draggable. It also support a mobile and a web so instead of Making my own the component component. I use this rivalry view draggable resizable I don't I didn't use resizable a function inside But it was the pretty well function that I can use Yeah, and then up light. So it's also support a lot of functionality inside there So you can also define handlers for the resizing or illustrate the size and movement to the parent element or so Snap the element to custom green. Yes, something like that. But it also have the some problem because If you wanted to prevent native schooling on the mobile browser, it is very important to add the event To add the stop propagation and the prevent default so when I ignore that this function in here and When I did drag and drop down the socket inside the here the mobile doesn't work properly so after I apply this solution and then There was no any kind of the problem anymore. So this is one solution that I solved Yeah, so then Let's figure out How how can we validate the data is valid in here or not So it's a very simple like mathematics So if we know that the starting the this coordinate and this coordinate and we can calculate the length With right and then we also know that the width and we can just the figure out. Okay, this point is he here Here to here and then okay match and then it's in plot would be true. Otherwise It would be first. Yeah, so then how how we we know that the scatterplot coordinates the full coordinate so As them as my as a front-end developer, we have to know that We have to make sure that we all the websites should be support All cross browsers and devices at the same time. So it's a very tricky to To make and to keep the keep the same time so we can also use the get bounding client to lack method and Simply subtracting subtracting the coordinates of the parents Yeah And Also, yeah, you can see the code inside the here and then finally find at the finer and then we can get the range the here so even though the browser with The screen size has changed or if you use a different Screen size of the mobile and all the functionality will be occur and then we can keep the same Same same the coordinate. I'm the same. Yeah, same look so So how can we make the responsive chat? So if how to keep all the data position across all the screen size If if we can say that this is the mobile and that this one is a desktop So the screen size might be different, right? The tubes if if we say that to some two times more expand and skate off and Your job is is going to be to keep the same the position in here and here so for To solve this problem and you can use the scale factor corresponding to x and y So also we can use the simple mathematical formula in here So we already know that this length, right? So to get the scale factor smaller length everybody can be the larger length and We can get the ratio each point so this point will be saved in our DB database and No matter this length will be changed or not Right if we know the ratio and then just to multiply the whole length and then we can get the each point Yeah, so Only on the other hand. I also have Some very like tricky problem. The one thing is that the controlling the J index on SPG element So basically the J index in an SPG is defined by the order of the elements up here in the document So it doesn't work on the SPG elements such as a g or path or circle kind of that so In the last last graphic you can see that when you hover on the circle and then The circle should be up here on the top, but it wasn't doesn't the JX does not work so what I did was To plotting things on the top by the ordering and not pending to them So make sure that don't forget to update a state. So that's very important So another thing that I run is that don't use index as a key on the transition group So there are so many Interactions and animation is going here and there and you you may be use the Views transition group, but it also had I also faced some problem The animation was tweaking and it does not work Yeah, sometimes So I figure out what's the reason The main reason was that I you just to use dielectric the index in the key so the list will never Have anything move animation when it when the list is reordered and it defects the purpose of the using the Transition group so don't use the index dielectric here Inside the key, so you have to make sure they use unique key. Okay, this is the final result so what I Felt Was it was the whole the process was very interesting and very fun Yeah, and or so very interactive so I can also play And listen to music and get to know about the Singaporean program the music as well But on the other hand, I Found the most data points are packed is the center of the plot because For users they have to implement six twenty six Steps right so no one I bet no one completed all the Implements so that's why I think that most of the points are packed and then just Gather inside the bear Okay, so which and and the big songs in bedding is Singapore so So in my opinion, I think that those are groups are Can be the bill of the song by the Singaporeans so the for example, we will get there Where where I belong and reach out for the skies Okay Let's let up. So this is the story In the working process that I did so I hope you guys have some Inspiration or get some ideas For your data visualization or the storytelling So if you go to the this link and you can check our team interactive graphics is amazing and Also, you can dress some ideas from our work So I hope you guys be silly and enjoy a lot Okay, so I'm also very interested in the music and on my hobby is a running So if you want to run me and just talk to me, okay, thank you for listening my talk. Thank you