Skip to content

Instantly share code, notes, and snippets.

@GerardoFurtado

GerardoFurtado/.block

Created May 2, 2019 10:28
Show Gist options
  • Save GerardoFurtado/a4901b82b2d8f2b55bd64563bcc8d519 to your computer and use it in GitHub Desktop.
Save GerardoFurtado/a4901b82b2d8f2b55bd64563bcc8d519 to your computer and use it in GitHub Desktop.
Download ZIP
scattered plot
Raw
.block
license: mit
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment