D3-graph-gallery | A collection of simple graphics made with D3.js | Graphics library

I am following this d3.js example.

However I am struggling to understand this line:

I'm trying to build a heat graph using d3 data, but it doesn't render all the squares:

After making my Sankey Diagram work I wanted to change some stuff in the JSON input file, I added two more values to have them displayed when I over a nodes but I run into an issue which leads me here. So, After adding these two values my diagram simply won't work again, first with the two values added it's output the same error in the title here's the code for both

I have modified d3noob's d3.js version 4

https://bl.ocks.org/d3noob/43a860bc0024792f8803bba8ca0d5ecd

derivative of Mike Bostock's collapsible tree

https://bl.ocks.org/mbostock/4339083

adding mouse-based pan and zoom, and loading the JSON data from an external file.

https://jsfiddle.net/vstuart/acx5zfgn/31/

• [updated, with solution] https://jsfiddle.net/vstuart/acx5zfgn/62/

Although not shown in that fiddle, in my HTML frontend (based on the AjaxSolr framework) I have hyperlinks corresponding to Apache Solr facets that when clicked update the web page (via an updated Solr request)

All of that is working well.

However, I also want to be able to have the corresponding d3.js node expand, when I click those facet hyperlinks.

Any suggestions would be greatly appreciated.

Addendum. For those interested in the answer, I updated my JSFiddle, HTML code (below) and GitHub Gist -- all at two places: search that code for "per answer at" to view the additions.

To verify the code additions, I dumped my updated the HTML content in my Gist to a new index.html file, which runs as expected in Firefox v88.0 running on localhost (no webserver needed).

Single-page code

• gist: https://gist.github.com/victoriastuart/996f568be10bb843b1f810c01b4dfa51

A follow-on question / issue to

Programmatically open nested, collapsed (hidden) node in d3.js v4

updated for d3.js v6. The issue is the loading of external JSON data in the d3 collapsible menu visualization, and the programmatic access of nested (collapsed, hidden) nodes.

It appears that "treeData", which is the loaded Object, is not being delivered.

After making a graph in parallel coordinates, I'm starting now a graph in Sankey Diagram type. So I Looked at this code : https://www.d3-graph-gallery.com/graph/sankey_basic.html and litteraly yanked it to try to understand how it's made to add later some interactions, but in first time I want to use my own data (https://raw.githubusercontent.com/augustin-laurent/Visualization_Tool/master/data.json).

But after changing the input file, I got an error that says the height of the nodes is a negative value :

I have been trying to implement treemap graph from d3.js lib on my free time project and I struggle to position the tooltip correctly. I assume it's should be as mentioned here, but with a few more divs I guess it is misplaced. This is the treemap I am using, I tried some suggestions from here but none seem to make it work for my usage.

Here is my JSFiddle:

I'm trying to draw a map in an SVG with the GEOJSON data that I bring from this API, the SVG paths are filled with the data, however, the SVG is blank, as can be seen when executing the code below. Notice the document.write, the data is returned correctly.

I want to create a US map based on county data. I'm using this JSON topology data to create the graph: https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json

In the first step, I created the map like this, and it works fine: