Skip to content

Instantly share code, notes, and snippets.

@vkuchinov

vkuchinov/README.md

Last active July 25, 2018 11:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save vkuchinov/31883c260886b53e3e0b55f1c3318570 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save vkuchinov/31883c260886b53e3e0b55f1c3318570 to your computer and use it in GitHub Desktop.
Download ZIP
D3.JS Multi-Levelled [Zoomable] Wordcloud
Raw
README.md
Raw
biology.json
[
{
"tag": "Bacteria",
"description": "is a type of biological cell",
"children": [
{
"tag": "Acidobacteria",
"description": "is a subphylum of bacteria",
"children": [
{
"tag": "Acidobacteria",
"description": "a family of Acidobacteria",
"children": null
},
{
"tag": "Blastocatellia",
"description": "another family of Acidobacteria",
"children": null
},
{
"tag": "Holophagae",
"description": "third family of Acidobacteria",
"children": null
}
]
},
{
"tag": "Chlamydiae",
"description": "are bacterial phylum",
"children": [
{
"tag": "Chlamydiales",
"description": "the bacterial order",
"children": null
},
{
"tag": "Parachlamydiales",
"description": "is a family of bacteria in the order Chlamydiales",
"children": [
{
"tag": "Parachlamydiaceae",
"description": "none",
"children": null
},
{
"tag": "Simkaniaceae",
"description": "none",
"children": null
},
{
"tag": "Waddliaceae",
"description": "none",
"children": null
},
{
"tag": "Piscichlamydia",
"description": "none",
"children": null
},
{
"tag": "Rhabdochlamydiaceae",
"description": "none",
"children": null
}
]
}
]
},
{
"tag": "Deinococcus-Thermus",
"description": "is a phylum of bacteria that are highly resistant to environmental hazards",
"children": [
{
"tag": "Deinococcales",
"description": "these bacteria have thick cell walls that give them gram-positive stains",
"children": null
},
{
"tag": "Thermales",
"description": "is an order of bacteria belonging to the Deinococcus–Thermus phylum",
"children": null
}
]
},
{
"tag": "Firmicutes",
"description": "are a phylum of bacteria, most of which have Gram-positive cell wall structure",
"children": [
{
"tag": "Bacilli",
"description": "refers to a taxonomic class of bacteria",
"children": [
{
"tag": "Bacillales",
"description": "are a family of Gram-positive, heterotrophic, rod-shaped bacteria",
"children": null
},
{
"tag": "Lactobacillales",
"description": "lactic acid bacteria (LAB)",
"children": null
},
{
"tag": "Mollicutes",
"description": "Mollicutes is a subclass of bacteria[1] distinguished by the absence of a cell wall",
"children": null
},
{
"tag": "Erysipelotrichia",
"description": "are a subclass of bacteria of the phylum Firmicutes",
"children": null
}
]
},
{
"tag": "Clostridia",
"description": "are a highly polyphyletic class of Firmicutes",
"children": [
{
"tag": "Clostridiales",
"description": "defined by the taxonomic outline of Bergey's Manual of Systematic Bacteriology",
"children": null
},
{
"tag": "Halanaerobiales",
"description": "are an order of bacteria placed within the class Clostridia",
"children": null
},
{
"tag": "Natranaerobiales",
"description": "are an order of bacteria placed within the class Clostridia",
"children": null
},
{
"tag": "Thermoanaerobacterales",
"description": "are a polyphyletic order of bacteria placed within the polyphyletic class Clostridia",
"children": null
},
{
"tag": "Negativicutes",
"description": "are a subclass of firmicute bacteria, whose members have a peculiar cell wall with a lipopolysaccharide outer membrane",
"children": null
}
]
},
{
"tag": "Thermolithobacteria",
"description": "is a class of rod-shaped Gram-positive bacteria within phylum Firmicutes",
"children": null
}
]
},
{
"tag": "Nitrospirae",
"description": "is a phylum of bacteria. It contains only one class, Nitrospira, which itself contains one order (Nitrospirales) and one family (Nitrospiraceae)",
"children": [
{
"tag": "Magnetobacterium",
"description": "Spring et al. 1993",
"children": null
},
{
"tag": "Magnetoovum",
"description": "Lefevre et al. 2011",
"children": null
},
{
"tag": "Leptospirillum",
"description": "(ex Markosyan 1972) Hippe 2000",
"children": null
},
{
"tag": "Nitrospira",
"description": "Watson et al. 1986",
"children": null
}
]
},
{
"tag": "Tenericutes",
"description": "(tener cutis: soft skin) is a phylum of bacteria that contains the class Mollicutes",
"children": [
{
"tag": "Mollicutes",
"description": "The word 'Mollicutes' is derived from the Latin mollis (meaning 'soft' or 'pliable')",
"children": [
{
"tag": "Acholeplasmatales",
"description": "The Acholeplasmatales are an order in the class Mollicutes",
"children": null
},
{
"tag": "Anaeroplasmatales",
"description": "Anaeroplasmatales is an order of mollicute bacteria which are generally found in the rumens of cattle and sheep",
"children": null
},
{
"tag": "Entomoplasmatales",
"description": "The genus Spiroplasma is part of this order",
"children": null
},
{
"tag": "Haloplasmatales",
"description": "is a halophilic, cell wall-less bacterium",
"children": null
},
{
"tag": "Mycoplasmatales",
"description": "is a family of bacteria in the order Mycoplasmatales",
"children": null
}
]
}
]
}
]
},
{
"tag": "Archaea",
"description": "a domain of single-celled microorganisms",
"children": [
{
"tag": "Euryarchaeota",
"description": "is a phylum of archaea",
"children": [
{
"tag": "Methanopyri",
"description": "are a class of the Euryarchaeota",
"children": null
},
{
"tag": "Methanococci",
"description": "are a class of the Euryarchaeota",
"children": null
},
{
"tag": "Eurythermea",
"description": "are a class of the Euryarchaeota",
"children": null
},
{
"tag": "Neobacteria",
"description": "iare a class of the Euryarchaeota",
"children": null
}
]
},
{
"tag": "DPANN",
"description": "Diapherotrites, Parvarchaeota, Aenigmarchaeota, Nanoarchaeota, Nanohaloarchaea",
"children": [
{
"tag": "ARMAN",
"description": "Archaeal Richmond Mine acidophilic nanoorganisms (ARMAN)",
"children": null
},
{
"tag": "Diapherotrites",
"description": "Rinke et al. 2013",
"children": null
},
{
"tag": "Nanohaloarchaeota",
"description": "Rinke et al. 2013",
"children": null
},
{
"tag": "Woesearchaeota",
"description": "Rinke et al. 2015",
"children": null
}
]
},
{
"tag": "Proteoarchaeota",
"description": "Petitjean et al. 2014",
"children": [
{
"tag": "TACK",
"description": "are a proposed archaeal kingdom",
"children": [
{
"tag": "Aigarchaeota",
"description": "Nunoura et al. 2011",
"children": null
},
{
"tag": "Crenarchaeota",
"description": "Garrity & Holt 2002",
"children": null
},
{
"tag": "Korarchaeota",
"description": "Barns et al. 1996",
"children": null
}
]
},
{
"tag": "Asgard",
"description": "Katarzyna Zaremba-Niedzwiedzka et al. 2017",
"children": [
{
"tag": "Lokiarchaeota",
"description": "Spang et al. 2015",
"children": null
},
{
"tag": "Thorarchaeota",
"description": "Seitz et al. 2016",
"children": null
},
{
"tag": "Odinarchaeota",
"description": "Katarzyna Zaremba-Niedzwiedzka et al. 2017",
"children": null
},
{
"tag": "Heimdallarchaeota",
"description": "Katarzyna Zaremba-Niedzwiedzka et al. 2017",
"children": null
}
]
}
]
}
]
},
{
"tag": "Protozoa",
"description": "is an informal term for single-celled eukaryotes",
"children": null
},
{
"tag": "Chromista",
"description": "is an eukaryotic kingdom, probably polyphyletic",
"children": [
{
"tag": "Corbihelia",
"description": "is a phylum of eukaryotes",
"children": null
},
{
"tag": "Centroheliozoa",
"description": "are a large group of heliozoan protists",
"children": [
{
"tag": "Raphidiophryidae",
"description": "s a family of mostly freshwater centrohelids",
"children": null
},
{
"tag": "Marophryidae",
"description": "Cavalier-Smith 1993",
"children": null
},
{
"tag": "Oxnerellidae",
"description": "Cavalier-Smith 1993",
"children": null
},
{
"tag": "Choanocystidae",
"description": "Cavalier-Smith 1993",
"children": null
}
]
},
{
"tag": "Haptophyta",
"description": "are a Division (botany) of algae",
"children": [
{
"tag": "Rappephyceae",
"description": "Hibberd 1976 sensu",
"children": null
},
{
"tag": "Pavlovophyceae",
"description": "Ruggerio et al. 2015",
"children": null
},
{
"tag": "Prymnesiophyceae",
"description": "is a haptophyte class",
"children": [
{
"tag": "Discoasterales",
"description": "Cavalier-Smith, 1993",
"children": null
},
{
"tag": "Isochrysidales",
"description": "Cavalier-Smith, 1993",
"children": null
},
{
"tag": "Eiffellithales",
"description": "Rothmaler, 1951",
"children": null
},
{
"tag": "Syracosphaerales",
"description": "Rothmaler, 1954",
"children": null
}
]
}
]
},
{
"tag": "Retaria",
"description": "is a clade within the supergroup Rhizaria",
"children": [
{
"tag": "Foraminifera",
"description": "are members of a phylum or class of amoeboid protists characterized by streaming granular ectoplasm",
"children": null
},
{
"tag": "Radiolaria",
"description": "are protozoa of diameter 0.1–0.2 mm that produce intricate mineral skeletons",
"children": null
}
]
},
{
"tag": "Placidozoa",
"description": "is a recently created non photosynthetic lineage of Heterokonts",
"children": [
{
"tag": "Placididea",
"description": "Nakayama & Inouye 2002",
"children": null
},
{
"tag": "Nanomonadea",
"description": "Cavalier-Smith 2013",
"children": null
},
{
"tag": "Opalomonadea",
"description": "Wenyon 1926 emend. Cavalier-Smith 1996 stat. n. 2006",
"children": null
},
{
"tag": "Opalinata",
"description": "Claus 1874",
"children": [
{
"tag": "Blastocystea",
"description": "Claus 1874",
"children": null
},
{
"tag": "Opalinea",
"description": "Claus 1874",
"children": null
}
]
}
]
},
{
"tag": "Pirsonea",
"description": "is a non photosynthetic lineage of Heterokonts",
"children": null
},
{
"tag": "Ochrophyta",
"description": "is a group of mostly photosynthetic heterokonts",
"children": [
{
"tag": "Bolidophyceae",
"description": "Cavalier-Smith 2006",
"children": null
},
{
"tag": "Chrysomerophyceae",
"description": "Cavalier-Smith 2008",
"children": null
},
{
"tag": "Eustigmatophyceae",
"description": "Hibberd & Leedale 1971",
"children": null
},
{
"tag": "Dictyochophyceae",
"description": "Silva 1980 s.l.",
"children": null
},
{
"tag": "Pinguiophyceae",
"description": "Kawachi et al. 2002",
"children": null
},
{
"tag": "Raphidophyceae",
"description": "s.l.",
"children": null
},
{
"tag": "Synchromophyceae",
"description": "Horn & Wilhelm 2007",
"children": null
},
{
"tag": "Xanthophyceae",
"description": "Fritsch 1935 (yellow-green algae)",
"children": null
}
]
}
]
},
{
"tag": "Plantae",
"description": "are mainly multicellular, predominantly photosynthetic eukaryotes of the kingdom Plantae",
"children": [
{
"tag": "Chlorokybophyta",
"description": "is a genus of basal Green algae or Streptophyte",
"children": null
},
{
"tag": "Mesostigmatophyta",
"description": "are basal green algae",
"children": null
},
{
"tag": "Chlorobionta",
"description": "Kenrick & Crane 1997",
"children": null
},
{
"tag": "Streptobionta",
"description": " Kenrick & Crane 1997",
"children": [
{
"tag": "Klebsormidiophyceae",
"description": "are a family containing three genera of charophyte green alga",
"children": null
},
{
"tag": "Charophyta",
"description": "1897 sensu Lewis & McCourt 2004; Karol et al.",
"children": null
},
{
"tag": "Zygnematophyta",
"description": "Round, 1971",
"children": null
},
{
"tag": "Embryobiotes",
"description": "Engler, 1892",
"children": [
{
"tag": "Marchantiophyta",
"description": "Engler, 1892",
"children": null
},
{
"tag": "Bryophyta",
"description": "Engler, 1892",
"children": null
},
{
"tag": "Anthocerotophyta",
"description": "Engler, 1892",
"children": null
},
{
"tag": "Horneophyta",
"description": "Engler, 1892",
"children": null
},
{
"tag": "Aglaophyta",
"description": "Engler, 1892",
"children": null
},
{
"tag": "Tracheophyta",
"description": "Engler, 1892",
"children": null
}
]
}
]
}
]
},
{
"tag": "Fungi",
"description": "is any member of the group of eukaryotic organisms that includes microorganisms such as yeasts and molds",
"children": [
{
"tag": "Dikarya",
"description": "is a subkingdom of Fungi that includes the divisions Ascomycota and Basidiomycota",
"children": [
{
"tag": "Ascomycota",
"description": "is a division or phylum of the kingdom Fungi that, together with the Basidiomycota",
"children": [
{
"tag": "Pezizomycotina",
"description": "none",
"children": null
},
{
"tag": "Saccharomycotina",
"description": "none",
"children": null
},
{
"tag": "Taphrinomycotina",
"description": "none",
"children": null
}
]
},
{
"tag": "Basidiomycota",
"description": "is one of two large divisions that, together with the Ascomycota, constitute the subkingdom Dikarya",
"children": [
{
"tag": "Agaricomycotina",
"description": "Doweld (2001)",
"children": null
},
{
"tag": "Pucciniomycotina",
"description": "R.Bauer, Begerow, J.P.Samp., M.Weiß & Oberw.(2006)",
"children": null
},
{
"tag": "Ustilaginomycotina",
"description": "Doweld (2001)",
"children": null
}
]
}
]
},
{
"tag": "Subphyla",
"description": "incertae sedis",
"children": [
{
"tag": "Entomophthoromycotina",
"description": "Humber (2013)",
"children": null
},
{
"tag": "Kickxellomycotina",
"description": "the name was changed from 'Harpellomycotina', because 'Kickxellomycotina' had an older stem",
"children": null
},
{
"tag": "Mucoromycotina",
"description": "is a subdivision of Fungi of uncertain phylogenetic placement",
"children": null
},
{
"tag": "Zoopagomycotina",
"description": "are a subdivision (incertae sedis) of the fungal division Zygomycota sensu lato",
"children": null
}
]
}
]
},
{
"tag": "Animalia",
"description": "are multicellular eukaryotic organisms that form the biological kingdom Animalia",
"children": [
{
"tag": "Porifera",
"description": "are a basal Metazoa clade as sister of the Diploblasts",
"children": null
},
{
"tag": "Eumetazoa",
"description": "are a proposed basal animal clade as sister group of the Porifera",
"children": [
{
"tag": "Ctenophora",
"description": "Ernst Haeckel's Kunstformen der Natur, 1904",
"children": null
},
{
"tag": "Placozoa",
"description": "Ernst Haeckel's Kunstformen der Natur, 1904",
"children": null
},
{
"tag": "Cnidaria",
"description": "Ernst Haeckel's Kunstformen der Natur, 1904",
"children": null
},
{
"tag": "Trilobozoa",
"description": "Ernst Haeckel's Kunstformen der Natur, 1904",
"children": null
},
{
"tag": "Bilateria",
"description": "are animals with bilateral symmetry",
"children": [
{
"tag": "Xenacoelomorpha",
"description": "is a basal bilaterian phylum of small and very simple animals",
"children": null
},
{
"tag": "Nephrozoa",
"description": "is a major clade of bilaterians, divided into the protostomes and the deuterostomes",
"children": [
{
"tag": "Deuterostomia",
"description": "none",
"children": null
},
{
"tag": "Protostomia",
"description": "none",
"children": null
},
{
"tag": "Spiralia",
"description": "none",
"children": null
}
]
},
{
"tag": "Proarticulata",
"description": "is an extinct phylum of very early, superficially bilaterally symmetrical animals known from fossils found in the Ediacaran (Vendian) marine deposits",
"children": null
}
]
}
]
}
]
}
]
Raw
index.html
<html>
<head>
<meta charset="UTF-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-cloud/1.2.5/d3.layout.cloud.min.js"></script>
<style>
@import url("https://fonts.googleapis.com/css?family=Pragati+Narrow");
body{ margin: 0px; font-family: "Pragati Narrow", sans-serif; }
#cloud { margin: 0px; width: 100%; height: 100%; }
div.tooltip {
position: absolute;
text-align: center;
padding: 8px;
font: 12px sans-serif;
background: #DEDEDE;
border: 0px;
border-radius: 8px;
pointer-events: none;
max-width: 20%;
}
</style>
</head>
<body>
<div id="cloud"></div>
<script>
var parentNode;
var level = 0;
var tooltipEnabled = true;
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var offset = 32;
var width = window.innerWidth, height = window.innerHeight;
var svg = d3.select("#cloud").append("svg")
.attr("width", width)
.attr("height", height);
var background = svg.append("rect")
.attr("id", "background")
.attr("width", width)
.attr("height", height)
.attr("fill", "#FFFFFF");
var caption = svg.append("text")
.attr("dx", 32)
.attr("dy", 32)
.text("please click on the background to zoom out");
width -= offset * 2;
height -= offset * 2;
var g = svg.append("g")
.attr("transform", "translate(" + offset + "," + offset + ")");
d3.json("biology.json",function(error_, json_){
if (error_) throw error_;
var color = d3.scaleOrdinal(d3.schemeCategory20);
var categories = d3.keys(d3.nest().key(function(d) { return d.description; }).map(json_));
parentNodes = [];
parentNodes.push(json_);
var layout = d3.layout.cloud()
.size([width, height])
.timeInterval(20)
.words(json_)
.rotate(function() { return ~~(Math.random() * 2) * 90; })
.fontSize(48)
.fontWeight(["bold"])
.text(function(d) { return d.tag; })
.on("end", drawCloud)
.start();
var wordcloud = g.append("g")
.attr('class','wordcloud')
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
d3.select("#background").on("click", function(d) { tooltipEnabled = false; animatedZoomOut(); });
d3.select("#background").on("mouseOver", function(d) { div.transition().duration(500).style("opacity", 0); });
function animatedZoomOut(){
if(parentNodes.length > 1) { parentNodes.pop(); }
var parent;
if(parentNodes.length == 1) { parent = parentNodes[0]; }
else { parent = parentNodes[parentNodes.length - 1].children }
var layout = d3.layout.cloud()
.size([width, height])
.timeInterval(20)
.words(parent)
.rotate(function() { return ~~(Math.random() * 2) * 90; })
.fontSize(48)
.fontWeight(["bold"])
.text(function(d) { return d.tag; })
.on("end", updateCloud)
.start();
}
function mouseOver(d_, object_){
d3.select(d_).style("cursor", "pointer");
if(tooltipEnabled){
div.transition()
.duration(500)
.style("opacity", .9);
div.html(object_.description)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY) + "px");
}
}
function mouseOut(d_, object_){
if(tooltipEnabled){
div.transition()
.duration(500)
.style("opacity", 0);
}
}
function animatedZoomIn(d_){
parentNodes.push(d_);
var layout = d3.layout.cloud()
.size([width, height])
.timeInterval(20)
.words(d_.children)
.rotate(function() { return ~~(Math.random() * 2) * 90; })
.fontSize(48)
.fontWeight(["bold"])
.text(function(d) { return d.tag; })
.on("end", updateCloud)
.start();
}
function updateCloud(words_) {
div.style("opacity", 0);
var words = wordcloud.selectAll("text").data(words_, function(d) { return d; });
words.selectAll("text")
.data(words_);
words.exit()
.transition(1000)
.style("opacity", 0.1)
.remove();
words.attr("class", "update")
.style("opacity", 1.0)
//.style("pointer-events", function(d) { if(d.children != null) { return "true"; } else { return "none"; }})
.text(function(d) { return d.tag; })
.on("click", function(d) {
tooltipEnabled = false;
if(d.children != null){
animatedZoomIn(d);
}
})
.on("mouseover", function(d) { mouseOver(this, d); })
.on("mouseout", function(d) { mouseOut(this, d); })
.transition()
.duration(2000)
.attr("transform", function(d) { return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; })
words.enter().append("text")
.attr("transform", function(d) {
return "translate(0,0)rotate(0)";
})
.style("opacity", 1.0)
//.style("pointer-events", function(d) { if(d.children != null) { return "true"; } else { return "none"; }})
.style("fill", function(d, i) { return color(i); })
.style("font-size", function(d) { return "48px"; })
.style("font-family", "Pragati Narrow")
.attr("text-anchor", "middle")
.text(function(d) { return d.tag; })
.on("click", function(d) {
tooltipEnabled = false;
if(d.children != null){
animatedZoomIn(d);
}
})
.on("mouseover", function(d) { mouseOver(this, d); })
.on("mouseout", function(d) { mouseOut(this, d); })
.transition()
.duration(2000)
.style("opacity", 1.0)
.attr("transform", function(d) { return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; })
.on("end", function() { tooltipEnabled = true; })
};
function drawCloud(words_) {
wordcloud.selectAll("text")
.data(words_)
.enter().append("text")
.attr('class','word')
.style("fill", function(d, i) { return color(i); })
.style("font-size", function(d) { return "48px"; })
.style("font-family", "Pragati Narrow")
.attr("text-anchor", "middle")
.attr("transform", function(d) { return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; })
.text(function(d) { return d.tag; })
.on("click", function(d) {
tooltipEnabled = false;
if(d.children != null){
animatedZoomIn(d);
}
})
.on("mouseover", function(d) { mouseOver(this, d); })
.on("mouseout", function(d) { mouseOut(this, d); })
};
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment