Can Observable return the full HTML markup?

Community Help
1

If I write this in VS Code (a notebook)

data1 = [[0, 80], [50, 20], [100, 50], [150, 30],
  [200, 40], [250, 90], [400, 20], [450, 70], [500, 60]];

line1 = d3.line()(data1)

const svgns = 'http://www.w3.org/2000/svg'
  let svg = d3.select('#here')
    .append('svg')
    .attr('xmlns', svgns)
    .attr("viewBox", "0 0 1200 100");

svg
  .append('path')
  .attr('d',line1)
  .attr('stroke','black')
  .attr('fill','none')

The browser shows me the markup

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 100">
  <path d="M0,80L50,20L100,50L150,30L200,40L250,90L400,20L450,70L500,60" stroke="black" fill="none" />
</svg>

How can I ask Observable to return the completed HTML markup for me to inspect?

2

You’ll need to return something from your cell. Observable cells are similar to arrow functions. With just one expression you can leave off the return statement, but if you have curly braces around the contents, it needs a return.

3

@mythmon thanks.

But how do I implement this knowledge in my case and have the markup returned? I am new to observable.

4

You should name the cell that contains the DIV that contains your SVG. You can then call

my_cell.querySelector('svg')

To get the SVG element. If you want to see the textual form of that SVG, you could do

my_cell.querySelector('svg').outerHTML

Here’s an implementation:

Note that creating an HTML cell containing a DIV with an ID and then selecting that DIV by ID is not recommended.

1 Like
5

Awesome - that’s what I need. Thanks !!!

1 Like