Custom d3 chart in Framework

I am new to Framework and I can’t seem to find the way to create a custom d3 chart in a Framework project. Is there a general code structure to do this (i.e. create the svg with d3 and display in the .md file)?

I typically create a function in a JavaScript block that returns the svg node and then just display it inline with ${chart()} like this:

# Example


function chart() {
  // Create the SVG container.
  const svg = d3.create("svg")
      .attr("width", width)
      .attr("height", height)
      .attr("viewBox", [0, 0, width, height])
      .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;")
      .attr("text-anchor", "middle");

      (rest of the d3 code)...

  return svg.node();
```  // end

There’s an example in the Framework docs:

1 Like

Thanks! I could make it work easily. That was very clear.