Why can't I use d3.js with HTML() ?

[serefarikan]

The cell below ends up rendering only the status div. The html that I'm trying to render is also written to disk and if I load it with Edge, it displays correctly. To the generated html works fine in a browser. It seems to be executing until the point it updates the status div after making the calls to d3 too, but the svg is not displayed in the notebook. What am I missing here?

var js = System.IO.File.ReadAllText(@"C:\d3min.js");
var html = @"
<div id='container'></div>
<div id='visualization' style='border: 1px solid #ccc; padding: 10px;'>
    <div id='status'>Loading D3...</div>
</div>
<script>
// this will load d3 too
// const d3 = await import(""https://cdn.jsdelivr.net/npm/d3@7/+esm"");

</script>
<script>

(function() {

    // Test if D3 loaded
    var statusDiv = document.getElementById('status');
    
    if (typeof d3 === 'undefined') {
        statusDiv.innerHTML = 'D3 failed to load';
        statusDiv.style.color = 'red';
    } else{
        statusDiv.innerHTML = 'D3 is in place';
    }
    // Declare the chart dimensions and margins.
    const width = 640;
    const height = 400;
    const marginTop = 20;
    const marginRight = 20;
    const marginBottom = 30;
    const marginLeft = 40;

    // Declare the x (horizontal position) scale.
    const x = d3.scaleUtc()
        .domain([new Date('2023-01-01'), new Date('2024-01-01')])
        .range([marginLeft, width - marginRight]);

    // Declare the y (vertical position) scale.
    const y = d3.scaleLinear()
        .domain([0, 100])
        .range([height - marginBottom, marginTop]);

    // Create the SVG container - using select instead of create
    const svg =  d3.select('#container')
        .append('svg')
        .attr('width', width)
        .attr('height', height);

    // Add the x-axis.
    svg.append('g')
        .attr('transform', `translate(0,${height - marginBottom})`)
        .call(d3.axisBottom(x));

    // Add the y-axis.
    svg.append('g')
        .attr('transform', `translate(${marginLeft},0)`)
        .call(d3.axisLeft(y));
    
    statusDiv.innerHTML += ' || finished calling svg.append';
})();
</script>
";
System.IO.File.WriteAllText(@"c:\htmloutput.html", html);
 HTML(html)

[serefarikan]

Lesson learned. For whatever reason, d3 must be loaded to js kernel using javascript, and only then my html output rendered via HTML(html) can find it. To make things even funnier, the notebook by default contains a div named container (arrghh!!). So that name collision must be avoided as well.

This is the code that works:

#!javascript 
d3 = await import("https://cdn.jsdelivr.net/npm/d3@7/+esm");
#!csharp
var html = @"
<div id='container0' style='border: 1px solid #ccc; padding: 10px;'></div>
<div id='visualization' style='border: 1px solid #ccc; padding: 10px;'>
    <div id='status'>Loading D3...</div>
</div>
<script>
    
    (function (){
        
        // Test if D3 loaded
    var statusDiv = document.getElementById('status');
    
    if (typeof d3 === 'undefined') {
        statusDiv.innerHTML = 'D3 failed to load';
        statusDiv.style.color = 'red';
    } else{
        statusDiv.innerHTML = 'D3 is in place';
    }
    // Declare the chart dimensions and margins.
    const width = 640;
    const height = 400;
    const marginTop = 20;
    const marginRight = 20;
    const marginBottom = 30;
    const marginLeft = 40;

    // Declare the x (horizontal position) scale.
    const x = d3.scaleUtc()
        .domain([new Date('2023-01-01'), new Date('2024-01-01')])
        .range([marginLeft, width - marginRight]);

    // Declare the y (vertical position) scale.
    const y = d3.scaleLinear()
        .domain([0, 100])
        .range([height - marginBottom, marginTop]);

    // Create the SVG container - using select instead of create
    const svg =  d3.select('#container0')
        .append('svg')
        .attr('width', width)
        .attr('height', height);

    // Add the x-axis.
    svg.append('g')
        .attr('transform', `translate(0,${height - marginBottom})`)
        .call(d3.axisBottom(x));

    // Add the y-axis.
    svg.append('g')
        .attr('transform', `translate(${marginLeft},0)`)
        .call(d3.axisLeft(y));
    
    statusDiv.innerHTML += ' || finished calling svg.append';
    })();

</script>

";

 HTML(html)

and see for yourself the container situation by running this in a clean, new notebook:

#!csharp
var debugHtml = @"
<div id='my-unique-container-123' style='border: 2px solid blue; padding: 10px; min-height: 50px;'>
    This is my container
</div>
<div id='debug-info'></div>

<script>
// Check if there are multiple elements with id='container'
var containers = document.querySelectorAll('#container');
var debugDiv = document.getElementById('debug-info');
debugDiv.innerHTML = '<h4>Debug Info:</h4>';
debugDiv.innerHTML += '<p>Number of elements with id=""container"": ' + containers.length + '</p>';

// Check if container exists and where
if (containers.length > 0) {
    containers.forEach((cont, index) => {
        debugDiv.innerHTML += '<p>Container ' + index + ' parent: ' + (cont.parentElement ? cont.parentElement.tagName : 'none') + '</p>';
        debugDiv.innerHTML += '<p>Container ' + index + ' visible: ' + (cont.offsetParent !== null) + '</p>';
    });
}

// Also check for any CSS rules affecting #container
var styles = window.getComputedStyle(document.body);
debugDiv.innerHTML += '<p>Body display: ' + styles.display + '</p>';
</script>
";

HTML(debugHtml)

[serefarikan]

I am keen to understand the relationship between the js kernel and the call to HTML though. There is an html cell type and what is rendered in it is available to js kernel, as can be seen [here] (https://github.com/dotnet/interactive/blob/main/samples/notebooks/javascript/D3.js%20with%20import.ipynb ) and here

How do these things interact?

[jonsequitur]

All HTML outputs are rendered into the notebook's webview. This is true of:

• The HTML cell type's outputs.
• The output of the HTML() method available to C# and F# cells
• Any objects rendered using the text/html MIME type (e.g. someObject.Display(), which defaults to text/html in Polyglot Notebooks (though this can be configured otherwise).

The JavaScript kernel is running in the webview, so it has access to the DOM built up in these various ways. The notebook's DOM is, effectively, the concatenation of all of the output cells.

[serefarikan]

Thanks @jonsequitur ,that's very helpful. Hopefully this discussion will stop others from scratching their heads :)