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
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