Custom d3 chart in Framework

New To Observable
1

Hi!
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)?
Thanks!

2

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

${chart()}

```js
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
3

There’s an example in the Framework docs:

https://observablehq.com/framework/lib/d3

1 Like
4

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

2 Likes