d3 / d3

Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

Home Page:https://d3js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

csvParse, autoType, readFileSync, return string keys

winner106 opened this issue · comments

when I wrote the code in node as follows, It will return string keys.

my local csv file :

country,population
China,1439323.774
India,1380004.385
United States of America,331002.647
Indonesia,273523.621
Pakistan,220892.331
Brazil,212559.409
Nigeria,206139.587
Bangladesh,164689.383
Russian Federation,145934.46
Mexico,128932.753
Japan,126476.458
Ethiopia,114963.583
Philippines,109581.085
Egypt,102334.403

run the code to get data from local csv file:

  const data = csvParse(
    readFileSync(join("data", "population.csv"), "utf8"),
    autoType
  );

and the result of data is (return string keys of country):

image

the correct key name should be country , not 'country'

I try logging data[0].country, data[0]["'country'"] , all the result is undefined, I don't know why...
but the result of data[0].population is good

when I only use csvParse, the problem still happen

  const data = csvParse(readFileSync(join("data", "population.csv"), "utf8"));
  console.log(data);

image

The confusion probably comes from the way you're printing the array? If the key is indeed 'country', you should see this:

[
  { "'country'": 'China', population: 1439000000 },
  columns: [ 'country', 'population' ]
]

can you try this?

   echo 'console.log({country: "China", population: 1.439})' | node

The confusion probably comes from the way you're printing the array? If the key is indeed 'country', you should see this:

[
  { "'country'": 'China', population: 1439000000 },
  columns: [ 'country', 'population' ]
]

can you try this?

   echo 'console.log({country: "China", population: 1.439})' | node

image

@Fil it works , if I do this
image

Ah, maybe the initial problem is because your file starts with a BOM (https://en.wikipedia.org/wiki/Byte_order_mark)? This could explain what you see.

Ah, maybe the initial problem is because your file starts with a BOM (https://en.wikipedia.org/wiki/Byte_order_mark)? This could explain what you see.

yes , you are right , thanks ! saved my life!

but can csvParse do something to handle the bom problem in next version?

No, it's something that should be handled by the ingestion process (node's fs, in this case).

No, it's something that should be handled by the ingestion process (node's fs, in this case).

maybe, but if d3.csvParse can make it done would be perfect! I finally found this, also a csv Parser. https://csv.js.org/parse/options/bom/