JSFiddle - React, Tailwind, and code Playground

by emepyc

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="mydiv"></div>

JavaScript

var vis = d3.select("body")
    .append("svg")
    .attr("version", "1.1")
    .attr("width", 500)
    .attr("height", 500);

var g = vis
    .append("g");

g
    .append("rect")
    .attr("x", 100)
    .attr("y", 100)
    .attr("width", 50)
    .attr("height", 20)
    .attr("fill", "orange");

var object = g
    .append("foreignObject")
    .attr("width", "100%")
    .attr("height", "100%")
    .append("xhtml:body")

object
    .append("p")
    .text("Hello, world");
var newsvg = object
    .append("svg")
    .attr("width",100)
    .attr("height",50);

newsvg
    .append("circle")
    .attr("cx", 10)
    .attr("cy", 10)
    .attr("r",10)
    .attr("fill","red");