Add shortcode for D3.js JavaScript charting tool

[FuadEfendi]

I think it is easy; I tried it works but my code is naive; Mermaid can't do it:
https://observablehq.com/@d3/gallery?utm_source=d3js-org&utm_medium=hero&utm_campaign=try-observable

[razonyang]

It may be a good idea, but I don't have the time to implement it. I'll keep this discussion open and see how many users want to see it happen.

Btw, there is a charting module called ECharts.

[FuadEfendi]

Thanks for pointing to https://echarts.hugomods.com/

It worked beautifully:

https://acetheseriesexams.com/s7/5/2/1/2/
https://acetheseriesexams.com/s7/5/2/1/3/
https://acetheseriesexams.com/s7/5/2/2/1/
https://acetheseriesexams.com/s7/5/2/2/2/

Unfortunately, in local dev I always need to restart the server, even with caching disabled; otherwise markdown is reloaded instantly but chart remains the same; if I make any change in chart I need to restart Hugo. But it works fine at Netlify; I don't need to clear browser cache.

hugo server --noHTTPCache --renderToMemory

Maybe better to have EChart settings loaded from external file instead of embedded as ```echarts {_js=true} - my single markdown is very huge because of a lot of JavaScript.

[razonyang]

--noHTTPCache ...

--noHTTPCache is useless for this module, since there is no external HTTP requests while using the ECharts module.

Unfortunately, in local dev I always need to restart the server, even with caching disabled

It works as expected.

otherwise markdown is reloaded instantly but chart remains the same

Please provide a chart definition to reproduce if it's a chart-specific issue.

[razonyang]

OK, I just noticed additional information you deleted from the discussion, but it's still present in my mailbox.

It's a cache issue in the JavaScript vars file, will see how to fix it.

[razonyang]

Should be fixed since github.com/hugomods/echarts@v0.1.4, thanks for reporting this issue.

[FuadEfendi]

Confirmed; it works in v.0.1.4.
Thank you!

(and I can load JS from external file too: {{< echarts _js=true _jsFile="point-and-figure.js" />}}; confirmed)

[FuadEfendi]

This is one real-life example where D3.js outperforms ECharts: Renko Chart.

https://observablehq.com/@fil/renko-chart

With ECharts I can simulate "bricks" using candlestick series, and it doesn't look "per specs":

// Function to generate dates for the past few months
function generateDates(startDate, numDays) {
    const dates = [];
    const currentDate = new Date(startDate);
    for (let i = 0; i < numDays; i++) {
        const year = currentDate.getFullYear();
        const month = String(currentDate.getMonth() + 1).padStart(2, '0');
        const day = String(currentDate.getDate()).padStart(2, '0');
        dates.push(`${year}-${month}-${day}`);
        currentDate.setDate(currentDate.getDate() + 1);
    }
    return dates;
}

// Function to generate random integer between min and max (inclusive)
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

// Function to generate raw data with up and down movements
function generateRawData(dates) {
    const rawData = [];
    let currentPrice = 100; // Starting price

    dates.forEach(date => {
        // Randomly decide to go up or down
        const direction = Math.random() > 0.5 ? 1 : -1;
        // Random step size between 1 and 3
        const step = getRandomInt(1, 3);
        currentPrice += direction * step;
        // Ensure price doesn't go below a certain threshold
        if (currentPrice < 50) currentPrice = 50;
        rawData.push({ date: date, close: currentPrice });
    });

    return rawData;
}

// Generate Dates and Raw Data
const numDays = 90; // Approximately 3 months
const startDate = '2023-01-01';
const datesArray = generateDates(startDate, numDays);
const rawData = generateRawData(datesArray);

const brickSize = 2; // Brick size set to 2 points

// Function to Generate Renko Bricks
function generateRenkoBricks(data, brickSize) {
    const bricks = [];
    if (data.length === 0) return bricks;

    let lastBrickClose = data[0].close;
    bricks.push({
        date: data[0].date,
        open: lastBrickClose,
        close: lastBrickClose,
        high: lastBrickClose,
        low: lastBrickClose,
        direction: 'neutral'
    });

    for (let i = 1; i < data.length; i++) {
        const price = data[i].close;
        let movement = price - lastBrickClose;

        while (Math.abs(movement) >= brickSize) {
            if (movement > 0) {
                // Up Brick
                bricks.push({
                    date: data[i].date,
                    open: lastBrickClose,
                    close: lastBrickClose + brickSize,
                    high: lastBrickClose + brickSize,
                    low: lastBrickClose,
                    direction: 'up'
                });
                lastBrickClose += brickSize;
                movement -= brickSize;
            } else {
                // Down Brick
                bricks.push({
                    date: data[i].date,
                    open: lastBrickClose,
                    close: lastBrickClose - brickSize,
                    high: lastBrickClose,
                    low: lastBrickClose - brickSize,
                    direction: 'down'
                });
                lastBrickClose -= brickSize;
                movement += brickSize;
            }
        }
        // Ignore movements less than brickSize
    }

    return bricks;
}

// Generate Renko Bricks
const renkoData = generateRenkoBricks(rawData, brickSize);

// Prepare Data for ECharts Candlestick
const renkoDates = renkoData.map(item => item.date);
const candlestickData = renkoData.map(item => [item.open, item.close, item.high, item.low]);

// ECharts Option Configuration with Improvements
const option = {
    title: {
        text: 'Renko Chart with 2-Point Brick Size',
        left: 'center',
        textStyle: {
            fontSize: 18,
            fontWeight: 'bold'
        }
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
        formatter: function (params) {
            const data = params[0].data;
            return `
                <strong>Date:</strong> ${params[0].name}<br/>
                <strong>Open:</strong> ${data[0]}<br/>
                <strong>Close:</strong> ${data[1]}<br/>
                <strong>High:</strong> ${data[2]}<br/>
                <strong>Low:</strong> ${data[3]}
            `;
        }
    },
    legend: {
        data: ['Renko'],
        top: '10%',
        left: 'center'
    },
    grid: {
        left: '10%',
        right: '10%',
        bottom: '15%',
        containLabel: true
    },
    dataZoom: [
        {
            type: 'inside',
            start: 0,
            end: 100
        },
        {
            show: true,
            type: 'slider',
            bottom: '5%',
            start: 0,
            end: 100
        }
    ],
    xAxis: {
        type: 'category',
        data: renkoDates,
        boundaryGap: true,
        axisLine: { onZero: false },
        splitLine: { show: false },
        axisTick: { alignWithLabel: true },
        axisLabel: {
            rotate: 45,
            formatter: function (value) {
                const dateParts = value.split('-');
                return `${dateParts[1]}-${dateParts[2]}`;
            }
        }
    },
    yAxis: {
        type: 'value',
        scale: true,
        splitArea: {
            show: true
        },
        axisLabel: {
            formatter: '{value}'
        }
    },
    series: [
        {
            name: 'Renko',
            type: 'candlestick',
            data: candlestickData,
            large: true,
            itemStyle: {
                color: '#0CF49B',    // Up color
                color0: '#FD1050',   // Down color
                borderColor: '#0CF49B',
                borderColor0: '#FD1050'
            },
            markLine: {
                symbol: 'none',
                data: [
                    {
                        yAxis: renkoData[renkoData.length - 1].close,
                        label: {
                            formatter: 'Last Close',
                            position: 'end'
                        },
                        lineStyle: {
                            type: 'dashed',
                            color: '#FF8C00'
                        }
                    }
                ]
            }
        }
    ]
};

return option;

[razonyang]

Hmm, I didn't read it. I don't have much experience with ECharts and D3. There are fewer things I can help with. Googling may help.

If ECharts doesn't meet your needs, you can create a module/shortcode yourself. It's as easy as you said. I don't have time to dive into the d3 documentation. I have no intention of implementing the d3 module.

[FuadEfendi]

As you mentioned, let's keep discussion open.

This collection looks amazing: https://observablehq.com/@fil?page=2

My current solution is this: import-raw-file.html shortcode:

{{ $file := .Get 0 }}
{{ (printf "%s%s" .Page.File.Dir $file) | readFile | safeHTML }}
{{.Inner}}

{{.Inner}} is "fake", Hugo enforced.

In index.md I use this:

{{< import-raw-file "d3-example.html" />}}

And d3-example.html contains DOM elements such as typical HTML tags (except <head> and <body> tags), <style>, <script src="https://d3js.org/d3.v7.min.js"></script>, h2/h3, and etc.; all building blocks for D3 except html, head, and body.

It works.

For comparison, ECharts consists from 45 items (files and folders); sophistication is needed, for example, to integrate with "light" and "dark" Hugo themes, layouts, putting JS at bottom of page, and etc.; but... 45 items. Not so easy.

If I can find a better solution, I'll contribute.

[FuadEfendi]

This is basic shortcode for JavaScript snippets:

<div class='svg'>
    <script>
      {{ .Inner | safeJS }}
    </script>
</div>

And this is example of use,

{{< d3js >}}

(function() {
    const width = 640;
    const height = 400;
    const div = document.createElement('div');
    const scriptElement = document.currentScript;
    scriptElement.parentNode.insertBefore(div, scriptElement);
    // Use "div" container to create D3.js visualizations inside it
})();

{{< /d3js >}}

And of course need to import this:

    <script src="https://d3js.org/d3.v7.min.js"></script>

Complete example:

---
title: D3.js iPhone Mock
# draft: true
---

## Hello iPhone! 

{{< d3js >}} 

(function() {
    const width = 200;
    const height = 400;

    // Select the script's parent node and append a div using D3
    const container = d3.select(document.currentScript.parentNode)
        .append('div')
        .style('display', 'inline-block')
        .style('margin', '20px'); // Optional styling

    // Create an SVG container within the div
    const svg = container.append('svg')
        .attr('width', width)
        .attr('height', height);

    // Draw the iPhone body with rounded corners
    svg.append('rect')
        .attr('x', 0)
        .attr('y', 0)
        .attr('width', width)
        .attr('height', height)
        .attr('rx', 30) // Rounded corners
        .attr('ry', 30)
        .attr('fill', '#000'); // Black color for the iPhone body

    // Draw the screen area
    svg.append('rect')
        .attr('x', 10)
        .attr('y', 50)
        .attr('width', width - 20)
        .attr('height', height - 100)
        .attr('fill', '#fff'); // White color for the screen

    // Add the "Hello World" text to the screen
    svg.append('text')
        .attr('x', width / 2)
        .attr('y', height / 2)
        .attr('text-anchor', 'middle') // Center the text horizontally
        .attr('dominant-baseline', 'middle') // Center the text vertically
        .attr('font-size', '16px')
        .attr('fill', '#000')
        .text('Hello World');

    // Draw the home button (for older iPhone models)
    svg.append('circle')
        .attr('cx', width / 2)
        .attr('cy', height - 30)
        .attr('r', 10)
        .attr('fill', '#444');

    // Optional: Add speaker and camera notch
    svg.append('rect')
        .attr('x', width / 2 - 30)
        .attr('y', 15)
        .attr('width', 60)
        .attr('height', 5)
        .attr('fill', '#333');

    svg.append('circle')
        .attr('cx', width / 2)
        .attr('cy', 30)
        .attr('r', 3)
        .attr('fill', '#333');
})();

{{< /d3js >}}

[FuadEfendi]

[FuadEfendi]

I decided to share here so I won't forget ;)
and also, I think it is nice snippet which we can use in other places (instead of randomly generated element IDs):

const div = document.createElement('div');
    const scriptElement = document.currentScript;
    scriptElement.parentNode.insertBefore(div, scriptElement);