CODEWITHSUNDEEP
javascriptcsvd3.js
user3001937
user3001937

Reputation: 2113

Javascript/D3.JS - Convert CSV Columns items to JS List

I have CSV file that contain 4 fields:

Address,longitude,latitude, geometry
1,2,3,4 5,6,7,8

I would like to create a list that select only "Geometry" field.

Does this give us the whole list ?

d3.csv("file.csv", function(collection) {
..

var mydata=collection.geometry;

..
});

Upvotes: 0

Views: 1704

Answers (3)

Vikram Deshmukh
Vikram Deshmukh

Reputation: 15636

To extract a single property from a list of objects, you can use the map method as follows:

var temp = "Address,longitude,latitude,geometry\n"+
"1,2,3,4\n5,6,7,8\n2,3,4,5\n6,7,8,9";

var t = d3.csv.parse(temp);
console.log(t.map(function(d){return d.geometry;}));

Demo Fiddle

Upvotes: 4

AmeliaBR
AmeliaBR

Reputation: 27544

If geometry is a column in your csv file, no you can't select it directly from the results of the d3.csv function. The data object created by the d3 table-reading functions is an array of objects representing each row of your csv file.

So for the csv file Address,longitude,latitude, geometry 123 Main St, 90,50,geometry string A 22 Broadway, 92,51,geometry string B

The output is

[
 { "Address":"123 Main St", 
   "longitude":"90",  
   "latitude":"50",  
   "geometry":"geometry string A"},
 { "Address":"22 Broadway",  
   "longitude":"92",  
   "latitude":"51",  
   "geometry":"geometry string B"}
]

To get a single array that only includes the geometry strings, you can use an array mapping function.

d3.csv("file.csv", function(collection) {
   ...

   var mydata=collection.map( function(d){return d.geometry;} );

   ...
});

Now mydata is an array of strings, representing just the "geometry" column of your csv file.

P.S. I just saw @arete's answer. That works much the same way, except the mapping is done at the same time as reading the file, and only that one column is passed to your callback function. (Although note that it's still returned as an array of objects, not an array of strings.)

If you're not using any of the other data in the file, that might be slightly quicker for large data sets. With this version, however, you still have access to the full collection of data if you need it for other parts of your program.

Upvotes: 0

arete
arete

Reputation: 1933

Assuming that you have an http server serving the directory containing the following two files:

You may define the custom function to parse the fields of a row. The datum object contains all values of the corresponding fields within a row. You can return an object whose attributes map to a value that is within the row by simply accessing the datum's field name.

So you can define your function as follows

Example CSV:

field1,field2,field3
value1,value2,value3
value4,value5,value6

Anonymous function you could pass:

function(datum,index)
{
    var collectionObject = {};
    collectionObject.someFieldName  = datum.field2,
    collectionObject.anotherFieldName = datum.field3

    return collectionObject;
}

In your case you would do the following:

test.csv

address,longitude,latitude,geometry
"This","is","an","example"
"This","is","an","example"
"This","is","an","example"
"This","is","an","example"
"This","is","an","example"
"This","is","an","example"
"This","is","an","example"

index.html

<!DOCTYPE html>
<meta charset="utf-8">

<head>

</head>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script>

    var csv =  d3.csv("test.csv", function(d) 
        {
          return {geometry : d.geometry};
        }, 
        function(error, rows) 
        {
            console.log(rows);
        });

    console.log(csv);
  </script>
</body>
</html>

Upvotes: 1

Related Questions