Did you know that you can navigate the posts by swiping left and right?

Read in Data by D3 - Part 1: D3 TSV

October 26, 2017, November 26, 2017 | Comments

category: VISUALIZATION
d3 javascript

D3 stands for data-driven documents, which means data is the oxygen of final visualization. It is always true that a good visualization would have a solid foundation of data. D3 is not exception.

More often than not, we prepare data and put it in some form of flat file as external source. D3 expands data support by module d3-dsv. It serves as parser and formatter to delimiter-separated values, such as comma and tab. There are mainly three functions under this module: creator of parser/formatter, parser and formatter.

1. Parse

<script src="https://d3js.org/d3-dsv.v1.min.js"></script>
<script>
    csv1 = d3.dsvFormat(",").parse("last,first\nDu,Yi");
    csv2 = d3.dsvFormat(",").parseRows("last,first\nDu,Yi");
    tsv1 = d3.dsvFormat("\t").parse("last\tfirst\nDu\tYi");
    tsv2 = d3.dsvFormat("\t").parseRows("last\tfirst\nDu\tYi");
    console.log(csv1,typeof(csv1)); 
    console.log(csv2,typeof(csv2)); 
    console.log(tsv1,typeof(tsv1));
    console.log(tsv2,typeof(tsv2));
</script>

From the example above, in order to parse some delimiter-separated values, a formatter needs to be defined first by using d3.dsvFormat() function, which is used later to pass parse/parseRows function for processing. The final parsing results always return an array. The only difference between parse and parseRows is that the former would return an object versus the latter would return rows.

alt text

The parse function used above would also generate a new property for the arry named ‘columns’ as we can see from the console and we can invoke this property by using data.columns. This is also a new feature of D3 version 4 or above.

<script src="https://d3js.org/d3-dsv.v1.min.js"></script>
<script>
    csv1 = d3.dsvFormat(",").parse("last,first\nDu,Yi");
    tsv1 = d3.dsvFormat("\t").parse("last\tfirst\nDu\tYi");
    console.log(csv1.columns); 
    console.log(tsv1.columns);
</script>

alt text

2. Format

From the other way around, we can use the same to create a formatter by d3.dsvFormat function. In stead of using parse, format/formatRows would be called to format an object to a string.

<script src="https://d3js.org/d3-dsv.v1.min.js"></script>
<script>
    csv3 = d3.dsvFormat(",").format([{last: "Du", first: "Yi"}]);
    csv4 = d3.dsvFormat(",").formatRows([["last", "first"], ["Du", "Yi"]]);
    tsv3 = d3.dsvFormat("\t").format([{last: "Du", first: "Yi"}]);
    tsv4 = d3.dsvFormat("\t").formatRows([["last", "first"], ["Du", "Yi"]]);
    console.log(csv3,typeof(csv3)); 
    console.log(csv4,typeof(csv4));
    console.log(tsv3,typeof(tsv3));
    console.log(tsv4,typeof(tsv4));
</script>

alt text

For convenience, comma and tab delimiters are built-in function under this module. Here is a descriptive tree map to illustrate their relationships:

Reference:

(1). D3 API Reference, https://github.com/d3/d3/blob/master/API.md.
(2). d3-tsv API, https://github.com/d3/d3-dsv.