davidfischer · August 29, 2015 14:21
diff --git a/README.md b/README.md
diff --git a/chart.css b/chart.css
 body, html {
  margin: 0;
  padding: 0;
  font-family: "Open Sans", serif;
 }
 .axis path,
 .axis line {
  fill: none;
  stroke: #ccc;
  shape-rendering: crispEdges;
 }
 text {
  fill: #666;
  font-size: 0.7em;
 }

 .clearfix:after {
  content: "";
  display: table;
  clear: both;
 }

 #tooltip {
  max-width: 300px;
  background-color: rgba(242, 242, 242, 0.8);
  border: 1px solid #666;
  padding: 15px;
  position: absolute;
 }
 #tooltip h3 {
  margin: 0;
  padding: 0;
 }
 #tooltip h5 {
  color: #777;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
 }
 #tooltip label {
  float: left;
  font-weight: bold;
  margin-right: 20px;
  width: 40px;
 }
 #tooltip #srm-color {
  border: 1px solid black;
  border-radius: 50%;
  display: inline-block;
  height: 15px;
  margin-left: 10px;
  width: 15px;
 }
 #tooltip p {
  font-size: 0.8em;
  margin: 0.5em 0;
 }
 #tooltip #logo-container {
  float: left;
  border-radius: 3px;
  margin-right: 3px;
  width: 50px;
  height: 50px;
 }
 #tooltip #logo-container img {
  border-radius: 3px;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
 }
diff --git a/chart.js b/chart.js
 "use strict";

 (function () {
  var margin = {top: 10, bottom: 10, left: 10, right: 10};
  var width = window.innerWidth * 0.98 - margin.left - margin.right;
  var height = window.innerHeight * 0.98 - margin.top - margin.bottom;
  var dim = d3.min([width, height]);

  var x = d3.scale.linear()
    .range([0, width])
    .domain([1, 100]);
  var y = d3.scale.linear()
    .range([height, 0])
    .domain([2, 12]);

  var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickValues([]);
  var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickValues([]);

  // SRM to color linear scale
  // This is taken directly from Wikipedia
  var srm = d3.scale.linear()
    .domain([2, 3, 4, 6, 8, 10, 13, 17, 20, 24, 29, 35, 40])
    .range(['#F8F753', '#F6F513', '#ECE61A', '#D5BC26', '#BF923B', '#BF813A', '#BC6733', '#8D4C32', '#5D341A', '#261716', '#0F0B0A', '#080707', '#030403']);

  // ABV strength scale
  var strength = d3.scale.threshold()
    .domain([3.99, 6.01, 9.01])
    .range(["Session", "Standard", "High", "Very High"])

  // Used to determine the size of the circle
  // Corresponds roughly to how wide the variation of the style
  // with respect to ABV and IBU
  var variability = d3.scale.linear()
    .range([dim / 90, dim / 20])

  var svg = d3.select('#chart').append('svg')
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .call(d3.behavior.zoom()
      .scaleExtent([1, 5])
      .on("zoom", redraw))
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var lines = svg.append("g");

  // Credit the BJCP for their guidelines and data
  svg.append("text")
    .attr("x", 20)
    .attr("y", height - 5)
    .text("Source: BJCP");

  svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .append("text")
      .attr("x", width)
      .attr("dy", "-0.71em")
      .style("text-anchor", "end")
      .text("More Bitter");

  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Higher Alcohol");

  function slugify (str) {
    return str.toLowerCase().replace(/ /g, '-').replace(/[^a-z0-9-]/g, '')
  }

  function redraw () {
    if (d3.event.scale > 1) {
      svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    } else {
      // When zooming out from a fully zoomed out position,
      // Simply center the SVG again
      svg.attr("transform", "translate(" + margin.top + "," + margin.left + ")");
    }

    // Resize the circles
    d3.selectAll("circle.dot").attr("r", function (d) { return variability(((d['IBU Max'] - d['IBU Min']) / 60) * ((d['ABV Max'] - d['ABV Min']) / 4)) / d3.event.scale; });
  }


  d3.csv("styles.csv", function(error, data) {
    svg.selectAll(".dots")
      .data(data).enter()
      // Circles
      .append("circle")
      .attr("stroke", "black")
      .attr("stroke-width", 0.1)
      .attr("r", function (d) { return variability(((d['IBU Max'] - d['IBU Min']) / 60) * ((d['ABV Max'] - d['ABV Min']) / 4)); })
      .attr("transform", function(d) {
        // Place the circle on the graph based on the X, Y coords
        return "translate(" + x(d['IBU Mid']) + "," + y(d['ABV Mid']) + ")";
      })
      .attr("id", function (d) { return slugify(d['Style Name']); } )
      .attr("class", function (d) { return 'dot ' + slugify(d['Style Category']); } )
      .attr("style", "opacity: 0.7")
      .attr("fill", function (d) { return srm(parseInt(d['SRM Mid'])); } )

      .on("mouseover", function(d) {
          // Show the tooltip at the current mouse position
          //  with additional data
          var m = d3.mouse(d3.select("#chart").node());
          var category = slugify(d['Style Category']);
          d3.select("#tooltip").style("display", null)
            .style("left", (m[0] > (width * 0.66) ? m[0] - 250 : m[0] + 30) + "px")
            .style("top", (m[1] > (height / 2) ? m[1] - 250 : m[1] - 20) + "px");
          d3.select("#style-name").html(d['Style Name']);
          d3.select("#style-category").html(d['Style Category']);
          d3.select("#abv-min").html(d['ABV Min']);
          d3.select("#abv-max").html(d['ABV Max']);
          d3.select("#abv-strength").html(strength(d['ABV Mid']));
          d3.select("#ibu-min").html(d['IBU Min']);
          d3.select("#ibu-max").html(d['IBU Max']);
          d3.select("#srm-min").html(d['SRM Min']);
          d3.select("#srm-max").html(d['SRM Max']);
          d3.select("#srm-color").style("background-color", srm(d['SRM Mid']));
          d3.select("#description").html(d['Description'] || '');
          d3.select("#commercial-beer-name").html(d['Commercial Example Name'] || '');
          d3.select("#logo-container").html(d['Commercial Example Picture'] ? '<img src="' + d['Commercial Example Picture'] + '" />' : '');

          // Draw lines to other beers of the same style category
          d3.selectAll('.' + category).each(function (datum) {
            if (datum['Number'] !== d['Number']) {
              lines.append("line")
                .attr("class", "beer-links")
                .attr("stroke", "#000")
                .attr("stroke-width", 0.2)
                .attr("x1", x(d['IBU Mid']))
                .attr("y1", y(d['ABV Mid']))
                .attr("x2", x(datum['IBU Mid']))
                .attr("y2", y(datum['ABV Mid']));
            }
          });
        }).on("mouseout", function() {
          // Hide the tooltip
          d3.select("#tooltip").style("display", "none");
          // Remove the lines to other beers
          d3.selectAll(".beer-links").remove();
        });
  });
 })();
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="A Visualization of BJCP Beer Styles">
    <meta name="author" content="David Fischer">

    <title>A Visualization of BJCP Beer Styles</title>

    <link href='//fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

    <link rel="stylesheet" href="chart.css">
  </head>
  <body>
    <div id="chart"></div>
    <div id="tooltip" style="display: none">
      <h3 id="style-name"></h3>
      <h5 id="style-category"></h5>
      <div id="abv">
        <label>ABV</label>
        <span id="abv-min"></span><span>%</span>
        <span> - </span>
        <span id="abv-max"></span><span>%</span>
        <span>(</span><span id="abv-strength"></span><span>)</span>
        <div class="clearfix"></div>
      </div>
      <div id="ibu">
        <label>IBU</label>
        <span id="ibu-min"></span>
        <span> - </span>
        <span id="ibu-max"></span>
        <div class="clearfix"></div>
      </div>
      <div id="srm">
        <label>SRM</label>
        <span id="srm-min"></span>
        <span> - </span>
        <span id="srm-max"></span>
        <div id="srm-color"></div>
        <div class="clearfix"></div>
      </div>
      <p id="description"></p>
      <div id="commercial-example">
        <div><strong>Commercial example</strong></div>
        <div id="logo-container"></div>
        <span id="commercial-beer-name"></span>
      </div>
    </div>
    <script type="text/javascript" src="chart.js"></script>
  </body>
 </html>
diff --git a/styles.csv b/styles.csv
diff --git a/thumbnail.png b/thumbnail.png
	body, html {
	margin: 0;
	padding: 0;
	font-family: "Open Sans", serif;
	}
	.axis path,
	.axis line {
	fill: none;
	stroke: #ccc;
	shape-rendering: crispEdges;
	}
	text {
	fill: #666;
	font-size: 0.7em;
	}

	.clearfix:after {
	content: "";
	display: table;
	clear: both;
	}

	#tooltip {
	max-width: 300px;
	background-color: rgba(242, 242, 242, 0.8);
	border: 1px solid #666;
	padding: 15px;
	position: absolute;
	}
	#tooltip h3 {
	margin: 0;
	padding: 0;
	}
	#tooltip h5 {
	color: #777;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
	}
	#tooltip label {
	float: left;
	font-weight: bold;
	margin-right: 20px;
	width: 40px;
	}
	#tooltip #srm-color {
	border: 1px solid black;
	border-radius: 50%;
	display: inline-block;
	height: 15px;
	margin-left: 10px;
	width: 15px;
	}
	#tooltip p {
	font-size: 0.8em;
	margin: 0.5em 0;
	}
	#tooltip #logo-container {
	float: left;
	border-radius: 3px;
	margin-right: 3px;
	width: 50px;
	height: 50px;
	}
	#tooltip #logo-container img {
	border-radius: 3px;
	max-width: 100%;
	max-height: 100%;
	overflow: hidden;
	}
	"use strict";

	(function () {
	var margin = {top: 10, bottom: 10, left: 10, right: 10};
	var width = window.innerWidth * 0.98 - margin.left - margin.right;
	var height = window.innerHeight * 0.98 - margin.top - margin.bottom;
	var dim = d3.min([width, height]);

	var x = d3.scale.linear()
	.range([0, width])
	.domain([1, 100]);
	var y = d3.scale.linear()
	.range([height, 0])
	.domain([2, 12]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom")
	.tickValues([]);
	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left")
	.tickValues([]);

	// SRM to color linear scale
	// This is taken directly from Wikipedia
	var srm = d3.scale.linear()
	.domain([2, 3, 4, 6, 8, 10, 13, 17, 20, 24, 29, 35, 40])
	.range(['#F8F753', '#F6F513', '#ECE61A', '#D5BC26', '#BF923B', '#BF813A', '#BC6733', '#8D4C32', '#5D341A', '#261716', '#0F0B0A', '#080707', '#030403']);

	// ABV strength scale
	var strength = d3.scale.threshold()
	.domain([3.99, 6.01, 9.01])
	.range(["Session", "Standard", "High", "Very High"])

	// Used to determine the size of the circle
	// Corresponds roughly to how wide the variation of the style
	// with respect to ABV and IBU
	var variability = d3.scale.linear()
	.range([dim / 90, dim / 20])

	var svg = d3.select('#chart').append('svg')
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.call(d3.behavior.zoom()
	.scaleExtent([1, 5])
	.on("zoom", redraw))
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var lines = svg.append("g");

	// Credit the BJCP for their guidelines and data
	svg.append("text")
	.attr("x", 20)
	.attr("y", height - 5)
	.text("Source: BJCP");

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis)
	.append("text")
	.attr("x", width)
	.attr("dy", "-0.71em")
	.style("text-anchor", "end")
	.text("More Bitter");

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Higher Alcohol");

	function slugify (str) {
	return str.toLowerCase().replace(/ /g, '-').replace(/[^a-z0-9-]/g, '')
	}

	function redraw () {
	if (d3.event.scale > 1) {
	svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
	} else {
	// When zooming out from a fully zoomed out position,
	// Simply center the SVG again
	svg.attr("transform", "translate(" + margin.top + "," + margin.left + ")");
	}

	// Resize the circles
	d3.selectAll("circle.dot").attr("r", function (d) { return variability(((d['IBU Max'] - d['IBU Min']) / 60) * ((d['ABV Max'] - d['ABV Min']) / 4)) / d3.event.scale; });
	}


	d3.csv("styles.csv", function(error, data) {
	svg.selectAll(".dots")
	.data(data).enter()
	// Circles
	.append("circle")
	.attr("stroke", "black")
	.attr("stroke-width", 0.1)
	.attr("r", function (d) { return variability(((d['IBU Max'] - d['IBU Min']) / 60) * ((d['ABV Max'] - d['ABV Min']) / 4)); })
	.attr("transform", function(d) {
	// Place the circle on the graph based on the X, Y coords
	return "translate(" + x(d['IBU Mid']) + "," + y(d['ABV Mid']) + ")";
	})
	.attr("id", function (d) { return slugify(d['Style Name']); } )
	.attr("class", function (d) { return 'dot ' + slugify(d['Style Category']); } )
	.attr("style", "opacity: 0.7")
	.attr("fill", function (d) { return srm(parseInt(d['SRM Mid'])); } )

	.on("mouseover", function(d) {
	// Show the tooltip at the current mouse position
	// with additional data
	var m = d3.mouse(d3.select("#chart").node());
	var category = slugify(d['Style Category']);
	d3.select("#tooltip").style("display", null)
	.style("left", (m[0] > (width * 0.66) ? m[0] - 250 : m[0] + 30) + "px")
	.style("top", (m[1] > (height / 2) ? m[1] - 250 : m[1] - 20) + "px");
	d3.select("#style-name").html(d['Style Name']);
	d3.select("#style-category").html(d['Style Category']);
	d3.select("#abv-min").html(d['ABV Min']);
	d3.select("#abv-max").html(d['ABV Max']);
	d3.select("#abv-strength").html(strength(d['ABV Mid']));
	d3.select("#ibu-min").html(d['IBU Min']);
	d3.select("#ibu-max").html(d['IBU Max']);
	d3.select("#srm-min").html(d['SRM Min']);
	d3.select("#srm-max").html(d['SRM Max']);
	d3.select("#srm-color").style("background-color", srm(d['SRM Mid']));
	d3.select("#description").html(d['Description'] \|\| '');
	d3.select("#commercial-beer-name").html(d['Commercial Example Name'] \|\| '');
	d3.select("#logo-container").html(d['Commercial Example Picture'] ? '<img src="' + d['Commercial Example Picture'] + '" />' : '');

	// Draw lines to other beers of the same style category
	d3.selectAll('.' + category).each(function (datum) {
	if (datum['Number'] !== d['Number']) {
	lines.append("line")
	.attr("class", "beer-links")
	.attr("stroke", "#000")
	.attr("stroke-width", 0.2)
	.attr("x1", x(d['IBU Mid']))
	.attr("y1", y(d['ABV Mid']))
	.attr("x2", x(datum['IBU Mid']))
	.attr("y2", y(datum['ABV Mid']));
	}
	});
	}).on("mouseout", function() {
	// Hide the tooltip
	d3.select("#tooltip").style("display", "none");
	// Remove the lines to other beers
	d3.selectAll(".beer-links").remove();
	});
	});
	})();
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="A Visualization of BJCP Beer Styles">
	<meta name="author" content="David Fischer">

	<title>A Visualization of BJCP Beer Styles</title>

	<link href='//fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

	<link rel="stylesheet" href="chart.css">
	</head>
	<body>
	<div id="chart"></div>
	<div id="tooltip" style="display: none">
	<h3 id="style-name"></h3>
	<h5 id="style-category"></h5>
	<div id="abv">
	<label>ABV</label>
	<span id="abv-min"></span><span>%</span>
	<span> - </span>
	<span id="abv-max"></span><span>%</span>
	<span>(</span><span id="abv-strength"></span><span>)</span>
	<div class="clearfix"></div>
	</div>
	<div id="ibu">
	<label>IBU</label>
	<span id="ibu-min"></span>
	<span> - </span>
	<span id="ibu-max"></span>
	<div class="clearfix"></div>
	</div>
	<div id="srm">
	<label>SRM</label>
	<span id="srm-min"></span>
	<span> - </span>
	<span id="srm-max"></span>
	<div id="srm-color"></div>
	<div class="clearfix"></div>
	</div>
	<p id="description"></p>
	<div id="commercial-example">
	<div><strong>Commercial example</strong></div>
	<div id="logo-container"></div>
	<span id="commercial-beer-name"></span>
	</div>
	</div>
	<script type="text/javascript" src="chart.js"></script>
	</body>
	</html>