Reading of "D3.js Advanced Series-1.0" CSV table file

In the introductory series of tutorials, we often use the D3.json () function to read JSON-formatted files. The JSON format is powerful, but for ordinary users it may not be appropriate for ordinary users to prefer a form file generated with Microsoft Excel or OpenOffice Calc, because it is easy to understand and easy to edit.

Microsoft Excel is typically saved in the XLS format, and OpenOffice Calc is typically saved as an ODS format. These formats are very powerful as table files, but it's a bit cumbersome to read them, and there's no way to D3. But the tabular software will support the generation of CSV format , which is a very basic, general, simple table file. This article explains how to read and use CSV files in D3.

1. What is the CSV format?

CSV (Comma separated values), a comma-separated value that stores tabular data as plain text, separated by commas (Comma) between each cell. The CSV format does not have a common standard and is typically used in the description shown in RFC 4180.

The text format of the CSV is as follows:

Province, population, GDP Shandong, 9000,50000 Zhejiang, 5000,20000

It's easy to understand, separating each cell with a comma. What if you want to enter a comma in a cell? Use double quotation marks to frame up the line as follows:

Province, population, GDP Shandong, "9,000", "50,000" Zhejiang, "5,000", "20,000"

Some software, when saving the CSV format, will let you choose which symbols (commas, semicolons, and so on) to use to separate the cells, and choose the comma as much as possible.

2. Edit and save the CSV file in OpenOffice

Microsoft Excel is a powerful charge, and I have not used it in recent years. OpenOffice not only is open source free, but also the function is equally powerful. Here's how to use OpenOffice to edit and save as a CSV file, of course, it is easy for me to grope for it.

(1) First, open OpenOffice Calc. Just as with Word, Excel, and PowerPoint in Microsoft Office, OpenOffice in edit indicates that you are using CALC. After opening, enter the contents of the cell as normal, assuming the following is the input:

(2) Click "File" and "Save as". File type Select "CSV text" and click "Edit Filter Settings" at the bottom.

(3) Pop-up dialog box, select Encoding (recommended with UTF8), field separator Select "Comma", text separator Select "Semicolon". Click "OK".

(4) After saving successfully, open with Notepad, the result is as follows:

In D3.js, a function that reads a CSV file only supports separating cells with commas, so be sure to save them like this.

3. Read the CSV file in D3.js

The D3.csv () function is provided in d3.js to read the CSV file. The function API can be found in: Https://github.com/mbostock/d3/wiki/CSV.

The code to read the file with it is as follows:

D3.csv ("Table.csv", function (Error,csvdata) {if (error) {Console.log (error);} Console.log (CSVData);});

This code reads the Table.csv file and then outputs the read data. The output is as follows:

As we can see, the csvdata in the variable is an array, each element in the array is an object, and each object has an age, name, and sex three member variable. These three member variables are the three cells in the first row of the table you are editing. In this way, we can call this in the code.

for (var i=0; i<csvdata.length; i++) {var name = Csvdata[i].name;var Sex = Csvdata[i].sex;var age = csvdata[i].age;cons Ole.log ("Name:" + name + "\ n" + "Sex:" + sex + "\ n" + "Age:" + Age  );}

4. Concluding remarks

There are some functions in D3 about reading CSV files, which will be explained in a later article, it is not time to write too much content at once.

Thank you for reading.

Document Information

• Copyright Notice: Attribution (by)-Non-commercial (NC)-No deduction (ND)
• Published: October 03, 2014
• More content: our D3. JS-Data Visualization special station and CSDN personal blog

Reading of "D3.js Advanced Series-1.0" CSV table file