Built with blockbuilder.org
Last active
April 26, 2019 14:20
-
-
Save Jesus82/ad5c6fb46f8be5a9d3e763f8a1ba03d7 to your computer and use it in GitHub Desktop.
scattered plot
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> | |
// 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] ? (y((d.ibus[0] + d.ibus[1])/2)) : (y(d.ibus[0])) | |
} | |
else return 0 | |
} | |
var myABV = function(d,i){ | |
if (d.abv) { | |
return d.abv[1] ? (x((d.abv[0] + d.abv[1])/2)) : (x(d.abv[0])) | |
} | |
else return 0 | |
} | |
// Force Simulation | |
var simulation = d3.forceSimulation(nodes) | |
.force('collide', d3.forceCollide()) | |
.on('tick', ticked) | |
function ticked() { | |
var myCircles = g.selectAll('circle') | |
.data(nodes) | |
myCircles.enter() | |
.append('circle') | |
.attr("cx", myIbus) | |
.attr("cy", myABV) | |
.attr("r", 8) | |
myCircles.exit().remove() | |
} | |
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 ] | |
} | |
] | |
</script> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment