Skip to content

Instantly share code, notes, and snippets.

@msbarry

msbarry/README.md

Last active August 29, 2015 13:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save msbarry/9178933 to your computer and use it in GitHub Desktop.
Save msbarry/9178933 to your computer and use it in GitHub Desktop.
Download ZIP
Parallel Coordinates
Raw
readme-srm2rgb.js
// SRM to RGB conversion from http://methodbrewery.com/srm.php
(function(window) {
var SRM_TO_RGB = [];
SRM_TO_RGB[0] = 'rgb(250, 250, 210)';
SRM_TO_RGB[1] = 'rgb(250, 250, 160)';
SRM_TO_RGB[2] = 'rgb(250, 250, 105)';
SRM_TO_RGB[3] = 'rgb(245, 246, 50)';
SRM_TO_RGB[4] = 'rgb(235, 228, 47)';
SRM_TO_RGB[5] = 'rgb(225, 208, 50)';
SRM_TO_RGB[6] = 'rgb(215, 188, 52)';
SRM_TO_RGB[7] = 'rgb(205, 168, 55)';
SRM_TO_RGB[8] = 'rgb(198, 148, 56)';
SRM_TO_RGB[9] = 'rgb(193, 136, 56)';
SRM_TO_RGB[10] = 'rgb(192, 129, 56)';
SRM_TO_RGB[11] = 'rgb(192, 121, 56)';
SRM_TO_RGB[12] = 'rgb(192, 114, 56)';
SRM_TO_RGB[13] = 'rgb(190, 106, 56)';
SRM_TO_RGB[14] = 'rgb(180, 99, 56)';
SRM_TO_RGB[15] = 'rgb(167, 91, 54)';
SRM_TO_RGB[16] = 'rgb(152, 84, 51)';
SRM_TO_RGB[17] = 'rgb(138, 75, 48)';
SRM_TO_RGB[18] = 'rgb(124, 68, 41)';
SRM_TO_RGB[19] = 'rgb(109, 60, 34)';
SRM_TO_RGB[20] = 'rgb(95, 53, 23)';
SRM_TO_RGB[21] = 'rgb(81, 45, 11)';
SRM_TO_RGB[22] = 'rgb(67, 38, 12)';
SRM_TO_RGB[23] = 'rgb(52, 30, 17)';
SRM_TO_RGB[24] = 'rgb(38, 23, 22)';
SRM_TO_RGB[25] = 'rgb(33, 19, 18)';
SRM_TO_RGB[26] = 'rgb(28, 16, 15)';
SRM_TO_RGB[27] = 'rgb(23, 13, 12)';
SRM_TO_RGB[28] = 'rgb(18, 9, 8)';
SRM_TO_RGB[29] = 'rgb(13, 6, 5)';
SRM_TO_RGB[30] = 'rgb(8, 3, 2)';
window.srm2rgb = function (srm) {
var rounded = Math.abs(Math.round(srm));
return SRM_TO_RGB[rounded] || 'rgb(8, 3, 2)';
};
}(this));
Raw
README.md

This visualization uses parallel coordinates to display darkness (SRM), bitterness (IBU), alcohol content, and user rating of 281 beers. Each line represents a beer which intersects each axis corresponding to the value of that attribute of the beer. Additionally, the color of each beer is calculated from its SRM (darkness).

Several techniques discussed in chapter 7 of Interactive Data Visualization by Ward, Grinstein, and Keim are used to aid in exploration of the data:

  1. Curved lines to better convey continuity across axes.
  2. Interactive highlighting of records to see relationships that span all dimensions (hover over any line to highlight)
  3. Use of opacity to reveal clusters and deal with occlusion
  4. Interactive filtering of records to reveal clusters of relationships that span all dimensions (click and drag on any axis to filter)

Code adapted from a previous project of mine github.com/msbarry/d3-beers.

Data from libatious.

Raw
beer.csv
name ABV IBU SRM Rating
Samuel Adams Longshot Dortmunder Style Export 0.055 27 5 53
Samuel Adams Imperial Double Bock 0.095 21 16 50
Samuel Adams Longshot Grape Pale Ale 0.0535 5 5 33
Samuel Adams Summer Ale 0.053 23 5 64
Samuel Adams White Ale 0.054 15 3 64
Samuel Adams Blackberry Witbier 0.055 5 5 38
Samuel Adams Holiday Porter 0.058 27 25 78
Samuel Adams Longshot Mile High Barleywine 0.098 52 15 85
Samuel Adams Triple Bock 0.18 52 15 35
Samuel Adams Boston Ale 0.051 32 8 61
Samuel Adams Noble Pils 0.052 33 4 81
Samuel Adams Brown Ale 0.054 30 27 67
Samuel Adams James Madison Dark Wheat Ale 0.057 14 19 50
Samuel Adams Cherry Wheat 0.054 5 6 33
Samuel Adams Cranberry Lambic 0.059 5 5 21
Samuel Adams Rauch Bier 0.05 25 17 55
Samuel Adams Coffee Stout 0.058 55 35 66
Samuel Adams Cream Stout 0.049 55 29 86
Samuel Adams Vienna Style 0.049 24 13 65
Mackeson Xxx Stout 0.049 55 35 90
Samuel Adams Longshot Old Ben Ale 0.09 45 16 85
Samuel Adams Imperial Pilsner 0.088 35 4 90
Samuel Adams India Pale Ale (ipa) 0.059 50 11 71
Samuel Adams George Washington Porter 0.057 27 25 55
Samuel Adams Honey Porter 0.053 27 25 61
Samuel Adams Black Lager 0.049 27 45 80
Samuel Adams Scotch Ale 0.054 18 13 73
Samuel Adams Longshot Weizenbock 0.072 22 17 88
Samuel Adams Winter Lager 0.058 22 17 78
Samuel Adams Coastal Wheat 0.053 23 6 35
Samuel Adams Hefeweizen 0.054 23 5 59
Samuel Adams Utopias 0.27 52 15 90
Samuel Adams Boston Lager 0.049 20 4 67
Sam Adams Light 0.041 20 4 23
Samuel Adams Irish Red Ale 0.055 23 10 60
Harpoon 100 Barrel Series #30 - Island Creek Oyster Stout 0.045 37 32 50
Harpoon 100 Barrel Series #04 - Barleywine 0.103 52 15 73
Harpoon 100 Barrel Series #10 - Triticus 0.115 52 15 88
Harpoon Belgian Pale Ale 0.059 25 6 73
Harpoon Ufo White 0.048 15 4 48
Harpoon Leviathan Imperial IPA 0.1 90 12 88
Harpoon Munich Dark 0.056 23 21 75
Harpoon Summer Beer 0.05 25 6 38
Harpoon 100 Barrel Series #30 - Island Creek Oyster Stout 0.055 55 35 86
Harpoon IPA 0.059 50 8 80
Harpoon Celtic Ale 0.054 25 8 65
Harpoon Octoberfest 0.055 24 11 66
Harpoon 100 Barrel Series #22 - Steve Stewarts Firth Of Forth 0.054 18 13 68
Harpoon 100 Barrel Series #08 - Smoked Porter 0.057 25 17 76
Harpoon Brown 0.052 30 27 50
Ufo Hefeweizen 0.048 19 6 85
Dogfish Head Weedwacker Wit 0.045 15 3 48
Dogfish Head Golden Era (shower) 0.09 35 4 86
Dogfish Head Theobroma 0.09 6 17 86
Dogfish Head Snow Blower Belgian Ale 0.06 25 11 55
Dogfish Head Red And White 0.1 50 6 87
Dogfish Head Lawnmower Light 0.043 18 4 26
Dogfish Head Zwaanendale 0.08 24 18 85
Dogfish Head Au Courant 0.07 5 5 55
Dogfish Head Sahtea 0.09 6 12 88
Dogfish Head Burton Baton 0.1 90 10 90
Dogfish Head Squall IPA 0.09 90 10 89
Dogfish Head Festina Lente 0.07 5 5 63
Dogfish Head Chocolate Mild 0.045 17 18 8
Dogfish Head Chateau Jiahu 0.09 6 6 80
Dog Fish Head Midas Touch 0.09 12 6 90
Dogfish Head Liquor De Malt 0.07 25 5 60
Dogfish Head 120 Minute IPA 0.18 85 15 83
Dogfish Head Olde School Barleywine 0.15 52 15 72
Dogfish Head My Antonia 0.075 35 4 88
Dogfish Head 90 Minute Imperial IPA 0.09 90 8 91
Dogfish Head Aprihop 0.07 5 5 75
Dogfish Head 60 Minute IPA 0.06 60 8 90
Dogfish Head Noble Rot 0.09 18 2 65
Dogfish Head World Wide Stout 0.18 70 35 92
Dogfish Head Raison D Etre 0.08 50 8 88
Dogfish Head Bitches Brew 0.1 70 35 58
Dogfish Head World Wide Stout 2001/2003-present (18%) 0.18 70 35 91
Dogfish Head Black And Blue 0.1 5 6 86
Dogfish Head Oyster Stout 0.045 37 32 86
Dogfish Head World Wide Stout 2003 (21%, Ca And Uk Release) 0.21 70 35 91
Dogfish Head Festina Peche 0.045 15 8 76
Dogfish Head Chicory Stout 0.052 22 35 89
Dogfish Head Palo Santo Marron 0.12 85 15 90
Dogfish Head Immort Ale 0.11 52 15 90
Dogfish Head Raison D Extra 0.185 85 15 90
Dogfish Head Fort 0.18 49 5 83
Wachusett Nut Brown Ale 0.052 30 27 56
Wachusett Winter Ale 0.061 52 15 71
Wachusett Blueberry 0.045 5 4 35
Wachusett Quinns Amber Ale 0.046 23 14 45
Wachusett Country Ale 0.051 22 5 50
Wachusett IPA 0.056 50 11 80
Wachusett Black Shack Porter 0.053 27 25 80
Wachusett Larry Imperial IPA 0.088 90 12 50
Leinenkugels Classic Amber 0.049 20 4 25
Leinenkugels Oktoberfest 0.051 24 11 26
Leinenkugels Fireside Nut Brown Ale 0.049 30 27 31
Leinenkugels Sunset Wheat 0.049 23 5 83
Leinenkugels Berry Weiss 0.047 5 5 21
Leinenkugels Honey Weiss Bier 0.049 23 5 20
Leinenkugels Big Butt Doppelbock 0.058 21 16 48
Leinenkugels Summer Shandy 0.042 5 5 23
Leinenkugels Red 0.049 14 18 36
Leinenkugels 1888 Bock 0.051 24 18 38
Leinenkugels Big Eddy Russian Imperial Stout 0.095 70 35 90
Leinenkugels Original 0.045 12 3 28
Sierra Nevada Stout 0.058 55 45 86
Sierra Nevada/dogfish Head Life & Limb (1 Year Later) 0.1 85 15 50
Sierra Nevada Harvest Ale 0.067 50 8 50
Sierra Nevada Best Bitter Ale 0.043 30 9 68
Sierra Nevada Hoptimum 0.088 90 12 71
Sierra Nevada 30th Anniversary Charlie, Fred & Kens Bock 0.083 27 9 88
Sierra Nevada 30th Anniversary Jack & Kens Ale 0.1 52 15 50
Sierra Nevada I.d.e.a. 0.07 50 11 54
Sierra Nevada Barrel Aged Scotch Ale 0.088 18 13 88
Sierra Nevada Rhymes Wit 0.047 15 3 8
Sierra Nevada Anniversary Ale 0.059 50 11 86
Sierra Nevada Ruthless Weiss Beer 0.054 12 5 60
Sierra Nevada Wood Aged Bigfoot 0.122 52 15 85
Sierra Nevada 30th Anniversary Fritz & Kens Stout 0.095 70 35 88
Sierra Nevada Nuthin' In Common 0.065 37 12 50
Sierra Nevada Wood-aged Old Ale 0.085 70 35 50
Sierra Nevada Weizenbock 0.066 22 17 88
Sierra Nevada Blonde Ale 0.043 22 5 61
Sierra Nevada Brown Ale 0.055 30 27 71
Sierra Nevada/dogfish Head Limb & Life 0.05 30 27 73
Sierra Nevada Southern Hemisphere Harvest 0.067 50 11 90
Sierra Nevada Summerfest Lager 0.053 20 4 50
Sierra Nevada Summerfest 0.05 20 6 50
Sierra Nevada 30th Anniversary Our Brewers Reserve - Grand Cru 0.1 85 15 50
Sierra Nevada Glissade Golden Bock 0.064 27 6 66
Sierra Nevada Old Chico Brand Crystal Wheat 0.048 23 5 48
Sierra Nevada Estate Brewers Harvest Ale 0.067 50 11 90
Sierra Nevada Kellerweis 0.048 15 6 85
Sierra Nevada Bigfoot 0.096 52 17 84
Sierra Nevada Torpedo Extra IPA 0.072 70 10 87
Sierra Nevada Tumbler 0.052 30 27 68
Sierra Nevada Porter 0.056 27 25 83
Sierra Nevada Stricklander 0.085 30 6 78
Sierra Nevada Celebration Ale 0.068 50 11 88
Sierra Nevada India Pale Ale 0.069 50 11 80
Sierra Nevada/dogfish Head Life & Limb 0.102 85 15 50
Stone 7th Anniversary Ale 0.077 85 15 50
Stone Old Guardian (vintages 2004 And Later) 0.113 52 15 90
Symposium Ale (2004 Craft Brewers Conference) 0.075 50 16 85
Dogfish Head/victory/stone Saison Du Buff 0.068 28 10 50
Brewdog Cambridge Stone Juxtaposition Black Pilsner 0.1 35 4 90
Stone 13th Anniversary Ale 0.095 85 15 90
Stone 8th Anniversary Ale 0.078 85 15 90
Stone 9th Anniversary Ale 0.078 85 15 88
Stone 07.07.07 Vertical Epic Ale (red Wine Barrel Aged) 0.084 50 16 90
Arrogant Bastard Ale 0.072 85 15 50
Double Bastard Ale 0.1 85 15 50
Stone 04.04.04 Vertical Epic Ale 0.085 50 16 88
Stone 05.05.05 Vertical Epic Ale 0.085 50 16 90
Stone 07.07.07 Vertical Epic Ale 0.084 50 16 50
Stone 08.08.08 Vertical Epic Ale 0.084 50 16 90
Stone Sublimely Self Righteous Ale 0.087 60 25 91
Sawyers Triple 0.076 30 6 90
Stone 10th Anniversary IPA 0.1 90 12 50
Ken Schmidt Maui Stone Kona Coffee Macadamia Coconut Porter 0.085 38 28 90
Stone 6th Anniversary Porter 0.08 38 28 91
Stone 5th Anniversary IPA 0.085 50 11 90
Stone Cali-belgique IPA (cali-belgië) 0.069 50 11 50
Stone Estate Grown Sour Peach 0.033 6 2 50
Stone 10th Anniversary IPA (3 Years Later) 0.088 90 12 50
Stone 11th Anniversary Ale (2 Years Later) 0.1 85 15 50
Double Bastard Ale - 2008 0.1 85 15 50
Stone 12th Anniversary Bitter Chocolate Oatmeal Stout 0.092 70 35 90
Stone Bourbon Barrel Russian Imperial Stout 0.108 70 35 91
Stone Imperial Russian Stout 0.105 70 35 50
Stone 14th Anniversary Emperial IPA 0.089 90 12 91
Baird/ Ishii/ Stone Japanese Green Tea IPA 0.088 90 12 50
Jason Fields & Kevin Sheppard / Troegs / Stone Cherry Chocolate Stout 0.045 37 32 50
Stone Funky Sour 0.033 6 2 50
Stone Belgo Anise Imperial Russian Stout 0.1 70 35 50
Stone 7th Anniversary Ale (7+ Years Later) 0.1 85 15 50
Stone/green Flash/pizza Port Carlsbad Highway 78 Scotch Ale 0.036 18 13 50
Victory Stone Dogfish Head Saison Du Buff 0.06 28 10 50
Dogfish Head Victory Stone Saison Du Buff 0.06 28 10 50
Stone Dogfish Head Victory Saison Du Buff 0.06 28 10 88
Stone Old Guardian 2010 0.1 52 15 50
Stone Imperial Russian Stout - Vintage 2000 0.1 70 35 50
Stone 12th Anniversary Ale (1 Year Later) 0.1 70 35 50
Stone Old Guardian Barleywine 2009 0.1 52 15 50
Stone Imperial Russian Stout 2009 0.1 70 35 50
Stone Imperial Russian Stout 2004 0.1 70 35 50
Stone Old Guardian Barleywine 2007 0.1 52 15 50
Stone Old Guardian Barley Wine - 2004 0.1 52 15 50
Stone Brandy Barrel Aged Double Bastard 2006 0.1 85 15 50
Stone Old Guardian Belgo-barley Wine 0.1 52 8 50
Stone Levitation Ale 0.044 32 10 87
Stone Ruination IPA 0.077 90 10 90
Stone India Pale Ale (ipa) 0.069 50 11 91
Stonewall Ale 0.122 52 15 90
Stone 03.03.03 Vertical Epic Ale 0.09 50 16 90
Stone 09.09.09 Vertical Epic Ale 0.085 50 16 90
Stone Smoked Porter 0.059 27 29 90
Stone 06.06.06 Vertical Epic Ale 0.087 20 14 90
Alesmith Mikkeller Stone Belgian Style Tripel Ale 0.087 30 6 86
Stone Old Guardian (vintages Through 2003) 0.099 52 15 91
Oaked Arrogant Bastard Ale 0.072 85 15 54
Stone 21st Amendment Firestone Walker El Camino (un)real Black Ale 0.095 85 15 90
Stone Brandy Barrel Double Bastard 0.1 85 15 90
Stone Oaked Double Bastard 0.1 85 15 90
Stone Bourbon Barrel Old Guardian Barley Wine 0.113 52 15 90
Left Hand Smokejumper 0.098 25 17 90
Left Hand Widdershins 0.088 52 15 85
Left Hand Polestar Pilsner 0.05 33 6 63
Left Hand Imperial Stout 0.104 70 35 88
Left Hand Warrior IPA 0.068 50 11 88
Woodville #21 0.102 28 17 78
Left Hand Chainsaw Ale (double Sawtooth) 0.083 85 15 86
Left Hand Oak Aged Widdershins 0.088 52 15 86
Left Hand Deep Cover Brown Ale 0.043 30 27 45
Left Hand Goosinator Doppelbock 0.072 21 16 78
Left Hand Fade To Black 2009 0.085 50 35 88
Left Hand Twin Sisters Double IPA 0.096 90 12 85
Left Hand Smoked Goosinator Doppelbock 0.077 25 17 88
Left Hand Rye Bock 0.077 24 18 86
Left Hand Haystack Wheat 0.049 12 5 56
Left Hand Oak Aged Imperial Stout 0.104 70 35 50
Left Hand Oktoberfest 0.06 24 11 63
Left Hand Barrel-aged Wake Up Dead 0.1 70 35 50
Left Hand Milk Stout 0.053 55 45 91
Left Hand 400 Pound Monkey 0.07 50 11 70
Left Hand Black Jack Porter 0.058 27 25 83
Left Hand St. Vrain Tripel 0.09 30 6 80
Crest Super 0.084 35 4 8
Youngs Old Nick 0.072 52 15 86
Wells Bombardier (cask) 0.043 30 9 50
Wells Eagle IPA (5%) 0.05 30 9 21
Youngs Bitter (cask) 0.037 30 9 46
Youngs Special (cask) 0.045 30 9 48
Wells Banana Bread Beer (bottle) 0.052 52 15 43
Youngs Special London Ale 0.064 52 15 86
Wells Waggledance (cask) 0.04 22 5 30
Youngs Oatmeal Stout (london Stout) 0.052 55 35 86
Youngs Waggledance (bottle) 0.04 22 5 35
Courage Russian Imperial Stout 0.1 70 35 79
Youngs Double Chocolate Stout 0.052 55 35 91
Bells Winter White 0.05 15 3 80
Bells Oatmeal Stout 0.057 55 35 90
Bells Best Brown Ale 0.058 30 27 86
Bells Batch 8000 Ale 0.09 50 16 88
Bells Batch 9000 Ale 0.125 70 35 90
Bells Big Head San Diego Style Ale 0.111 90 12 90
Bells Wheat Eight Ale 0.054 14 19 71
Bells Batch 5000 Ale 0.09 25 17 88
Bells Amber Ale 0.06 32 14 83
Bells Twentieth Anniversary Ale 0.058 32 14 81
Bells Batch 4000 Ale 0.075 85 15 88
Bells Sparkling Ale 0.09 50 16 85
Bells Two Hearted Ale 0.07 50 11 90
Bells Consecrator Doppelbock 0.08 21 16 86
Bells Trumpeters Stout 0.054 37 32 88
Bells Wheat Four Ale 0.056 14 19 55
Bells Wheat Six Ale 0.054 14 19 73
Bells Wheat Two Ale 0.053 23 5 83
Bells Octoberfest Beer 0.058 24 11 60
Bells Beer 0.05 33 4 50
Bells Rye Stout 0.067 55 35 86
Bells Cherry Stout 0.07 55 35 85
Bells Susies Sweet Stout 0.056 55 35 68
Bells Oberon Ale 0.06 23 5 83
Bells Batch 6000 Ale 0.105 52 15 91
Bells Wheat Love Ale 0.08 52 15 88
Bells Java Stout 0.075 55 35 90
Bells Expedition Stout 0.105 70 35 91
Bells Christmas Ale 0.058 18 13 63
Bells Bourbon Barrel Aged Cherry Stout 0.085 55 35 90
Third Coast Old Ale 0.102 52 15 91
Bells Hopslam 0.1 90 12 91
Bells Hell Hath No Fury 0.077 20 14 88
Bells Kalamazoo Stout 0.06 55 35 91
Bells The Oracle Dipa Ale 0.104 90 12 91
Bells Special Double Cream Stout 0.061 55 35 90
Bells Porter 0.056 27 25 88
Bells Batch 7000 Ale 0.12 70 35 91
Raw
index.html
<!DOCTYPE html>
<style type="text/css">
body {
font-size: 12px;
font-family: Arial;
width: 960px;
margin: 1em auto 0.3em auto;
}
path {
fill: none;
stroke-width: 1px;
stroke-opacity: .5;
}
.background path {
stroke: #000;
stroke-opacity: .05;
}
.foreground path.fade {
display: none;
}
.foreground path.hover,
.foreground path.active {
stroke-width: 3px;
stroke-opacity: 1;
stroke: blue;
}
.brush .extent {
fill-opacity: .3;
stroke: #fff;
shape-rendering: crispEdges;
}
.axis line, .axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis text {
text-shadow: 0 1px 0 #fff;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="readme-srm2rgb.js"></script>
<script>
// Set up constants
var margin = {top: 30, right: 30, bottom: 20, left: 20},
w = 970 - margin.left - margin.right,
h = 450 - margin.top - margin.bottom,
normalAxis = d3.svg.axis().orient("left"),
percentFormat = d3.format(".0%"),
percentAxis = d3.svg.axis().orient("left").tickFormat(percentFormat),
rightAxis = d3.svg.axis().orient("right"),
dimensions = ["SRM", "IBU", "ABV", "Rating"],
hovering = [];
var axis = {
SRM: {
title: "Darkness",
axis: normalAxis
},
IBU: {
title: "Bitterness",
axis: normalAxis
},
ABV: {
title: "Alcohol Content",
axis: percentAxis
},
Rating: {
title: "User Rating",
axis: rightAxis
}
};
// Create the main SVG container
var svg = d3.select("body").append("svg")
.attr("width", w + margin.right + margin.left)
.attr("height", h + margin.bottom + margin.top)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// read input data, render chart, and setup listener to re-render on resize
d3.csv("beer.csv", function (beers) {
// Setup dimensions and scales
var x = d3.scale.ordinal().rangePoints([0, w], 0.1),
y = y || {},
line = d3.svg.line().interpolate("cardinal");
// Extract the list of dimensions and create a scale for each.
x.domain(dimensions);
dimensions.forEach(function (d) {
y[d] = (y[d] || d3.scale.linear())
.domain(d3.extent(beers, function (p) { return +p[d]; }))
.range([h, 0]);
});
// Create and render all of the faded lines
svg.append("g")
.attr("class", "background")
.selectAll("path")
.data(beers)
.enter().append("path")
.attr("d", path);
// Create and render all of the foreground lines
var lines = svg.append("g")
.attr("class", "foreground")
.selectAll("path")
.data(beers)
.enter().append("path")
.attr("stroke", srmColor)
.each(function (d) { d.line = d3.select(this); })
.attr("d", path)
.on("mouseover", mouseover)
.on("mouseout", mouseout)
.on("mouseleave", mouseout);
// Add a group element for each dimension.
var g = svg.selectAll(".dimension")
.data(dimensions)
.enter().append("g")
.attr("class", function (d) { return "dimension " + d; })
.attr("transform", function (d) { return "translate(" + x(d) + ")"; });
// Add an axis and title.
g.append("g")
.attr("class", "axis")
.each(function (d) { d3.select(this).call(axis[d].axis.scale(y[d])); })
.append("text")
.attr("text-anchor", "middle")
.attr("y", -9)
.text(function (d) { return axis[d].title; });
// Add and store a brush for each axis.
g.append("g")
.attr("class", "brush")
.each(function (d) {
y[d].brush = (y[d].brush || d3.svg.brush());
d3.select(this).call(y[d].brush.y(y[d]).on("brush", brush));
d3.select("." + d + " .brush").call(y[d].brush.extent(y[d].brush.extent()));
})
.selectAll("rect")
.attr("x", -8)
.attr("width", 16);
brush();
// apply the correct color to use for a beer based on its SRM
function srmColor(d) {
return window.srm2rgb(d['SRM']);
}
// Returns the path for a given data point.
function path(d) {
return line(dimensions.map(function (p) { return [x(p), y[p](d[p])]; }));
}
// Handles a brush event, toggling the display of foreground lines and updating list
function brush() {
mouseout();
var actives = dimensions.filter(function (p) { return !y[p].brush.empty(); }),
extents = actives.map(function (p) { return y[p].brush.extent(); }),
activelist = [];
lines.classed("fade", function (d) {
return !actives.every(function (p, i) {
return extents[i][0] <= d[p] && d[p] <= extents[i][1];
}) || !activelist.push(d);
});
hovering.forEach(hoveroutcell);
}
// on mouseover data, add hover class to line
function hoverovercell(d) {
d.line.classed('hover', true).moveToFront();
hovering.push(d);
}
// on mouseout of data, remove hover class from line
function hoveroutcell(d) {
d.line.classed('hover', false);
hovering = hovering.filter(function (e) { return d !== e; });
}
function mouseover(d) {
if (d.mouseover) { return; }
mouseout();
d.mouseover = true;
lines.filter(function (c) { return c === d; })
.classed("active", true)
.each(function () {
this.parentNode.appendChild(this);
});
var dx = d3.mouse(svg.node())[0],
dy = d3.mouse(svg.node())[1];
}
function mouseout() {
lines.filter(".active")
.classed("active", false)
.each(function (d) { d.mouseover = false; });
}
});
// add utility to move an SVG selection to the front
d3.selection.prototype.moveToFront = function () {
return this.each(function () {
this.parentNode.appendChild(this);
});
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment