2.3 Adding Data

Hi, and welcome back to Learn Data Visualization with D3.js. This lesson is all about data and how to get it into D3. The first step in data processing and visualization is getting the data. D3.js is a very versatile library and supports many file types unloading data directly. If you're working on classic data visualization, like using statistical data or measurements, chances are you're going to have a CSV or TSV file. You can load these delimiter-separated files with the CSV or TSV functions. Let's have a look at how this works. I have a CSV file that deals with semicolons as delimiters. And it contains temperature and humidity data from Vienna that we are going to use in a later lesson of this course. Since it isn't a comma separated file, or a tap separated file, we can't use any of the aforementioned functions. Instead, we have to use the one behind it that allows an arbitrary character as a delimiter. It's called d3.dsv. Apart from the delimiter, it expects a path to a file, but it can't use a local file reference. You need a web server running. If you have Python installed, you can use the simple HTTP server module to run a static file server, that serves the files from the directory you're running it from. If you're using Python 2.7, you have to Python-M, simple HTTP server, and then the port, like 8888. If you're using Python 3, use python-m http.server, and then the port again to do the same thing. So let's just call the d3.dsv function and log the output to the console. When running it in a browser, you can see the data output. It isn't very usable, since the labels were meant to be human readable. If you look closely, you can also see that the data is in string format. So it's clear that we need to transform it before processing. This can be done by using the call back function we used to output the data items, and return the transformed data. In our case, we want the Date as a lowercase t, which in my data set also has an extra single quote that doesn't get picked up by the parser. By using the replace function, we can get rid of it, and then parse the date into a JavaScript date object. For humidity and temperature, and the procedure is similar. To get numbers from the strings, we can simply prepend the plus sign to force JavaScript to convert the value into a number. Finally, let's see the result. Now the values are easier to reference and can also be used for calculations, like the average temperature in Vienna over the year, Which is around 12 degrees Celsius. And of course, it can also be used for visualization with D3.js. Loading data from the static file isn't the only possibility. You can still supply dynamic data by fetching it from a web server endpoint. Once you have the data in a JavaScript hash and array, you can simply use it. In the next lesson, we are going to look at animations and how to interact with elements in D3 and SVG. See you there.