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:
If you’ve used other interactive notebooks before, you’re probably accustomed to code running from top to bottom. The first cell runs first, the second cell runs second and can reference values defined in the first cell, and so on down the page....
1 Like
I’ve finally got it a basic version working! Thanks for your help in figuring it out!