Hello and welcome to our Programming Visualizations with D3 course that is part of the Information Visualization in specialization in Coursera. In this course, I will be your instructor. My name is Christian Felix and I will be co-teaching this course, with Professor Enrico Bertini. The goal of this course is to show you how you can use this library, that is called D3.js, to create visualizations and many complex visualizations actually in JavaScript and in the web platform. Although it's not specific to web platform, this library can be used in any situation where you can use JavaScript. In this course, we will be focusing in how to create visualizations to your web. But most of the content that you're going to learn here is also applicable if you are using D3 to create visualizations from a mobile platform or also for desktop platform. D3 is all about interactive visualizations. So what we want to create here is not just visualizations that are static, that we print, but also visualization that allow people to interact. This type of visualization has grew a lot especially in news websites where they add some visualizations where people can engage more with the news and more with the information that they are trying to communicate, and our goal is to allow the user not only to read the visualization but be able to play with it, selecting some elements, and seeing some details and getting more information on demand. That is the idea of interactive visualizations or have multiple visualizations that interact with each other. Those are the goals of this course and also the goal of using D3 as a library to create those visualization. Throughout this course, we will be doing a lot of coding. So we expect you to have some knowledge about coding in any language. It doesn't have to be JavaScript, but we expect you to know something about logic and how programs work, and how you can code something on a computer. But we will start in the first week, giving you an overview of the platform, of the web platform that basically covers HTML, CSS, and JavaScript that are the main languages that we use to code in this platform. But it's going to be much easier if you have had an experience. Can be with Python, C++, C sharp, or any other language that you are familiar with. In each course, we will show you some theory about the API and how the API work and where should I use that API, but we also will be showing you some live coding on how you can code or how you can use those APIs that we just talked about to create real visualizations. What's the content of the course? So through this course, in week one, we will be starting to talk about the fundamentals of web development. So we'll go a little bit about HTML, and how the language works, CSS, and how the language works, and finally JavaScript that we can use to manipulate those two previous languages. Again it's just an overview so you should get the feeling. But we'll also be talking when to use HML, when to use CSS, and when to use JavaScript to create those visualizations that we are looking for, and also we are familiar, with these web fundamentals, with these web platform, we finally will see how D3.js can be used to create visualizations, and as I said before, D3 is a JavaScript library. So we have been most of the time writing JavaScript code. In the week two, now that we have an idea of D3 and how we can use D3 to manipulate elements on the screen, we will be working with the data. So finally every time you want to visualize something, you are visualizing some data and that is the goal. We should communicate this data that is complex in an easier way to the person that is using your visualization, and the first thing that you have to do is manipulate this data. Sometimes you have to change it, you have to improve, to transform it to a new format. So, we'll be talking about that and how D3 provide us some functions that we can use to manipulate this data, but also how we can use some native functions from JavaScript that also help us to change the data and manipulate it. Finally once the data is ready to be visualized, we will see how we can transform the data from the original data space to a new format of information that is basically width, height, and positions in x and y coordinates, it's basically visual information, and finally, how we can use these visual information to actually draw things on the screen, and we will be doing all these three steps using D3. In week three, we'll start to see how we can use D3 to create more complex visualizations and specifically, we're talking about Line Visualizations where you have only one line but this line will represent multiple steps or multiple elements of your data, and we use it often when we show trends or progression over time and also, we will see how we can draw pies and pie chart, and donut chart. Use this kind of functions that we use to draw arcs, and we will have also some functions that help us to compute the positions and the angles of each arc. To conclude week three, we will show how we can use maps or how we can draw maps, starting from how we can draw the basis of the map, and that's basically the borders of the countries or states or cities or anything that we are trying to draw and finally, how we can add map on top of that, and how we can convert information from latitude and longitude space to x and y positions. That is what we need in order to draw things on the screen. In week four, we start to deal with not only more complex visualization but also complex data structures. So we'll be working with networks, where you have nodes and those elements has connection between them, think about friends in a social network for example where each friend is a node but it has connection or friendship with other people, and to that we will be using node link diagrams, and we'll be using some functions of D3 that helps us to decide where to position those elements on the screen, and also hierarchical data. So think about you want to visualize the sales in a state but you also want to visualize the sales in a city and so you have these different levels of data and how we can deal with this type of data and one of such solution is tree maps, and we will see how we can create tree maps that allow us to visualize different levels of data in a hierarchical scenario. We will conclude week four and conclude the course with the interaction section where we will discuss how we can add interaction to our visualization. How can we allow people to select some elements on the screen to get more information or show a two chip when the user hover about some elements that we have. We will show as well how we can use brush to select multiple elements, not just one, but imagine that you have a situation like a map, you have multiple cities and you want to select the multiple cities, you can use a brush to do this job and finally, how we can zoom in and zoom out in order to allow the user to get more granularity of the details and higher granularity to allow the user to decide which level of details the user is looking for. At the end of the course, you will have a project that you have to create and submit in order to conclude this course where your goal is to create finally a full visualization using all the techniques and features that we teach throughout the course. So, let's get started.
