A Pen by moklick.

index.html

 <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('http://twitter.com')
html = req.read()
            
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" :"' + node.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):
                    handle_element(children[i])
                    if child_size > 1 and i < child_size - 1:
                        json_string += ','
                        
            json_string += ']}'
        else:
            json_string += '}'
        
    
    handle_element(body)
    
    j = json.loads(json_string)
    
    f = open('data.json', 'w');
    f.write(json.dumps(j))
    f.close()

-->

script.js

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
			.tree()
			.size([360, diameter / 2 - 100]);
			
			var diagonal = d3.svg
			.diagonal
			.radial()
			.projection(function(d) {
				return [d.y, d.x / 180 * Math.PI];
			});

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

			var col = d3.scale.category20c();

			var svg = d3.select('.svg-container')
			.append("svg").attr("width", 1000)
			.attr("height", diameter)
			.append("g")
			.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")
			.data(edges)
			.enter()
			.append("path")
			.attr("class", "edge")
			.attr("d", diagonal)
			.style("opacity", 0);

			var node = svg.selectAll(".node")
			.data(nodes)
			.enter()
			.append("g")
			.attr("class", "node");

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

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

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

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

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

			node.transition()
			.duration(2000)
			.attr("transform", function(d) {
				return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")";
			});

			node.append("text")
			.text(function(d) {
				return d.name;
			}).style({
				"fill" : "#fff",
				"opacity" : "0"
			});

			svg.selectAll('.edge')
			.transition()
			.duration(2500)
			.delay(1500)
			.style("opacity", .8);

style.css

* {
  margin: 0;
  padding: 0;
}
body {
  background: #000;
  font-family: 'Open-Sans',sans-serif;
}
#tag {
  color: white;
  position: absolute;
  display: none;
  opacity: .5;
  border-radius:3px;
  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;
}

SVG-Dom-Visualization.markdown

SVG Dom Visualization

This visualization represents the DOM of twitter. The great library d3js.org helps me to visualize the data in form of a tree layout. You can hover the nodes to check the type of tag. I added the python script I wrote, to produce the json

A Pen by moklick on CodePen.

License.