 Thank you very much Irene. Thank you, Lynn. Thank you all the Boku team This conference is great. So Yesterday talks were amazing diverse fun It's a pleasure to present here I'm gonna try to To connect some of the ideas We hear yesterday to some of the ideas I'm bringing I think That's part of what is great about this conference that there is a lot of connections and potential collaboration between people and Tools and platforms and frameworks and this is the the subject of my talk actually. It's about collaboration and Being more specific, I'm going to present a framework and a platform for collaboration, right and I am super thrilled because Basically today, I will say this is the starting point for a process that will take some time but it's already running but today it somehow it becomes public and It's a pleasure to to to to introduce these ideas To such an audience and in in in these great Conference is the perfect place to talk about it. So the idea is that in short a I and a small team have been working on a framework for a lot of years a lot of people a Building on it and we we are we have been also working on a on a great platform to Sketch projects and to produce product and for collaboration and we want these two to be open to become open Okay, so it's gonna be a process and and I'm gonna talk you about a little bit about that process I'm gonna introduce both the framework and the platform we call liking the other great things is that we Gonna have the the help of Boku on this process, okay? So we are super happy and we know that a campaign by Boku. We're gonna move probably slow but in the right direction and and Not making at least huge mistakes. Okay, so and What I expect that we expect is to to start collaborating with a small community that will grow right Enthusiasts that that will start playing will start using it Taking value out of it and then eventually early adopters, etc. So Let's talk about first the framework the framework is a JavaScript framework, okay? It's not exactly a data visualization framework But it's created to help in the in the creation of of data visualization projects. So What's on it it it contains that the main thing it contains is a set of data models I will Introduce now a lot of geometry statistics and math methods It has a very simple 3d engine. It has a very simple physics engine Especially useful for representing networks It has a data model for networks and a lot of methods and ways to deal to deal with networks it has some data science and The plan is to continue growing in that direction. I'm gonna speak more about that It has it deals with format. So it imports and export different formats. It's not complete But the the basis is already Created okay, and it has a lot of conversions that is there there are many ways to To convert a data model into another data model. So those data models create a sort of ecosystem I'm gonna talk more about that and finally it has simple graphics library, which is not so different probably more simple that P5gs or 2gs that were introduced yesterday. It's about helping people with simple functions To draw in the canvas in this case. So That's the framework If you know some of my projects you you will better understand what's about what can be built today I'm gonna show just one project that somehow features Different aspects of the framework. So what's not on it is not a library of visualization methods It doesn't contain visualization method instead. It tries to help whenever you want to visualize something using rectangles or circles or Projecting in a space it has all the math already solved for you or not all but a lot So it it helps creating new visualization method. It doesn't have any anything of HTML CSS SVG It's it's pure JavaScript and let's say mathematical JavaScript. Okay, not dealing with the DOM So what's really special in the in the in the framework? I think it's the ecosystem of data models It's what makes it let's say different or a special or that's the identity the character of the of the framework so this is a very raw scheme that shows Different that data models present in the framework the idea is to keep the list of data models short So you always work with with one of these or not always you're not necessarily constrained to this But most of the time you work with this and there are many ways to jump from one to the other So these relations means that Orange means that a rectangle this contains rectangles, right? So Orange means contains blue Means transformations you can transfer a polygon into a number table and the other way around so it has many conversions between different models and Green means inheritance. Okay, so a polygon is a list is a list of points So there is like an internal logic going on and when you get to understand it You become very efficient working with it with the framework. It makes a lot of sense Another characteristic is that most of the methods build new data models, so they do not transform They build new things all the time So you always have all the data models of the process accessible and you can combine them, etc. So This this framework have been has been like Construct in the last Four years in JavaScript, but it started like ten years ago in action script So there is a logic it has been tested in so many projects and it's especially I think it's especially meant for for interactive data visualization even if the framework itself doesn't contain too many Interactive methods or methods to help on interaction It is it is meant to to work with dynamic data in that sense It can be transformed it can be filtered and you keep this the story of all the data models So it is really good for interaction. Okay Good one example just one project that somehow contains I Or display some of the ideas or the or the powers inside the framework. So this is a Herbal none based on nodes and links and Scatter plot connectors the cutter plot and a lot of connected a scatter plot So it's like a 500 companies X axis is for earnings Y axis is for taxes and you have for for each company. You have a little story, right? like Apple say Microsoft and And different companies have different stories in the in the scatter plot, right? You can choose the time range Let's keep it for years and then you can try to find other companies that have similar patterns So this focuses on the pattern not on the exact position. Okay is more the story about the changes from from earning more or more and then learning less and Paying less taxes then start paying more taxes. So it's about the patterns of behavior throughout time And if I click on Apple, I will find other companies that have similar patterns. So It's not only representation. It's also the interaction is very important and hope how to for instance find patterns In this case via by dimensional correlation. It's a correlation more based on angles that in values But it finds patterns. Actually, you can draw your own pattern If you want and it will find the companies that follow that part. Okay. So these kind of functionalities that are closer to To more analytical processes if you have a lot in the in the framework, right and then you can do things such as Visualizes more multiples find clusters in the data And so it will analyze all possible combination and find the the groups that makes sense together and Network analysis network visualization, etc. Not network visualization, but more like network analysis building the networks and then Make very easy to draw a network That's that's the point not really you want find a visualization Method for networks here, but visualizing network could be very fast at first. Okay So again, you can change time range and the network will be Reconfiguring different ways. So you see you can actually modify a network. You don't have to change network This kind of process you find in the in the frame. Okay That was the framework but maybe more interesting and And and probably more useful for more people Is liking which is a platform for collaboration that it's currently based on the framework But it doesn't have to be that way. It could use Other frameworks. Let me explain So for that I'm gonna Do a very simple demo here. So this is it. This is like it. So you have a menu Right where to search menu where to search So let's say I want to create a network a random network because instead of loading a file that describes a network That could be possible I'm gonna create a random Network and I have some methods here so Where like and finds those methods basically in the framework that builds like it So it's like like and it's reading its own the framework that is used to create itself Okay, so I don't have to specify things outside the plot the the framework it's it really reads the JavaScript code and find the methods and create The access throughout the menu, right? And if the method is well documented You have all the information you need to use in this case. This is simple model. So number of nodes probability that Two nodes will be connected and that builds a network. So I have a network in this side Okay, so I can continue the flow good So what what can I do? So if in the framework? There's no visualization methods What what we do have are several visualization methods that are basically projects built with the framework and We call those external models So I'm gonna load one of these using the external module and It's called network v's. It's in a right now. It's local. It's in the in the same folder as lichen So that's why I didn't have to type an entire URL, but the external model Is meant to to load any website any thing on the internet That's the interesting thing about the external model. So if I for instance Go here and use the open v's comp URL. I will load the The website of the of the open v's conference, right? so But obviously this is not a model I can use for any data process So how to convert this into a model that actually can be useful. I'm gonna I'm gonna touch that subject later Okay, so let's erase this. Let's visualize The network is just that okay Then very important Modules have inlets and outlets so information can go inside and can go outside in this case those all those outlets describe possible interactions with nodes and relations So you can continue the visualization outside the network. So If I read this one is that is that's the the rollover node. So if I roll over a node This one will become black because it contains information. Okay So let's let's do something with that a very another very important module is the GS box So you can code in JavaScript here. Okay So it's easy for coders that want to build simple functions So if if I receive a node This can just return very simple the idea of the node for instance and then I can Use a text box Go to this just to display this this idea. So it's it's super simple Okay, obviously this can grow in complexity and And become much more interesting and I will show you a more interesting more complex spaces built on this on this platform So as I mentioned it visualizes its own code It reads is like a bootstrap. It is really reading the classes that build build it and Identify methods and put it on the menu, but you can load your own framework So it doesn't have to be there more of your framework could be any other frame It's better if you don't document the methods because that way you will find in the platform the methods with the documentation But if not, it's okay. It's also possible to work and it's about collaboration So I'm gonna I'm gonna talk about collaboration now and and and why we envision this this tool is being a Real collaborative tool. What what are the opportunities here? So first of all we envision collaboration between developers that's more or less easy because that is already happening all the time and also in in in Moebio where Moebius is a small team of people right now and we actually use liken to build projects and And as you will see different developers build different models in different places and they connect very well So it's very easy to assemble complex projects in which very different people from different Places without necessarily having interacted Generating things that that combine very well so between the developers it's clear, but then It could be also useful for users that do not know to code But want to use different resources on the internet for instance different visualization methods or interactive controls or Data science processes and they want to build they want to build things by combining those resources So right now that's very difficult only developers can do that that kind of combinations for many reasons For the start that there's no protocol for connecting things, right? You need to code to build this disconnection, okay? So we want we want users to to collaborate and to to build new things We want collaboration between the developers and users We want collaboration between data visualization and data science. I'm gonna point a little bit show final example and on that and Between data scientists and managers executives in company. We want to foster that communication and This platform helps to build processes that you can tune in real-time and and affect models, etc and Collaboration between different tools languages on frameworks, right? So that ends right now and when When people deal solutions for instance Visualization methods such as this great Open project called pivot table, which is basically a way to visualize tables But in a very interactive way that it allows people to pivot the features of the table and to build new tables So when people create this kind of Beautiful projects and things and they are generous because this project is actually in GitHub. So they want to share They they expect other developers to maybe extend the code We we have heard a lot about this process is yesterday But again only developers could use this In a way it can connect with other things Normal users could eventually attach their own data to this visualization and analytical and Widget but they cannot combine it is just connect data and it stops over there We think it's very easy to transform this into something that can actually be connected with other things and no code Required so I'm going to explain it later So this is what I call the dense and look all the potentiality to connect this in in the two in the two directions first of all receiving data obviously and It receives a table So the inlet is very clear But the outlet it's also clear because whenever a user makes a combination People's the table using certain features against other features They generate a new table So this could be a result that could be eventually Connected with other processes or other visualization for their analysis, etc So it will be awesome to to to being able to to do that but right now only colors, okay, right? So I call this dead ends and in general and That's how developers even developers than one to share and that that wonder their Their developments being used by a broad community build things, right? So that's why I call this This culture of developer of products being developed by developers as dead ends, right? so How to bring the collaborative culture of developers to users that's the point We have developers that collaborate a lot with platforms such as github They interchange code. They modify code of others. They they Open their codes. So it's it's a great community, but then outside this Frontier of of knowing how to code Users can only just use some of the results these developers are building how to make the users part of of this Story as well. So that that that's a model a simple model of how it could look if we open Collaboration between users and developers. So this the clusters right now It's just one single cluster of developers a big cluster of developers But in the moment you open Collaboration with the with the users community, which is actually potentially bigger Like new clusters appear and that are more diverse But that are also interconnected. So it's a more interesting structure, right? It's like another level of complexity and that's what we expect so we have been reading a lot of books about collaboration and Taking a lot of ideas from biology also companies System in thinking history of innovation and and there are a lot of ideas and methodologies and common things that happen in Collaborate in collaborative structures. So we are relying on many of those ideas to to build a platform that really foster Collaboration. So one of the of the key things of this platform is obviously modularity. So What can you do now? Now I'm going towards the technical and pragmatical issues. So This five-foot table for instance how to convert this This fantastic visualization into something that connects. So our proposal and what we use in the in this likened platform a requires that a Website or a Visualization such as five-foot table contain just these three functions Available in the global scope and only with that it will work So you need a send ready message that will be triggered in the moment the the the website or or visualization Has been completely loaded and then a receive data function and a send data function and that's all Okay, and only with that you can convert something that is at the end in something that can flow and can be connected with other results, okay We have been studying a lot of modularity as well. Obviously in finding a lot of examples in nature in culture in different scales and and being inspired by By by this like this animated if I can change speed Okay, so now I'm gonna jump to two more complex examples in likened and also to To point some of the ideas I presented and how they work here, okay So this is information about bank transactions It's time series. Yes and categorical data different services throughout time different days boring data, but it has Sort of very interesting a structure a time structure. It has rhythm, right? So when we this is just one day when we visualize this at first we immediately realize and and not only us but More people when looking at this certain music immediately So we decide to run a parallel experiment of how to sonorize this so we ask a Developer that that work with sound in Javascript to build a very simple module that will read just receive a list of Times right so it's a number list points in space and with other Parameters will will just play the sound of this time series and in a way It will be easy to synchronize graphically and eventually timely to other modules So the good thing is that this developer doesn't know anything about likened. We asked Kim to put these three functions I mentioned before in its module He placed it on his own server and we connected and it worked immediately And then we sent the result to him and it was like, okay That's interesting because I built something very small and then I receive a Bigger context in which my module works It's just Sound right and different tones associated with different categories Super simple, but it works well and actually we presented this to the to the client because this is a client project And he liked it very much and he thought It were to give it a try as an actual Visualization sonarization method that could eventually give give some insight because of this as these people know very well the data Maybe listening to different days or different hours. They can Some whole recon recognized or identified strange patterns for instance. We are just playing We don't know what could happen with this, but it's an interesting experiment so this is a Song loop right play a little bit here Do you remember this from yesterday So I'm gonna load Look at my body like so besides jokes and fun Thinking on pata tap yesterday. I made the question about how to enable this fantastic project pata tap to connect and Enable users not only developers to do great things now pata tap receives very basic Stimulize like kiss It is very easy to just add this function receive data to pata tap that will just Overlap the the key functionality So if someone loads that Project in this platform and it doesn't have to be this particular platform just following the protocol the methodology It could send new signals to pata tap and use it in another completely different project without Coding that's the potentiality and pata tap also delivers data in different ways like images that those icons that pop up or Sound signals so it could be an outlet also So send data again and pata that will become a resource that is open in a different new way Not just open for coders also for users so one One comment here. You see this code. This is strange code here. It's a layout code It's a sort of CSS To choose some of the boxes of the modules and to build a layout Placing placing those boxes in the in the window. I'm gonna show you an example of hope hope to build a layout and But now I want to go here because I Want to show you how pivot table has been actually modified to be a model So what we did this was a Danny a from oil your laps that this and it took him like Maybe one hour or two hours But if Nicholas the original developer of this resource For him if he will try to to connect it will be like immediate because he knows the code So at this receive data and this send data will be for him like a no-brainer, right? To Danny took more because it was in his project But he managed to somehow connect and create this inlet called table So now we can produce any data is the same as this is the transactional data and then we haven't finished this this model yet, but if we will It will make a lot of sense to also deliver a table, which is the table You build by interacting here by combining pivoting different features so and Pivot table will not longer be in at the end. It will be something that can be used in a in a more complex projects in a more complex Flow right and Let me go back to the presentation so if you want to be notified about the all the plans for opening a Moebio framework and like it Please go to my website and you will see there is the the project like and is over there You click on it and then you you can just subscribe to a mailing list So that's what we have for the time being but again things will be moving slower, but we'll be moving so little by little will be opening access to tomorrow more people and And delivering parts of the code working along with Boku It's almost guaranteed that that the code will deliver. It's a it's high quality code and it makes sense and could be really used So just for finish and then we can go to questions. I think it's a good idea to to extend the questions time and This is a project built with the with liken so obviously all these boxes In the platform look like a sparset concept in a Boxes or or visualizations or or interactive tools in the in the in the big space, right? And then they are connected and they are connected with code methods, etc. With this layout code We build this right so This is a project for a car manufacturer in Europe and they have this is a Lot of data at least it's a lot of data for the client It's more than 100 100,000 data points about people buying cars Okay, and we have a lot of information for from all those people here So the first iteration we built for the client Lichen what's the space where they could explore by filtering following a lot of different criteria? so you can filter data by by age by gender by the maker of the car this person bought or the family or the model and Also, they have very interesting data about What car this person had in the past and what car this person wanted to buy and what car this person? Actually ended up buying with that a Triplet of cars we built very interesting networks They there are somehow churn networks because it shows how some people want to buy a car, but ended up buying another This network is basically the network of the market But then in this in this iteration working in this first iteration working with the client They became very anxious about Finding interesting combination of filtering as the number of filtering is is very is really big and They they were trying to find for instance Particular cases in which churn is very low or particular cases in which churn is very high We decided to go to a more complex Development development and using using some Prediction models in this case is a decision tree That basically what it does is to find them the most important variables whenever you want to predict something but again instead of Following an analytical process creating and a result from the model and then delivering to the to the marketing team That will be more or less the the standard procedural What we did is to allow them To build their own models or at least to tune their own models starting by deciding what why they want what Are the variables they want to predict? Right, so the table contains a lot of features and they can Choose which which is the one which are the one they want to predict and then which are the one they want to use to Predict these other variable so this combination a already is very powerful for them. They can play a lot And then they can choose the country in which they want to predict or as in this case It's like all the countries are selected so they can also narrow the table They will use for the prediction, etc. And then with that This visualization methods gives an idea in this case The the predictive the the supervised variable is female. So we want to predict If if the buyer of a car is a female or not, right? We want to predict gender and For that particular task the decision tree tells the marketing team that the most important feature is the price So if you go to these cheaper cars You will see that the probability of of the by being a woman is is higher The lift here is almost to so almost twice as as likely that the buyer is a woman that they average, right and The opposite the very expensive cars are very likely to be bought by men But then this is just the first variable then you can navigate for instance after prices It seems that country in certain cases is the most important and in other cases is ages if we go to countries We go deeper, etc. So and we can find pockets in which Probabilities are very high or very low. All the pockets are organized here. So this is this is a predictive analysis visualization but the good thing is that It has been built to foster collaboration Within a team in this case marketing team with more analytical people in the company and it is working very well So it's also part of the of the aims of the of the platform to start combining Adding more data science to it a Layer of data science that will run on the client or JavaScript Which is obviously not enough for for for very hard task, but then we are also adding a Data science capabilities in on the server. So it's it's very easy to create models that could communicate with services in In a server. So we already have some some models or or we have linked frameworks such as Bandas from Python and models allow to to communicate and what you feel is like you are doing everything on the client It goes back and forth. It works very very well. So we have also a methodology for these cases in which we sample From from let's say we have a very big table impossible to load out all the data points to the client. We sample we allow the user to users to To generate their own models and they if they are satisfied The specification of the model the parameters go back to the server and the real model is calculated on the server And then the results come back so you use client to to be very fast on that part of the of the process of Building creating new models, etc. So that's that's why we also think this platform has been a collaborative platform between visualization and data science and as you have seen the idea is to create flows so it's no longer one single visualization as the end and put or one single analysis this this itself can be connected with with With more visualization more than Analysis, etc. So this is to show you a more complex project that we are we have actually Already delivered to an actual client. So it works and right now to export the project You actually do not export it is linked to to the core of of liken But in the in the in the near future we plan to allow people to export their projects So they will be completely autonomous if they use liken for instance They will export something that it's just an autonomous folder that they they can publish on their servers That's that's the idea. Okay, that's it. Thank you very much