Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource


Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource


Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.


Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.


                 <div class="svg-container">
 <div id="tag"></div>
<!--I wrote this python script to create the json

import bs4
import json
import urllib2
import re

req = urllib2.urlopen('')
html =
soup = bs4.BeautifulSoup(html)
[s.extract() for s in soup('noscript')]
[s.extract() for s in soup('script')]
[s.extract() for s in soup('style')]
[s.extract() for s in soup('link')]
[s.extract() for s in soup(text=True)]

body = soup.body

if body:
    json_string = ''
    def handle_element(node):
        global json_string

        json_string += '{"name" :"' + + '"'
        child_size = len(list(node.contents))
        children = node.contents
        if children:
            json_string += ',"children" : ['
            for i in range(child_size):
                if not isinstance(children[i], bs4.NavigableString):
                    if child_size > 1 and i < child_size - 1:
                        json_string += ','
            json_string += ']}'
            json_string += '}'
    j = json.loads(json_string)
    f = open('data.json', 'w');



                * {
  margin: 0;
  padding: 0;
body {
  background: #000;
  font-family: 'Open-Sans',sans-serif;
#tag {
  color: white;
  position: absolute;
  display: none;
  opacity: .85;
  border:1px solid white;
  padding:3px 6px;
.svg-container {
  width: 100%;
  overflow: visible;
  margin-top: 50px;
  position: relative;
.node {
  cursor: pointer;
.edge {
  fill: none;
  stroke: #657b83;
  stroke-width: .75px;


                var jsonDom = {"name": "body", "children": [{"name": "div", "children": [{"name": "div"}, {"name": "div", "children": [{"name": "div"}, {"name": "div", "children": [{"name": "div", "children": [{"name": "div", "children": [{"name": "ul", "children": [{"name": "li", "children": [{"name": "a", "children": [{"name": "i"}]}]}]}, {"name": "div", "children": [{"name": "form", "children": [{"name": "label"}, {"name": "input"}, {"name": "span", "children": [{"name": "button", "children": [{"name": "span"}]}]}, {"name": "input"}, {"name": "div", "children": [{"name": "div", "children": [{"name": "div"}, {"name": "div"}]}, {"name": "div", "children": [{"name": "ul", "children": [{"name": "li", "children": [{"name": "a", "children": [{"name": "i"}]}]}]}, {"name": "ul", "children": [{"name": "li", "children": [{"name": "a", "children": [{"name": "i"}]}]}]}, {"name": "div", "children": [{"name": "ul", "children": [{"name": "li", "children": [{"name": "a", "children": [{"name": "img"}, {"name": "span"}, {"name": "i"}, {"name": "span", "children": [{"name": "s"}, {"name": "b"}]}]}]}, {"name": "li", "children": [{"name": "a"}]}]}]}]}]}]}, {"name": "ul", "children": [{"name": "li", "children": [{"name": "a", "children": [{"name": "small"}, {"name": "span"}, {"name": "b"}]}, {"name": "ul", "children": [{"name": "li", "children": [{"name": "span"}, {"name": "span"}]}, {"name": "li", "children": [{"name": "a"}]}, {"name": "li", "children": [{"name": "a"}]}, {"name": "li", "children": [{"name": "a"}]}, {"name": "li", "children": [{"name": "a"}]}, {"name": "li", "children": [{"name": "a"}]}, {"name": "li", "children": [{"name": "a"}]}, {"name": "li", "children": [{"name": "a"}]}, {"name": "li", "children": [{"name": "a"}]}, {"name": "li", "children": [{"name": "a"}]}, {"name": "li", "children": [{"name": "a"}]}, {"name": "li", "children": [{"name": "a"}]}, {"name": "li", "children": [{"name": "a"}]}, {"name": "li", "children": [{"name": "a"}]}, {"name": "li", "children": [{"name": "a"}]}, {"name": "li", "children": [{"name": "a"}]}, {"name": "li", "children": [{"name": "a"}]}, {"name": "li", "children": [{"name": "a"}]}, {"name": "li", "children": [{"name": "a"}]}, {"name": "li", "children": [{"name": "a"}]}, {"name": "li", "children": [{"name": "a"}]}, {"name": "li", "children": [{"name": "a"}]}, {"name": "li", "children": [{"name": "a"}]}, {"name": "li", "children": [{"name": "a"}]}, {"name": "li", "children": [{"name": "a"}]}, {"name": "li", "children": [{"name": "a"}]}, {"name": "li", "children": [{"name": "a"}]}, {"name": "li", "children": [{"name": "a"}]}, {"name": "li", "children": [{"name": "a"}]}, {"name": "li", "children": [{"name": "a"}]}, {"name": "li", "children": [{"name": "a"}]}, {"name": "li", "children": [{"name": "a"}]}, {"name": "li", "children": [{"name": "a"}]}]}, {"name": "div", "children": [{"name": "form", "children": [{"name": "input"}, {"name": "input"}, {"name": "input"}]}]}]}]}, {"name": "ul", "children": [{"name": "li", "children": [{"name": "a", "children": [{"name": "small"}, {"name": "span"}]}, {"name": "a", "children": [{"name": "small"}, {"name": "span"}]}, {"name": "ul", "children": [{"name": "li", "children": [{"name": "span"}, {"name": "span"}]}, {"name": "li", "children": [{"name": "form", "children": [{"name": "fieldset", "children": [{"name": "label", "children": [{"name": "span"}, {"name": "input"}]}, {"name": "label", "children": [{"name": "span"}, {"name": "input"}]}]}, {"name": "fieldset", "children": [{"name": "label", "children": [{"name": "input"}, {"name": "span"}]}, {"name": "button"}]}, {"name": "input"}, {"name": "input"}, {"name": "input"}, {"name": "div"}, {"name": "p", "children": [{"name": "a"}, {"name": "br"}, {"name": "a"}]}]}]}]}]}]}]}, {"name": "a", "children": [{"name": "i"}]}]}]}]}]}, {"name": "div", "children": [{"name": "div", "children": [{"name": "div", "children": [{"name": "div", "children": [{"name": "h3"}, {"name": "p"}]}, {"name": "div", "children": [{"name": "img"}]}, {"name": "div", "children": [{"name": "div", "children": [{"name": "div", "children": [{"name": "h1"}, {"name": "p"}]}]}, {"name": "div", "children": [{"name": "form", "children": [{"name": "div", "children": [{"name": "input"}, {"name": "label"}]}, {"name": "table", "children": [{"name": "tbody", "children": [{"name": "tr", "children": [{"name": "td", "children": [{"name": "div", "children": [{"name": "input"}, {"name": "label"}]}]}, {"name": "td", "children": [{"name": "button"}]}]}]}]}, {"name": "div", "children": [{"name": "label", "children": [{"name": "input"}, {"name": "span"}]}, {"name": "span"}, {"name": "a"}]}, {"name": "input"}, {"name": "input"}, {"name": "input"}]}]}, {"name": "div", "children": [{"name": "h2", "children": [{"name": "strong"}]}, {"name": "form", "children": [{"name": "div", "children": [{"name": "input"}, {"name": "label"}]}, {"name": "div", "children": [{"name": "input"}, {"name": "label"}]}, {"name": "div", "children": [{"name": "input"}, {"name": "label"}]}, {"name": "input"}, {"name": "input"}, {"name": "button"}]}]}]}, {"name": "div", "children": [{"name": "ul", "children": [{"name": "li", "children": [{"name": "a"}, {"name": "span"}]}, {"name": "li", "children": [{"name": "a"}, {"name": "span"}]}, {"name": "li", "children": [{"name": "a"}, {"name": "span"}]}, {"name": "li", "children": [{"name": "a"}, {"name": "span"}]}, {"name": "li", "children": [{"name": "a"}, {"name": "span"}]}, {"name": "li", "children": [{"name": "a"}, {"name": "span"}]}, {"name": "li", "children": [{"name": "a"}, {"name": "span"}]}, {"name": "li", "children": [{"name": "a"}, {"name": "span"}]}, {"name": "li", "children": [{"name": "a"}, {"name": "span"}]}, {"name": "li", "children": [{"name": "a"}, {"name": "span"}]}, {"name": "li", "children": [{"name": "a"}, {"name": "span"}]}, {"name": "li", "children": [{"name": "a"}, {"name": "span"}]}, {"name": "li", "children": [{"name": "a"}, {"name": "span"}]}, {"name": "li", "children": [{"name": "span"}]}]}]}]}]}]}]}, {"name": "div", "children": [{"name": "div", "children": [{"name": "div", "children": [{"name": "span"}, {"name": "a"}]}]}]}, {"name": "div"}, {"name": "div", "children": [{"name": "div"}, {"name": "div", "children": [{"name": "div", "children": [{"name": "a", "children": [{"name": "i"}]}, {"name": "h2"}]}, {"name": "div"}, {"name": "div", "children": [{"name": "span"}]}, {"name": "div", "children": [{"name": "span"}]}, {"name": "div"}]}]}, {"name": "div"}, {"name": "div", "children": [{"name": "div"}, {"name": "iframe"}]}, {"name": "div", "children": [{"name": "div", "children": [{"name": "div", "children": [{"name": "button", "children": [{"name": "i", "children": [{"name": "span"}]}]}, {"name": "div", "children": [{"name": "h3"}]}, {"name": "div", "children": [{"name": "div", "children": [{"name": "form", "children": [{"name": "input"}, {"name": "ul", "children": [{"name": "li", "children": [{"name": "img"}, {"name": "strong"}, {"name": "span", "children": [{"name": "s"}, {"name": "b"}]}]}]}]}]}]}]}]}]}, {"name": "div", "children": [{"name": "div"}, {"name": "div", "children": [{"name": "div", "children": [{"name": "button", "children": [{"name": "i", "children": [{"name": "span"}]}]}, {"name": "div", "children": [{"name": "h3"}]}, {"name": "div"}, {"name": "div", "children": [{"name": "button"}, {"name": "button"}]}]}]}]}, {"name": "div", "children": [{"name": "div"}, {"name": "div", "children": [{"name": "div", "children": [{"name": "button", "children": [{"name": "i", "children": [{"name": "span"}]}]}, {"name": "div", "children": [{"name": "h3"}]}, {"name": "div"}, {"name": "div", "children": [{"name": "button"}, {"name": "button"}]}]}]}]}, {"name": "div", "children": [{"name": "div"}, {"name": "div", "children": [{"name": "div", "children": [{"name": "button", "children": [{"name": "i", "children": [{"name": "span"}]}]}, {"name": "div", "children": [{"name": "h3"}]}, {"name": "div", "children": [{"name": "div", "children": [{"name": "table", "children": [{"name": "tbody", "children": [{"name": "tr", "children": [{"name": "td", "children": [{"name": "b"}]}, {"name": "td"}]}, {"name": "tr", "children": [{"name": "td", "children": [{"name": "b"}, {"name": "b"}]}, {"name": "td"}]}, {"name": "tr", "children": [{"name": "td", "children": [{"name": "b"}]}, {"name": "td"}]}, {"name": "tr", "children": [{"name": "td", "children": [{"name": "b"}]}, {"name": "td"}]}, {"name": "tr", "children": [{"name": "td", "children": [{"name": "b"}]}, {"name": "td"}]}, {"name": "tr", "children": [{"name": "td", "children": [{"name": "b"}]}, {"name": "td"}]}, {"name": "tr", "children": [{"name": "td", "children": [{"name": "b"}]}, {"name": "td"}]}, {"name": "tr", "children": [{"name": "td", "children": [{"name": "b"}]}, {"name": "td"}]}]}]}]}]}]}]}]}, {"name": "div", "children": [{"name": "ul", "children": [{"name": "li", "children": [{"name": "span"}, {"name": "span"}]}, {"name": "li", "children": [{"name": "h2"}, {"name": "p", "children": [{"name": "a"}]}, {"name": "div", "children": [{"name": "button"}, {"name": "button"}]}]}]}]}, {"name": "div", "children": [{"name": "ul", "children": [{"name": "li", "children": [{"name": "span"}, {"name": "span"}]}, {"name": "li", "children": [{"name": "input"}, {"name": "i"}]}, {"name": "li"}, {"name": "li", "children": [{"name": "i"}]}]}]}, {"name": "div", "children": [{"name": "div"}, {"name": "div", "children": [{"name": "div", "children": [{"name": "button", "children": [{"name": "i", "children": [{"name": "span"}]}]}, {"name": "div", "children": [{"name": "h3"}]}, {"name": "div"}, {"name": "div", "children": [{"name": "img"}]}]}]}]}, {"name": "div", "children": [{"name": "div"}, {"name": "div", "children": [{"name": "div", "children": [{"name": "button", "children": [{"name": "i", "children": [{"name": "span"}]}]}, {"name": "div", "children": [{"name": "h3"}]}, {"name": "div", "children": [{"name": "div"}, {"name": "span"}]}]}]}]}, {"name": "div", "children": [{"name": "div"}, {"name": "div", "children": [{"name": "div", "children": [{"name": "button", "children": [{"name": "i", "children": [{"name": "span"}]}]}, {"name": "div", "children": [{"name": "h3"}]}, {"name": "div", "children": [{"name": "div", "children": [{"name": "div", "children": [{"name": "label"}, {"name": "input"}]}, {"name": "div", "children": [{"name": "label"}, {"name": "span"}]}, {"name": "hr"}, {"name": "div", "children": [{"name": "label"}, {"name": "textarea"}, {"name": "span"}]}, {"name": "hr"}, {"name": "div", "children": [{"name": "label"}, {"name": "div", "children": [{"name": "label", "children": [{"name": "input"}, {"name": "b"}]}, {"name": "label", "children": [{"name": "input"}, {"name": "b"}]}]}]}, {"name": "hr"}, {"name": "div", "children": [{"name": "div"}]}]}]}]}]}]}, {"name": "div", "children": [{"name": "div"}, {"name": "div", "children": [{"name": "div", "children": [{"name": "button", "children": [{"name": "i", "children": [{"name": "span"}]}]}, {"name": "div", "children": [{"name": "h3"}]}, {"name": "div", "children": [{"name": "div"}, {"name": "div", "children": [{"name": "img"}]}, {"name": "div"}]}]}]}]}, {"name": "div", "children": [{"name": "div"}, {"name": "div", "children": [{"name": "div", "children": [{"name": "button", "children": [{"name": "i", "children": [{"name": "span"}]}]}, {"name": "div", "children": [{"name": "h3"}]}, {"name": "div", "children": [{"name": "p"}]}, {"name": "div", "children": [{"name": "button"}, {"name": "button"}]}]}]}]}, {"name": "div", "children": [{"name": "div", "children": [{"name": "div"}, {"name": "div", "children": [{"name": "div", "children": [{"name": "button", "children": [{"name": "i", "children": [{"name": "span"}]}]}, {"name": "div", "children": [{"name": "h3"}, {"name": "h3"}]}, {"name": "div", "children": [{"name": "form", "children": [{"name": "div", "children": [{"name": "input"}, {"name": "span"}]}, {"name": "div", "children": [{"name": "input"}, {"name": "span"}]}, {"name": "div", "children": [{"name": "input"}, {"name": "span"}]}, {"name": "input"}, {"name": "input"}, {"name": "input"}, {"name": "input"}]}]}, {"name": "div", "children": [{"name": "form", "children": [{"name": "fieldset", "children": [{"name": "div", "children": [{"name": "span"}, {"name": "input"}, {"name": "p", "children": [{"name": "a"}]}]}, {"name": "div", "children": [{"name": "span"}, {"name": "input"}, {"name": "p", "children": [{"name": "a"}]}]}, {"name": "input"}]}, {"name": "div", "children": [{"name": "input"}, {"name": "input"}, {"name": "input"}, {"name": "button"}, {"name": "fieldset", "children": [{"name": "label", "children": [{"name": "input"}]}]}]}, {"name": "div"}, {"name": "p", "children": [{"name": "a"}, {"name": "br"}, {"name": "a"}]}]}, {"name": "div", "children": [{"name": "h2"}, {"name": "form", "children": [{"name": "input"}, {"name": "input"}, {"name": "button"}]}]}]}]}]}]}]}, {"name": "div", "children": [{"name": "div"}, {"name": "div", "children": [{"name": "div", "children": [{"name": "button", "children": [{"name": "i", "children": [{"name": "span"}]}]}, {"name": "div", "children": [{"name": "h3"}]}, {"name": "div", "children": [{"name": "table", "children": [{"name": "thead", "children": [{"name": "tr", "children": [{"name": "th"}, {"name": "th"}, {"name": "th"}]}]}, {"name": "tbody", "children": [{"name": "tr", "children": [{"name": "td"}, {"name": "td"}, {"name": "td"}]}, {"name": "tr", "children": [{"name": "td"}, {"name": "td"}, {"name": "td"}]}, {"name": "tr", "children": [{"name": "td"}, {"name": "td"}, {"name": "td"}]}, {"name": "tr", "children": [{"name": "td"}, {"name": "td"}, {"name": "td"}]}, {"name": "tr", "children": [{"name": "td"}, {"name": "td"}, {"name": "td"}]}, {"name": "tr", "children": [{"name": "td"}, {"name": "td"}, {"name": "td"}]}, {"name": "tr", "children": [{"name": "td"}, {"name": "td"}, {"name": "td"}]}, {"name": "tr", "children": [{"name": "td"}, {"name": "td"}, {"name": "td"}]}, {"name": "tr", "children": [{"name": "td"}, {"name": "td"}, {"name": "td"}]}, {"name": "tr", "children": [{"name": "td"}, {"name": "td"}]}]}, {"name": "tfoot", "children": [{"name": "tr", "children": [{"name": "td", "children": [{"name": "a"}]}]}]}]}]}]}]}]}]};

      var diameter = 900;

  		var tree = d3.layout
			.size([360, diameter / 2 - 100]);
			var diagonal = d3.svg
			.projection(function(d) {
				return [d.y, d.x / 180 * Math.PI];

			var rotate = d3.scale
			.domain([0, 1])
			.range([0, 359]);

			var col = d3.scale.category20c();

			var svg ='.svg-container')
			.append("svg").attr("width", 1000)
			.attr("height", diameter)
			.attr("transform", "translate(" + 350 + "," + 275 + ")rotate(" + rotate(60) + ")");

			//d3.json(jsonDom, function(error, root) {
			var nodes = tree.nodes(jsonDom);
			var edges = tree.links(nodes);

			var link = svg.selectAll(".edge")
			.attr("class", "edge")
			.attr("d", diagonal)
			.style("opacity", 0);

			var node = svg.selectAll(".node")
			.attr("class", "node");

			var yMax = d3.max(nodes, function(d) {
					return d.y

			var radiusScale = d3.scale
			.domain([0, yMax])
			.range([4, 1]);

			node.on('mouseover', function(e) {
				var tag = this.textContent;
				var output = document.getElementById("tag");
				var x =[0].x;
				var y =[0].y;

				output.innerHTML = tag; = d3.event.layerY - 30 + "px"; = d3.event.layerX + 5 + "px"; = "block";
			}).on('mouseout', function() {
				var output = document.getElementById("tag"); = "none";

			.attr("r", function(d) {
				return (radiusScale(d.y));
			}).style("fill", function(d) {
				return col(;

			.attr("transform", function(d) {
				return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")";

			.text(function(d) {
				"fill" : "#fff",
				"opacity" : "0"

			.style("opacity", .8);