How to edit each TOPO Json segment's fill based on conditions

Background

Right now, I have an SVG of Korea and its provinces that updates its color fill by hovering. The use of hovering to do this isn’t my intended use case. I want the colors of each province to be in the SVG from the start and I am confused about how to get this to work.

What I have

This is my current implementation is that still requires hovering.

I have seen that within svg.append("g"), I will want something like .attr("fill", d => color(data.get(...))) which is basically a map function. Something like this, I believe, will allow me to color in each; however, the sources I have seen that have this code use the built-in color schemes and I am uncertain how to adapt it to my use case.

Notes

Right now I have emulated data. I plan on using an external source behind an API to automatically grab the real data. See legend in the code.

I am trying to go for a look that is similar to this, but I will change it.

Some edits I want to do to the map is to have a modified log scale. So instead of 0, 10, 100, 1000; I might try out 0, 20, 200, 1000, 5000 or 0, 20, 100, 200, 1000 for example. I have seen some built-in color schemes that are quantized but I can’t weigh or modify them much.

2 Likes

I have example data for each province in the code under legend

Do you mean like at your REPLACE doing:

    // REPLACE
    .attr("fill", d => d.properties.color)
2 Likes

OK, that helps remove the hovering aspect. Thanks. But I am also talking about how to go from data to color. Right now I emulate what the color should be and I don’t want to do that. Also, I specifically manipulate that data to add a color property, but I am not sure if that is a proper way. I suspect not.

Many examples I have seen use the “built-in” coloring mechanisms (it seems like) and I am not sure how to use them properly in my instance. For example, it looks like maybe I have to use some quantize function of d3, but I am uncertain about how to use them here or if they are right

The Legend you make for the colours seems complex to me as I would have thought it would have been an array if objects containing the data.
Speaking of using legends, this addon might be of use.

Data to colour: I guess that would be a d3.scalelinear()

colours = d3.scaleLinear()
    .domain([0,9,10,99,100,999,1000,999999999])
    .range(['#F00','#F00','#FF0','#FF0','#F0F','#F0F','#FFF','#FFF' ])
2 Likes

OK, took a little trial and error from your code, but I think I got it as I don’t want to have a gradient. I am trying to replicate the original in this code with actual data and it fits well. Don’t know if there is a better scaleX, but this seems to work. Now I can try to expand it to my thresholds

color = d3
  .scaleThreshold()
  .domain([10, 100, 1000])
  .range([dark_blue, light_blue, red, dark_red])
1 Like

You might look around at my notebook below. I’m doing a similar thing.

I got tooltips working too.

4 Likes

I will be looking at that for reference! I got it working, but I am looking at modifying it more and some of your techniques might be useful

I recall you wanted to do some outlining of the boarders and just saw this thread that might help. Buffer with Turff.js. How to display it properly with D3.js & SVG ?

1 Like

Have you seen this:

2 Likes

I have seen that link. I will be trying out different things. The setup I have works for the reporting that I need to do now, but I do intend to improve it. I will see what I can do with the link you provided. I am getting better at understanding the usages.

Definitely need to reorganize and simplify things from the testing I was doing.

3 Likes