[Chartjs]-Develop Actigram with javascript (D3, chart, plotly…)

by

0👍

You can use svg g tag and add groups:

const signalData = [
    {
        name: "Signal 1",
        data: [1, 2, 3, 4, 5, 6, 7],
    },
    {
        name: "Signal 2",
        data: [2, 3, 1, 4, 5, 1, 3],
    },
    {
        name: "Signal 3",
        data: [1, 7, 2, 6, 3, 5, 4],
    },
];

const color = d3.scaleOrdinal(d3.schemeCategory10);

const line = d3.line()
    .x((d, i) => i * 50)
    .y(d => 150 - (15 * d));

const svg = d3.select("#plot");
svg.selectAll("g")
    .data(signalData)
    .enter()
    .append("g")
    .each(function (d, i) {
        draw(d3.select(this), d, i);
    });

function draw(group, data, index) {
    group.append("text")
        .attr("x", 20 + index * 90)
        .attr("y", 20)
        .text(d => d.name);

    group.append("path")
        .datum(data.data)
        .attr("d", line)
        .attr("stroke", color(index))
        .attr("stroke-width", 2)
        .attr("fill", "none");
}
    svg {
        border: solid 2px red;
    }
<script src="https://d3js.org/d3.v7.min.js"></script>

<div id="plotsHere"><svg id="plot"></svg> </div>

Leave a comment