Old school D3 from simpler times

All examples By author By category About

micha2jm

Full window Github gist

this weird bubble sort

Built with blockbuilder.org

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

<script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-collection.v1.min.js"></script>
	<script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
	<script src="https://d3js.org/d3-quadtree.v1.min.js"></script>
	<script src="https://d3js.org/d3-timer.v1.min.js"></script>
	<script src="https://d3js.org/d3-force.v1.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
  
</head>
<body>
    <button><p id="normal">Unsort</p></button>
  <button><p id="resistance">Antibiotic Resistance</p></button>
  <script>
    //https://bl.ocks.org/oikonang/c645e2aa3a4fe313269afc1c39c8a05d
    
   // function sortSwitchConstructor(dataType){
   //   .this.currentDataType = dataType;
      
 //   }
    
    
    var svg = d3.select("body").append("svg")
    	.attr("width", 1280)
    	.attr("height", 720)
    	.attr("id", "chart");
    var bubbleChart = function (){
      var width = 1280
      height = 720;

function chart (selection){
      tooltip = d3.select("body")
     	.append("div")
     	.style("position", "absolute")
     	.style("visibility", "visible")
     	.style("color", "white")
     	.style("padding", "8px")
     	.style("background-color", "#626D71")
     	.style("border-radius", "6px")
     	.style("text-align", "center")
     	.style("font-family", "monospace")
     	.style("width", "100px")
     	.text("");
    }
    
    chart.width = function (value) {
      if (!arguments.length) {return width;}
      width = value;
      
      return chart;
    }
    
    chart.height = function (value){
      if (!arguments.length){return height;}
      height = value
      
      return chart;
      
    }
    return chart;
 }
   
   d3.csv("BIO583_Salmonella_data.csv", function (error, data) {
     if (error) {
       console.error("Error getting or parsing the data");
       throw error;
     }
     
     //var data = BIO583_Salmonella_data
     var chart = bubbleChart().width(1280).height(720);
   d3.select("#normal").data(data).call(chart).on("click",function() {  
     
     /*var div = d3.select("body")
    	.selectAll("div")
    	.data(data)
     	.enter().append("div");*/
     
     function ticked (e) {
       node.attr("cx", function (d) { return d.x; })
       		 .attr("cy", function (d) { return d.y; })
     }
    
     
     //d3 forceSimulation help https://github.com/d3/d3-force
     //also https://d3indepth.com/force-layout/
     
     
     var simulation = d3.forceSimulation(data)
     	.force("charge", d3.forceManyBody().strength([-40]))
     	.force("x", d3.forceX())
     	.force("y", d3.forceY())
     	.on("tick", ticked);
     
     var scaleRadius = d3.scaleLinear()
     	.domain([d3.min(data, function (d) {return +d.gene_number}),
               d3.max(data, function (d) {return +d.gene_number})])
     
      .range([10,22])
     
     var colorCircles = d3.scaleOrdinal(d3.schemeCategory20);

var node = svg.selectAll("circle")
     	.data(data)
     	.enter()
     	.append("circle")
     	.attr("r", function (d) {return scaleRadius(d.gene_number)})
     	.style("fill", function (d) {return colorCircles(d.Serotype)})
     	.attr("transform", "translate(" + [800 / 2, 480 / 2] + ")")
     	.on("mouseover", function(d) {
        tooltip.html(d.Isolate +"<br>"+ d.Serotype+"<br>"+d.gene_number);
        return tooltip.style("visibility", "visible");
      })
     	.on("mousemove", function () {
        
        return tooltip.style("top", (d3.event.pageY-10)+"px").style("left", (d3.event.pageX+10)+"px");
      })
     	.on("mouseout", function () {return tooltip.style("visibility", "hidden");});
     
     })
     
      d3.select("#resistance").data(data).call(chart).on("click",function() {  
     
     /*var div = d3.select("body")
    	.selectAll("div")
    	.data(data)
     	.enter().append("div");*/
     
     function ticked (e) {
       node.attr("cx", function (d) { return d.x; })
       		 .attr("cy", function (d) { return d.y; })
     }
    
     
     //d3 forceSimulation help https://github.com/d3/d3-force
     //also https://d3indepth.com/force-layout/
     
     
     var simulation = d3.forceSimulation(data)
     	.force("charge", d3.forceManyBody().strength([-40]))
     	.force("x", d3.forceX().x(function(d) { return [d.gene_number * 40]}))
     	.force("y", d3.forceY())
     	.on("tick", ticked);
        
        var scaleRadius = d3.scaleLinear()
     	.domain([d3.min(data, function (d) {return +d.gene_number}),
               d3.max(data, function (d) {return +d.gene_number})])
     
      .range([10,22])
     
     var colorCircles = d3.scaleOrdinal(d3.schemeCategory20);

var node = svg.selectAll("circle")
     	.data(data)
     	.enter()
     	.append("circle")
     	.attr("r", function (d) {return scaleRadius(d.gene_number)})
     	.style("fill", function (d) {return colorCircles(d.Serotype)})
     	.attr("transform", "translate(" + [800 / 2, 480 / 2] + ")")
     	.on("mouseover", function(d) {
        tooltip.html(d.Isolate +"<br>"+ d.Serotype+"<br>"+d.gene_number);
        return tooltip.style("visibility", "visible");
      })
     	.on("mousemove", function () {
        
        return tooltip.style("top", (d3.event.pageY-10)+"px").style("left", (d3.event.pageX+10)+"px");
      })
     	.on("mouseout", function () {return tooltip.style("visibility", "hidden");});
     
     })

});
   
    
    //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