🏠 back to Observable

parse csv file as map object

Hello,

I’m trying to make a choropleth map in d3 and I’m having difficulty parsing a csv file into a map object as shown in the example here: https://observablehq.com/@d3/choropleth

My notebook is here https://observablehq.com/@biskwikman/japan-intra-prefectural-migration-map. The relevant code is as follows:

fromAllMap = Object.assign(new Map(d3.csvParse(await FileAttachment("fromAllReduced.csv").text(), ({ja_name, population}) => [ja_name, +population])), {title: "Total Inter-Prefectural Immigration"})

But the result is a Map of undefined => 25399, not of each name and it’s corresponding value as I wanted.

I’ve looked at multiple other examples and I can’t find what I’m doing differently. Can anyone help me out?

Try looking at just your data file alone:

d3.csvParse(await FileAttachment("fromAllReduced.csv").text())

You’ll see the columns are name_ja and population, but your code references ja_name and population. Here’s the fix:

fromAllMap = Object.assign(new Map(d3.csvParse(await FileAttachment("fromAllReduced.csv").text(), ({name_ja, population}) => [name_ja, +population])), {title: "Total Inter-Prefectural Immigration"})
2 Likes

omg thank you! I was looking at this thing for hours and couldn’t figure it out. I must have just not noticed the title was reversed.

I’m having another issue I would appreciate any help with. I can’t get my colors working on my map.

I know my colorscale is valid because it’s working on my legend, but I can’t find out what’s preventing it from showing up on my map.

I’ve parsed my data into a map object successfully, and my geometry is appearing onscreen. The common column is “name_ja”.

I think it might have something to do with the implementation of the color function?

My relevant code is this:

`
svg.append(“g”)

 .selectAll("path")
 .data(topojson.feature(japan, japan.objects.prefectures).features)
 .join("path")
   .attr("fill", d => color(data.get(d.name_ja)))
   .attr("d", path);

`

Did you try inspecting the result of this expression? Probably you want to reference d.properties.name_ja instead of d.name_ja.

Thanks for the tip. I think I know what’s wrong and how to fix it now. I think I’m mistakenly thinking of the cells like I do in Jupyter Notebook in terms of execution order and that’s not giving me what I thought I had. Hopefully once I sort that out it should work!

Yep! See this notebook for more on how Observable runs code:

1 Like

I’ve finally got it a basic version working! Thanks for your help in figuring it out!