topojson | TopoJSON implementation in Go

The .html method on D3 selections first deletes anything that's already inside those elements before setting the new contents. Thus, to initiate an element's base HTML content with .html, be sure to call it first before adding anything else to the element, and also do not call .html later on, or risk it overwriting anything that was added to it.

You're close. You've got a number of issues though.

You're including the d3-tip library, but you're not making real use of it at all. Because of this, it's adding to the confusion. You have your own

Your "mouseover" event fails to add the country SVG element for two reasons:

First, because you're selecting the #tipDiv element which never appears since it's part of the d3-tip code that doesn't get used. To fix this, I think you want to select the div.tooltip element instead. Since you already have the 'tooltip' variable set to this, you don't need d3.select; you can simply do:

You need to join with an element:

The reason the chart is empty when using color is that the wrong column name is used in the lookup of the topojson file, so nothing is returned and you are passing a string referencing a non-existing column to color. If you inspect your topojson file you can see that each county's named is stored in the NAME attribute, not County.

Further, if you compare your topojson to what is in the vega sample data (for easier comparison paste them into a json viewer) you can see that the key used in the sample data file for the lookup example (id) is at the top level of each geometry object while in your fie it is nested one more level under properties. This means that you need to use 'properties.NAME' as the lookup string (more details about working geogrphical data in this answer):

The getGeoData method which sets up the chart is called only during component initialization and it wont run when @Input values change. For these scenarios Angular provides ngOnChanges lifecycle hook. And this is where we need to tell Angular what needs to be done when @Input values change.

Hi I used to have a website called covid19news.org. Which is now down. There I have worked on something similar. the code is like below.

Your topojson API needs to have type and geometries defined. You can then use this data in your projection.

My typical set up looks like this:

Everything looks good in the second block of code (using d3.geoAlbersUSA()) except I think you are zoomed in too close with .scale(200) and only seeing the middle of a county. As explained in this post, if you zoom out with smaller scale value you may start to see more of your map.(What does it mean to scale a projection in d3?) You may be better off using .fitSize() instead of .scale since you seem to be trying to fit the whole topojson data set inside an area rather than zooming into part of it. Updated your example below using a variable margin.

I LEAVE YOU THE CODE THAT ANSWERS MY QUESTION, I HOPE IT WILL BE VERY USEFUL

If you want to change features/data source/whatever with zoom, you'll need to get the current zoom state, which is contained in the the event passed to the zoom event listener (or d3.event before d3 v6).

This gives us a relatively easy zoom listener: