Salmonella Bubble Chart

Built with blockbuilder.org

forked from greenmna's block: Bubble attempt Mambo #5

forked from micha2jm's block: Bubble attempt Mambo #5

forked from scresawn's block: Bubble attempt Mambo #5

<!DOCTYPE html>
<head>
  <meta charset="utf-8">

console.log("Click!");
      svg.selectAll("circle").remove();
      d3.selectAll("div").remove();
			d3.selectAll(".node").remove();
			d3.selectAll(".link").remove();
			//svg.remove();
			nodes = [];
			links = [];
      
   var data = [];

d3.csv("BIO583_Salmonella_data.csv", function (error, data) {
     if (error) {
       console.error("Error getting or parsing the data");
       throw error;
     }
     console.log('reloading data...');
     //var data = BIO583_Salmonella_data
     var chart = bubbleChart().width(1280).height(720);
     
     d3.select("#demo").data(data).call(chart)
     
     function ticked (e) {
       console.log("tick: ", e);
       node.attr("cx", function (d) { return d.x; })
         .attr("cy", function (d) { return d.y; })
     }
     
     /*var div = d3.select("body")
    	.selectAll("div")
    	.data(data)
     	.enter().append("div");*/
          
     if (buttonToggled == true) {
      console.log("buttonToggled: true")
     	simulation = d3.forceSimulation(data)
           .force("charge", d3.forceManyBody().strength([-40]))
     	     .force("y", d3.forceY().y(function(d) { return 0; }))
           .force("x", d3.forceX().x(function(d) { return [d.gene_number * 50]}))
         	 .on("tick", ticked);
     }
	   else {
       console.log("buttonToggled: false");    
		   simulation = d3.forceSimulation(data)
         .force("charge", d3.forceManyBody().strength([-40]))
     	   .force("y", d3.forceY().y(function(d) { return 0; }))
    		 .force("x", d3.forceX().x(function(d) { return 0; }))
         .on("tick", ticked);
     	 }

//d3 forceSimulation help https://github.com/d3/d3-force
     //also https://d3indepth.com/force-layout/
     
     
     var scaleRadius = d3.scaleLinear()
     	.domain([d3.min(data, function (d) {return +d.gene_number}),
               d3.max(data, function (d) {return +d.gene_number})])
     
      .range([11,22])
     
     var colorCircles = d3.scaleOrdinal(d3.schemeCategory20);

});
}
    
    myFunction();
    
    //AGAIN, LINKS ARE DOWN HERE:
		//d3 forceSimulation help https://github.com/d3/d3-force
     //also https://d3indepth.com/force-layout/
    
  </script>
</body>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-collection.v1.min.js

https://d3js.org/d3-dispatch.v1.min.js

https://d3js.org/d3-quadtree.v1.min.js

https://d3js.org/d3-timer.v1.min.js

https://d3js.org/d3-force.v1.min.js