D3 Examples - Bubble attempt Mambo #5

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
<body>
  <script>
   
    var selectedValue = "tot_pop"
        var selectedIndex = 0
        var sizeRange = [1.5,50]
    var notcarto = true
    
    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("#chart").data(data).call(chart)
     
     /*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; })
     }
     
     var simulation = d3.forceSimulation(data)
        .force("charge", d3.forceManyBody().strength([-100]))
        .force("x", d3.forceX())
        .force("y", d3.forceY())
        .on("tick", ticked)
        .alphaMin(0.25)
        .on("tick", updateCartogram)
        .on("end", resetCartogram)
;
     
     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");});
 
     
     
     
     
     
     
     //sorting????
         
   redrawNodes()
​
  function updateCartogram() {
    d3.selectAll("circle.node")
      .attr("cx", d => d.x)
      .attr("cy", d => d.y)
  }
​
  function resetCartogram() {
    if (notcarto) {
      selectedIndex = selectedIndex === dataKeys.length ? 0 : selectedIndex + 1
      selectedValue = dataKeys[selectedIndex]
      d3.select("text.title")
        .text(keys[selectedValue])
​
      thisKeyValues = data.Serotype(d => d[selectedValue])
      extent = d3.extent(thisKeyValues)
​
      scale = d3.scaleLinear().domain(extent).range(sizeRange)
      colorScale = d3.scaleCluster().domain(thisKeyValues).range(colors)
​
     redrawNodes()
      force.force("collision", d3.forceCollide(d => scale(d[selectedValue])).iterations(2))
      .force("x", d3.forceX(d => d.cx))
      .force("y", d3.forceY(d => d.cy))
      .alpha(1)
      .restart()
​
    }
    else {
      var positionScale = d3.scaleCluster().domain(thisKeyValues).range([200,400,600,800,1000])
      force
      .force("x", d3.forceX(d => positionScale(d[selectedValue])))
      .force("y", d3.forceY(400))
      .alpha(1)
      .restart()
​
    }
      notcarto = !notcarto
  }
​
  function redrawNodes() {
    d3.selectAll("circle.node")
      .transition()
      .duration(500)
      .style("fill", d => colorScale(d[selectedValue]))
      .style("stroke", d => d3.hsl(colorScale(d[selectedValue])).darker())
      .attr("r", d => scale(d[selectedValue]))
​
​
  }
   
   });
    
  </script>
</body>
​
    