Built with blockbuilder.org
forked from scresawn's block: pham size bubble chart
xxxxxxxxxx<head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v3.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style></head><body> <script> // Feel free to change or delete any of the code you see in this editor!var diameter = 500; //, //max size of the bubbles color = d3.scale.category20(); //color categoryvar bubble = d3.layout.pack() .sort(null) .size([diameter, diameter]) .padding(1.5);var svg = d3.select("body") .append("svg") .attr("width", diameter) .attr("height", diameter) .attr("class", "bubble");d3.tsv("clustertable_v99.tsv", function(error, data){ //convert numerical values from strings to numbers data = data.map(function(d){ d.value = +d["averageProteinLength"]; return d; }); //bubbles needs very specific format, convert data to this. var nodes = bubble.nodes({children:data}).filter(function(d) { return !d.children; }); //setup the chart var bubbles = svg.append("g") .attr("transform", "translate(0,0)") .selectAll(".bubble") .data(nodes) .enter(); //create the bubbles bubbles.append("circle") .attr("r", function(d){ return d.r; }) .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) .style("fill", function(d) { return color(d.value); }); //format the text for each bubble bubbles.append("text") .attr("x", function(d){ return d.x; }) .attr("y", function(d){ return d.y + 5; }) .attr("text-anchor", "middle") .text(function(d){ return d["Pham"]; }) .style({ "fill":"white", "font-family":"Helvetica Neue, Helvetica, Arial, san-serif", "font-size": "12px" });}) </script></body> https://d3js.org/d3.v3.min.js