0

Anyone can help direct me about how to run d3.js code to draw graph in org-babel code block?

d3.js is a javascript library but it need to output svg to html body. I saw markdown language support it with some library so I wish org-mode should support it as well.

e.g. below html call d3.js library to draw a rectangle and a circle

<!DOCTYPE html>
<html>
  <head>
    <script src = "https://d3js.org/d3.v4.min.js"></script>
  </head>
  <body>
    <script>       
      var width = 200
      var height = 100
      d3.select("svg").remove()
      var svg = d3.select("body").append("svg")
      .attr("width",width)
      .attr("height",height)
      .style("border","2px solid red")

      svg.append("rect")
    .attr("x",50)
    .attr("y",50)
    .attr("width",50)
    .attr("height",30)
    .attr("fill","none")
    .attr("stroke","red")
      
      svg.append("circle")
    .attr("cx",50)
    .attr("cy",50)
    .attr("r",20)
    .attr("fill","none")
    .attr("stroke","red")
    </script>
  </body>
</html>

I would like to add similar code into a org-babel, then press C-c C-c to draw the output

enter image description here

2
  • Do you have a script that actually does what you describe (outside of Org babel)? If so, add it to your question. If not, that's the first step that you need to do.
    – NickD
    Oct 26 at 17:24
  • @NickD Yes, one demo html with d3.js library drawing added to my question!
    – beetlej
    Oct 27 at 0:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.