Support for D3.js

[falkoschindler]

I've been playing around with NiceGUI and D3.js, trying to find out if an integration might be possible. Here is my code:

import json
from nicegui import ui

with open('flare-2.json') as f:
    data = json.load(f)

ui.add_head_html('<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>')

d3 = ui.element()
d3.client.on_connect(lambda: ui.run_javascript('''
    const data = ''' + json.dumps(data) + ''';

    const width = 928;
    const height = width;

    const color = d3.scaleLinear()
        .domain([0, 5])
        .range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
        .interpolate(d3.interpolateHcl);

    const root = d3.pack()
        .size([width, height])
        .padding(3)
        (d3.hierarchy(data)
        .sum(d => d.value)
        .sort((a, b) => b.value - a.value));

    const svg = d3.create("svg")
        .attr("viewBox", `-${width / 2} -${height / 2} ${width} ${height}`)
        .attr("width", width)
        .attr("height", height)
        .attr("style", `max-width: 100%; height: auto; display: block; margin: 0 -14px; background: ${color(0)}; cursor: pointer;`);

    const node = svg.append("g")
        .selectAll("circle")
        .data(root.descendants().slice(1))
        .join("circle")
        .attr("fill", d => d.children ? color(d.depth) : "white")
        .attr("pointer-events", d => !d.children ? "none" : null)
        .on("mouseover", function() { d3.select(this).attr("stroke", "#000"); })
        .on("mouseout", function() { d3.select(this).attr("stroke", null); })
        .on("click", (event, d) => focus !== d && (zoom(event, d), event.stopPropagation()));

    const label = svg.append("g")
        .style("font", "10px sans-serif")
        .attr("pointer-events", "none")
        .attr("text-anchor", "middle")
        .selectAll("text")
        .data(root.descendants())
        .join("text")
        .style("fill-opacity", d => d.parent === root ? 1 : 0)
        .style("display", d => d.parent === root ? "inline" : "none")
        .text(d => d.data.name);

    svg.on("click", (event) => zoom(event, root));
    let focus = root;
    let view;
    zoomTo([focus.x, focus.y, focus.r * 2]);

    function zoomTo(v) {
        const k = width / v[2];
        view = v;
        label.attr("transform", d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})`);
        node.attr("transform", d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})`);
        node.attr("r", d => d.r * k);
    }

    function zoom(event, d) {
        const focus0 = focus;
        focus = d;
        const transition = svg.transition()
            .duration(event.altKey ? 7500 : 750)
            .tween("zoom", d => {
                const i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2]);
                return t => zoomTo(i(t));
            });

        label
        .filter(function(d) { return d.parent === focus || this.style.display === "inline"; })
        .transition(transition)
        .style("fill-opacity", d => d.parent === focus ? 1 : 0)
        .on("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
        .on("end", function(d) { if (d.parent !== focus) this.style.display = "none"; });
    }

    getElement(''' + str(d3.id) + ''').append(svg.node());
'''))

ui.run()

The JSON file can be downloaded from here: https://observablehq.com/@d3/zoomable-circle-packing

I'm not sure if this is worth the effort. D3.js seems to heavily rely on JavaScript code to create the plot - in contrast to Highcharts or ECharts which primarily use an options dictionary. So we either need do mimic the API in Python (like ui.scene or ui.leaflet in PR #1217), or we simply pass a block of JavaScript code to the client like in the example above.

[frankvp11]

I was looking into this again (D3), and wanted to see if NiceGUI had support for D3 yet.
To my disappointment, it's not yet there.
Would this be something I should look into to? I'd be quite interested to see if we could perhaps make something like nicegui-highcharts or even an element or API in and of itself

[falkoschindler]

Sure, that would be nice. When I looked into it last year, I found it hard to get any kind of generic abstraction layer other than calling a huge chunk of JavaScript code. While highcharts (and other libraries) allow you to pass an option dictionary, which nicely translates from Python to JavaScript, D3 seems to be based on a builder patter, which we would need to replicate in Python.

[frankvp11]

Yeah, I've noticed that too. I think some parts of the API wouldn't be 'too bad' to replicate - something like

    const svg = d3.create("svg")
        .attr("viewBox", `-${width / 2} -${height / 2} ${width} ${height}`)
        .attr("width", width)
        .attr("height", height)
        .attr("style", `max-width: 100%; height: auto; display: block; margin: 0 -14px; background: ${color(0)}; cursor: pointer;`);

but other parts like

    const root = d3.pack()
        .size([width, height])
        .padding(3)
        (d3.hierarchy(data)
        .sum(d => d.value)
        .sort((a, b) => b.value - a.value));

would be far more difficult. I certainly agree that there is no real abstraction that we could make besides a bunch of run_method's...

[olisom]

I'm trying to retrieve in nicegui the features that are hovered over in a map made with d3. The code works, but I'm sure there are other ways of doing it. Suggestions would be appreciated:

from nicegui import ui


topojson_data = {
    "type": "Topology",
    "objects": {
        "features": {
            "type": "GeometryCollection",
            "geometries": [
                {"type": "Polygon", "arcs": [[0]], "properties": {"codgeo": "0001"}},
                {"type": "Polygon", "arcs": [[1]], "properties": {"codgeo": "0002"}}
            ]
        }
    },
    "arcs": [
        [[0, 0], [100, 0], [0, 100], [-100, 0], [0, -100]],     # 1er carré
        [[100, 0], [100, 0], [0, 100], [-100, 0], [0, -100]]    # 2e carré à droite
    ],
    "transform": {"scale": [0.01, 0.01], "translate": [0, 0]}
}

url_root = 'http://127.0.0.1:8080'

ui.add_head_html('''
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
''')

ui.add_body_html('''
<div id="info" style="position:absolute; top:10px; left:10px; background:white; padding:5px; border:1px solid black;"></div>
<svg width="400" height="200"></svg>
''')


d3 = ui.element()

d3.client.on_connect(lambda: ui.run_javascript(f'''
    setTimeout(() => {{
        const svg = d3.select("svg");
        const width = +svg.attr("width");
        const height = +svg.attr("height");

        const topo = {topojson_data};
        const geojson = topojson.feature(topo, topo.objects.features);

        const projection = d3.geoIdentity().reflectY(true).fitSize([width, height], geojson);
        const path = d3.geoPath(projection);

        svg.selectAll("path")
            .data(geojson.features)
            .enter().append("path")
            .attr("d", path)
            .attr("fill", "lightblue")
            .attr("stroke", "black")
            .on("mouseover", function(event, d) {{
                const infoBox = document.getElementById('info');
                if (infoBox) {{
                    infoBox.innerText = "Feature: " + d.properties.codgeo;
                }}

                fetch('{url_root}/map_hover/' + d.properties.codgeo);
            }})
            .on("mouseout", function() {{
                const infoBox = document.getElementById('info');
                if (infoBox) {{
                    infoBox.innerText = "";
                }}
                fetch('{url_root}/map_hover/' + '_no_codgeo');
            }});
    }}, 100);
'''))

selected = ui.label('')

@ui.page('/map_hover/{codgeo}')
def map_over(codgeo):
    selected.text = codgeo if codgeo != '_no_codgeo' else ''

ui.run()