scattered plot

forked from Jesus82's block: scattered plot

<!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 nodes = [
    {
    name:'abbey_dubbel',
    abv: [ 6, 7.6 ],
    ibus: [ 15, 25 ]
    }, 
    {
    name:'abbey_tripel',
    abv: [ 7.5, 9.5 ],
    ibus: [ 20, 40 ]
    }, 
    {
    name:'ale',
    abv: [ 0 ],
    ibus: [ 0 ]
    }, 
    {
    name:'amber_ale',
    abv: [ 0 ],
    ibus: [ 0 ]
    }, 
    {
    name:'amber_lager',
    abv: [ 4.7, 5.5 ],
    ibus: [ 18, 30 ]
    }, 
    {
    name:'american_IPA',
    abv: [ 6, 14 ],
    ibus: [ 40, 70 ]
    }, 
    {
    name:'american_pale_ale',
    abv: [ 4.5, 6.2 ],
    ibus: [ 30, 50 ]
    }, 
    {
    name:'american_strong_ale',
    abv: [ 8, 12 ],
    ibus: [ 30, 60 ]
    }, 
    {
    name:'baltic_porter',
    abv: [ 6.5, 9.5 ],
    ibus: [ 20, 40 ]
    }, 
    {
    name:'barley_wine',
    abv: [ 8, 12 ],
    ibus: [ 50, 100 ]
    }, 
    {
    name:'belgian_ale',
    abv: [ 8, 5.5 ],
    ibus: [ 20, 30 ]
    }, 
    {
    name:'belgian_strong_ale',
    abv: [ 7.5, 10.5 ],
    ibus: [ 22, 35 ]
    }, 
    {
    name:'berliner_weisse',
    abv: [ 2.8, 3.8 ],
    ibus: [ 3, 8 ]
    }, 
    {
    name:'biere_de_garde',
    abv: [ 6, 8.5 ],
    ibus: [ 18, 28 ]
    }, 
    {
    name:'black_IPA',
    abv: [ 5.5, 9 ],
    ibus: [ 50, 90 ]
    }, 
    {
    name:'blond_ale',
    abv: [ 6, 7.5 ],
    ibus: [ 15, 30 ]
    }, 
    {
    name:'brown_ale',
    abv: [ 4.2, 5.4 ],
    ibus: [ 20, 30 ]
    }, 
    {
    name:'brut_ipa',
    abv: [ 5, 7.5 ],
    ibus: [ 40, 60 ]
    }, 
    {
    name:'cider',
    abv: [ 0 ],
    ibus: [ 0 ]
    }, 
    {
    name:'doppelbock',
    abv: [ 7, 10 ],
    ibus: [ 16, 26 ]
    }, 
    {
    name:'dunkel',
    abv: [ 4.5, 5.6 ],
    ibus: [ 18, 28 ]
    }, 
    {
    name:'ESB',
    abv: [ 4.6, 6.2 ],
    ibus: [ 30, 50 ]
    }, 
    {
    name:'foreign_extra_stout',
    abv: [ 6.3, 8 ],
    ibus: [ 50, 70 ]
    }, 
    {
    name:'fruit_beer',
    abv: [ 2, 8 ],
    ibus: [ 40 ]
    }, 
    {
    name:'fruity_lambic',
    abv: [ 5, 7 ],
    ibus: [ 10 ]
    }, 
    {
    name:'gose',
    abv: [ 4.2, 4.8 ],
    ibus: [ 5, 12 ]
    }, 
    {
    name:'gueuze_lambic',
    abv: [ 5, 8 ],
    ibus: [ 10 ]
    }, 
    {
    name:'imperial_IPA',
    abv: [ 7.5, 10 ],
    ibus: [ 60, 120 ]
    }, 
    {
    name:'imperial_pils',
    abv: [ 0 ],
    ibus: [ 0 ]
    }, 
    {
    name:'imperial_porter',
    abv: [ 4.8, 6.5 ],
    ibus: [ 25, 50 ]
    }, 
    {
    name:'imperial_stout',
    abv: [ 5, 7.5 ],
    ibus: [ 40, 60 ]
    }, 
    {
    name:'india_style_lager',
    abv: [ 0 ],
    ibus: [ 0 ]
    }, 
    {
    name:'IPA',
    abv: [ 5, 7.5 ],
    ibus: [ 40, 60 ]
    }, 
    {
    name:'lager',
    abv: [ 0 ],
    ibus: [ 0 ]
    }, 
    {
    name:'lambic',
    abv: [ 5, 6.5 ],
    ibus: [ 10 ]
    }, 
    {
    name:'landbier',
    abv: [ 4.7, 7.4 ],
    ibus: [ 16, 22 ]
    }, 
    {
    name:'neipa',
    abv: [ 6, 9 ],
    ibus: [ 25, 60 ]
    }, 
    {
    name:'old_ale',
    abv: [ 5.5, 9 ],
    ibus: [ 30, 60 ]
    }, 
    {
    name:'pale_lager',
    abv: [ 4.6, 6 ],
    ibus: [ 18, 25 ]
    }, 
    {
    name:'pilsener',
    abv: [ 4.4, 5.2 ],
    ibus: [ 22, 40 ]
    }, 
    {
    name:'porter',
    abv: [ 4, 5.4 ],
    ibus: [ 28, 35 ]
    }, 
    {
    name:'premium_lager',
    abv: [ 4.2, 5.8 ],
    ibus: [ 30, 45 ]
    }, 
    {
    name:'quadrupel',
    abv: [ 8, 12 ],
    ibus: [ 20, 35 ]
    }, 
    {
    name:'saison',
    abv: [ 3.5, 9.5 ],
    ibus: [ 20, 35 ]
    }, 
    {
    name:'scotch_ale',
    abv: [ 6.5, 10 ],
    ibus: [ 17, 35 ]
    }, 
    {
    name:'session_IPA',
    abv: [ 3, 5 ],
    ibus: [ 35, 60 ]
    }, 
    {
    name:'smoked',
    abv: [ 0 ],
    ibus: [ 0 ]
    }, 
    {
    name:'sour_red_brown',
    abv: [ 4.6, 6.5 ],
    ibus: [ 10, 25 ]
    }, 
    {
    name:'sour_wild_ale',
    abv: [ 0 ],
    ibus: [ 0 ]
    }, 
    {
    name:'specialty_grain',
    abv: [ 0 ],
    ibus: [ 0 ]
    }, 
    {
    name:'stout',
    abv: [ 4, 6 ],
    ibus: [ 20, 40 ]
    }, 
    {
    name:'sweet_stout',
    abv: [ 4, 6 ],
    ibus: [ 20, 40 ]
    }, 
    {
    name:'weissbier',
    abv: [ 4.3, 5.6 ],
    ibus: [ 8, 15 ]
    }, 
    {
    name:'weizen_bock',
    abv: [ 6.5, 9 ],
    ibus: [ 15, 30 ]
    }, 
    {
    name:'wheat_ale',
    abv: [ 4, 5.5 ],
    ibus: [ 15, 30 ]
    }, 
    {
    name:'witbier',
    abv: [ 4.5, 5.5 ],
    ibus: [ 8, 20 ]
    }
]
    // Create SVG and margins

var margin = {top: 52, right: 78, bottom: 52, left: 78}
    var myWidth = 900 - margin.left - margin.right
    var myHeight = 450 - margin.top - margin.bottom

var svg = d3.select('body').append('svg')
      .attr('width', myWidth + margin.left + margin.right)
      .attr('height', myHeight + margin.top + margin.bottom)

var g = svg.append("g")
      .attr("transform", "translate(" + margin.left + ", " + margin.top + ")")
    
    // Scale

var y = d3.scaleLinear()
      .domain([2,10])
    	.range([myHeight, 0])

var x = d3.scaleLinear()
    	.domain([0,100])
    	.range([0, myWidth])

// Axis

var yAxisCall = d3.axisLeft(y).tickSize(10)
    g.append("g")
      .attr("class", "y-axis")
      .call(yAxisCall)

var xAxisCall = d3.axisBottom(x).tickSize(10)
    g.append("g")
      .attr("class", "x-axis")
      .attr("transform", "translate(0, " + myHeight + ")")
      .call(xAxisCall)
    
     // Helper Functions

var myIbus = function(d,i){
      if (d.ibus) {
        return d.ibus[1] ? (x((d.ibus[0] + d.ibus[1])/2)) : (x(d.ibus[0]))
      }
      else return 0
     }

var myABV = function(d,i){
      if (d.abv) {
        return d.abv[1] ? (y((d.abv[0] + d.abv[1])/2)) : (y(d.abv[0]))
      }
      else return 0
     }

// Force Simulation

var simulation = d3.forceSimulation(nodes)
      .force('collide', d3.forceCollide().radius(8))
    	.force('x', d3.forceX(myIbus))
    	.force('y', d3.forceY(myABV))
      .on('tick', ticked);
    
          var myCircles = g.selectAll('circle')
        .data(nodes)

myCircles = myCircles.enter()
        .append('circle')
        .attr("r", 8)
     		.merge(myCircles);
  
      myCircles.exit().remove()

function ticked() {
        myCircles.attr("cx", function(d){ return d.x})
        .attr("cy", function(d){return d.y});
    };

</script>
</body>

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