Florida has better things to do than baseball

README.md

Florida has better things to do than baseball

Measuring fan loyalty with MLB attendance and wins

Visualization comparing MLB attendance vs. wins over the past decade. The viz loosely shows the obvious: win more ball games and more people will show up; however upon diving in there are a few interesting anomalies...

• Cubs fans love misery Regardless of wins, everyone still shows up to see if the goat's curse will ever be lifted in Chicago.
• The Twins have it backwards They were playing great ball prior to 2010, but having, at best, mediocre attendance. In 2010, attendance jumped significantly. Unfortunately for them, it was also their last winning season. Despite the poor performance, attendance has remained high, presumably due to the new ballbark that opened in 2010. Maybe they should have stuck with the old digs?
• The Bay loves their Giants, the A's... not so much San Fran appears second from the top in terms of the team loyalty ratio. Their neighbor Oakland on the other hand appears second from the bottom – even with a better ten year win average.
• Florida has better things to do than baseball Despite playing really solid baseball from '08 to '13, Tampa Bay has the worst overall attendance in baseball for the last decade. They're the only team with an attendance average less than their wins average, a.k.a. their average is in the "fan dead zone". The recent relocation of the Marlins seems to have significantly boosted attendance, but prior to that, the fish had equivalently horrid attendance.

Using the visualization

Hover over individual ball to see season details. Hover over team to see all seasons for team (without details). Hover over "Show Only Averages" to plot teams' ten year averages.

• X Axis: Attendance (as % of max capacity)
• Y Axis: Win Percentage

The scores next to the team name are a very simple, unscientific score of "fan loyalty". It is simply a ratio of mean attendance percentage to mean win percentage. It rewards teams that still have strong attendance, regardless of their wins. It especially rewards those that show up when the season is looking bleak*.

The "fan dead zone" encompasses seasons where a team's winning percentage was better than their attendance percentage.

Notes about the data:

• All info pulled from ESPN
• Some teams during some seasons reported > 100% attendance
• The capacity of ballparks can vary quite a bit. For example the Yankees have a 50k+ capacity stadium, whereas Boston has under 40k. You can argue those teams with larger parks are unfairly penalized by this viz.

Team Changes:

• < 2005 Washington Nationals were the Montreal Expos
• < 2012 Miami Marlins were the Florida Marlins

* And maybe to a fault. A plain old ratio is not ideal as it probably punishes teams with great records a bit too heavily. May replace this plain old ratio based score with more "fair" metric.

Hacked together by @nategood.

attendance-vs-wins-by-year.csv

colors.js

// https://github.com/arc90/teamcolors
var colors = {
        "Arizona":              ["#A71930", "#000000", "#DBCEAC", "#FFFFFF"],
        "Atlanta":              ["#002F5F", "#B71234", "#FFFFFF"],
        "Baltimore":                ["#ed4c09", "#000000", "#FFFFFF"],
        "Boston":               ["#C60C30", "#002244", "#FFFFFF"],
        "Chicago Cubs":                 ["#003279", "#CC0033", "#FFFFFF"],
        "Chicago Sox":              ["#C0C0C0", "#000000", "#FFFFFF"],
        "Cincinnati":               ["#C6011F", "#FFFFFF", "#000000"],
        "Colorado":                 ["#333366", "#000000", "#C0C0C0", "#FFFFFF"],
        "Cleveland":                ["#003366", "#d30335", "#FFFFFF"],
        "Detroit":              ["#001742", "#FFFFFF", "#DE4406"],
        "Houston":              ["#072854", "#FF7F00", "#FFFFFF"],
        "Kansas City":              ["#15317E", "#74B4FA", "#FFFFFF"],
        "Anaheim":              ["#B71234", "#002244", "#FFFFFF"],
        "LA Dodgers":               ["#083C6B", "#FFFFFF"],
        "Miami":                ["#F9423A", "#000000", "#8A8D8F", "#0077C8", "#FFD100", "#FFFFFF"],
        "Milwaukee":                ["#182B49", "#92754C", "#FFFFFF"],
        "Minnesota":                ["#072754", "#C6011F", "#FFFFFF"],
        "NY Mets":              ["#002C77", "#FB4F14", "#FFFFFF"],
        "NY Yankees":               ["#1C2841", "#FFFFFF", "#808080"],
        "Oakland":              ["#003831", "#FFD800", "#FFFFFF"],
        "Philadelphia":                 ["#BA0C2F", "#FFFFFF", "#003087"],
        "Pittsburgh":               ["#fdb829", "#000000", "#FFFFFF"],
        "San Diego":                ["#002147", "#FFFFFF", "#B4A76C"],
        "San Francisco":                ["#F2552C", "#000000", "#FFFDD0"],
        "Seattle":              ["#0C2C56", "#005C5C", "C0C0C0", "#FFFFFF"],
        "St. Louis":                ["#c41e3a", "#0A2252", "#FFFFFF"],
        "Tampa Bay":                ["#00285D", "#9ECEEE", "#FFFFFF", "#ffd700"],
        "Texas":                ["#BD1021", "#FFFFFF", "#003279"],
        "Toronto":              ["#003DA5", "#041E42", "#FFFFFF", "#DA291C"],
        "Washington":               ["#BA122B", "#11225B", "#FFFFFF" ]
};

index.html

<!DOCTYPE html>
<html>
 <head>
    <title>Determining Baseball Fan Loyalty: MLB Attendance vs. Wins</title>
    <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="colors.js"></script>
    <style type="text/css">
        html, body {
            font: 12px Helvetica;
            margin: 0; padding: 0;
        }
        circle {
            fill: #000;
            stroke-width: 0;
            fill-opacity: 0.5;
        }
        circle:hover, circle.highlight {
            fill-opacity: 1;
            stroke-width: 2;
            stroke-opacity: 1;
        }
        circle.hide {
            fill-opacity: 0.1;
        }
        #tooltip {
            background: #111;
            color: #fff;
            padding: 5px;
            text-align: right;
        }
        #tooltip span {
            font: 11px Helvetica;
            color: #ddd;
        }
        text {
            font-size: 10px;
            text-transform: uppercase;
        }
        text.team {
            text-transform: uppercase;
            fill: #ccc;
            cursor: pointer;
        }
        text.teamlowlight {
            fill: #666 !important;
        }
        text.team:hover {
            fill: #ccc;
            cursor: pointer;
            font-weight: bold;
        }
        rect.avg {
            fill: black;
            stroke-width: 2;
        }
        path.range {
            fill: none;
            stroke: #333;
            stroke-width: 3;
            stroke-opacity: 0.2;
        }
        div.toggle {
            cursor: pointer;
            color: #999;
            background: #ddd;
            padding: 5px;
            position: absolute;
            font-size: 10px;
            text-transform: uppercase;
        }
        div.toggle:hover {
            background: #666;
            color: #fff;
        }
        path.shame {
            fill: #ddd;
            stroke: none;
        }
        path.guidelines {
            stroke: #ccc;
            stroke-width: 1;
            /*fill-opacity*/
        }
    </style>
 </head>
 <body>
    <svg id="svg"></svg>
    <script type="text/javascript">

        var ttw = 125;
        var tooltip = d3.select("body")
            .append("div")
            .attr("id", "tooltip")
            .style("position", "absolute")
            .style("z-index", "10")
            .style("visibility", "hidden")
            .text("a simple tooltip");

        var slug = function (str) { return str.replace(/[^a-z]/ig, '_'); };

        var draw = function(errors, years) {
            var h = 500, w = 960;
            var gh = 420, gw = 760;
            var pad = (h - gh)/2;
            var wdiff = w - gw;
            var hdiff = h - gh;
            var r = 6;

            var maxAtt = d3.max(years, function(d) { return d.attendance; });
            var maxWins = d3.max(years, function(d) { return d.win; });
            var minAtt = d3.min(years, function(d) { return d.attendance; });
            var minWins = d3.min(years, function(d) { return d.win; });
            var round = function(x) { return Math.round(x * 1000) / 1000; };

            // todo normalize attendance and wins for these "scores"
            var aggregates = d3.nest()
                .key(function(d, i) { return d.team; })
                .rollup(function(d, i) {
                    var result = {
                        attendance: d3.mean(d, function(d2){ return parseFloat(d2.attendance); }),
                        attendanceMin: d3.min(d, function(d2){ return parseFloat(d2.attendance); }),
                        attendanceMax: d3.max(d, function(d2){ return parseFloat(d2.attendance); }),
                        win: d3.mean(d, function(d2){ return parseFloat(d2.win); }),
                        winMin: d3.min(d, function(d2){ return parseFloat(d2.win); }),
                        winMax: d3.max(d, function(d2){ return parseFloat(d2.win); })
                    };
                    result.score = round(result.attendance / result.win);
                    return result;
                })
                .entries(years);

            var teams = aggregates;
            teams.sort(function(a, b) { return d3.descending(a.values.score, b.values.score)});

            var ascale = d3.scale.linear().domain([minAtt, maxAtt]).range([2 * r, gw - pad - 2 * r]);
            var wscale = d3.scale.linear().domain([minWins, maxWins]).range([gh - 2 * r, 2 * r]);
            var tscale = d3.scale.linear().domain([0, teams.length]).range([pad, gh + pad]);

            var svg = d3.select("#svg")
                .attr("width", w)
                .attr("height", h)
                .style("background", "#eee");

            var g = svg.append("g")
                .attr("transform", "translate(" + (w - gw) + " " + pad + ")");

            var line = d3.svg.line();
            // Background
            svg.append("rect").attr("fill", "#333").attr("width", w - gw - pad).attr("height", h);
            // The shame zone + guidelines
            g.append("path").classed("shame", true)
                .attr("d", function () {
                    return line([
                        [ascale(minAtt) - r, wscale(maxWins) - r],
                        [ascale(minAtt) - r, wscale(minWins) + r],
                        [ascale(minWins), wscale(minWins) + r],
                        [ascale(maxWins), wscale(maxWins) - r],
                        [ascale(minAtt) - r, wscale(maxWins) - r]
                    ]);
                });
            g.append("text").style("fill", "#999").text("Fan Dead Zone").attr("x", 50).attr("y", 50);
            // 0.500
            g.append("path").style("stroke", "#ccc").attr("d", function() { return line([[ascale(minAtt), wscale(0.5)],[ascale(maxAtt), wscale(0.5)]]); })
            g.append("text").style("fill", "#999").text("0.500").attr("y", wscale(0.5) - 5).attr("x", ascale(maxAtt)).style("text-anchor","end");

            // Axis
            g.append("text")
                .attr("transform", "translate(0 " + (gh / 2) + ") rotate (-90)")
                .style("text-anchor", "middle")
                .text("Wins");
            g.append("text")
                .style("text-anchor", "start").style("fill", "#999")
                .attr("transform", "translate(0 " + wscale(minWins) + ") rotate (-90)")
                .text(minWins);
            g.append("text")
                .style("text-anchor", "end").style("fill", "#999")
                .attr("transform", "translate(0 " + wscale(maxWins) + ") rotate (-90)")
                .text(maxWins);
            g.append("text")
                .attr("transform", "translate(" + (gw / 2) + " " + (gh+10) + ")")
                .style("text-anchor", "middle")
                .text("Attendance");
            g.append("text")
                .style("text-anchor", "start").style("fill", "#999")
                .attr("transform", "translate(" + ascale(minAtt) + " " + (gh+10) + ")")
                .text(minAtt);
            g.append("text")
                .style("text-anchor", "end").style("fill", "#999")
                .attr("transform", "translate(" + ascale(maxAtt) + " " + (gh+10) + ")")
                .text(maxAtt);

            // Show Average Toggle
            d3.select("body")
                .append("div")
                .attr("class", "toggle")
                .text("Show Only Averages")
                .style("left", w - 170 + "px")
                .style("top", pad/2 + "px")
                .on("mouseover", function(d) {
                    toggleMode("aggregate");
                })
                .on("mouseout", function(d) {
                    toggleMode("yearly");
                })
                ;

                // Team Side Bar
                svg
                    .append("text")
                    .style("fill", "#fff")
                    .text("Team • Score")
                    .attr("transform", "translate(" + pad/2 + " " + tscale(0) + ")");
                svg.selectAll("text.team")
                    .data(teams)
                    .enter()
                    .append("text")
                    .attr("class", function(d) { return slug(d.key) + " team"; })
                    .text(function(d) { return d.key + " • " + (d.values.score); })
                    .attr("transform", function(d, i) { return "translate(" + (pad/2) + " " + tscale(i+1) + ")"; })
                    .on("mouseover", function(d) {highlight(d.key);})
                    .on("mouseout", unhighlight)
                    ;

                // Team Balls
                g.selectAll("g.team")
                    .data(years)
                    .enter()
                        .append("g")
                        .attr("class", "team")
                        .attr("transform", function (d) { return "translate(" + ascale(d.attendance) + " " + wscale(d.win) + ")"; })
                        .on("mouseover", function(d) {
                            tooltip.style("visibility", "visible");
                            tooltip.html(d.year + " " + d.team + "<br /><span>Win: " + d.win + "</span><br /><span>Att: " + d.attendance + "</span>");
                            highlight(d.team);
                        })
                        .on("mousemove", function(d) { tooltip.style("top", (event.pageY - 10)+"px").style("left",(event.pageX - 30 - parseInt(tooltip.style("width"), 10)) + "px");})
                        .on("mouseout", function(d) {
                            tooltip.style("visibility", "hidden");
                            unhighlight();
                        })
                        .append("circle")
                            .style("fill", function(d) { return colors[d.team][0]; })
                            .style("stroke", function(d) { return colors[d.team][1]; })
                            .attr("class", function(d) { return slug(d.team) + " " + d.year; })
                            .attr("id", function(d) { return d.team + ":" + d.year; })
                            .attr("title", function(d) { return d.team + ": " + d.year; })
                            .attr("r", 0.01)
                            .transition()
                            .delay(function(d, i) { return (d.year - 2004) * 300 + 100; })
                            .duration(300)
                            .attr("r", r)
                            ;

                // Averages
                var rw = 12;
                var avgs = g.selectAll("g.avg")
                    .data(aggregates)
                    .enter()
                        .append("g")
                        .attr("class", function(d) { return "avg " + slug(d.key); })
                        .style("visibility", "hidden")
                        .attr("transform", function (d) { return "translate(" + (ascale(d.values.attendance) - rw/2) + " " + (wscale(d.values.win) - rw/2) + ")"; })
                        ;
                    avgs
                        .append("path")
                        .attr("class", "range")
                        .style("stroke", function(d) { return colors[d.key][0]; })
                        .attr("d", function(d, i) {
                            return line([
                                [ascale(d.values.attendanceMin) - ascale(d.values.attendance) + rw/2, rw / 2],
                                [ascale(d.values.attendanceMax) - ascale(d.values.attendance) + rw/2, rw / 2]
                            ]);
                        })
                        ;
                    avgs
                        .append("rect")
                        .attr("class", "avg")
                        .style("fill", function(d) { return colors[d.key][0]; })
                        .style("stroke", function(d) { return colors[d.key][1]; })
                        .attr("width",  rw)
                        .attr("height",  rw)
                        ;
                    avgs
                        .append("text")
                        .text(function(d) { return d.key; /*+ " " + round(d.values.attendance) + " / " + round(d.values.win);*/ })
                        .attr("transform", function(d) {
                            return "translate(" + rw*1.5 + " " + (rw/2-rw/6+5) + ")";
                        })
                        .attr("class", "avg")
                        ;

        };

        var highlight = function(team) {
            var team = slug(team);
            d3.selectAll("circle").classed("hide", true);
            d3.selectAll("circle." + team).classed("highlight", true).classed("hide", false);
            d3.selectAll("text.team").classed("teamlowlight", true);
            d3.selectAll("text." + team).classed("teamlowlight", false);
            d3.selectAll("g." + team).style("visibility", "visible");
        };
        var unhighlight = function() {
            d3.selectAll("text.team").classed("teamlowlight", false)
            d3.selectAll("circle").classed("hide", false).classed("highlight", false);
            d3.selectAll("g.avg").style("visibility", "hidden");
        };

        var toggleMode = function(mode) {
            if (mode === "yearly") {
                d3.selectAll("g.team").style("visibility", "visible");
                d3.selectAll("g.avg").style("visibility", "hidden");
            } else if (mode === "aggregate") {
                d3.selectAll("g.team").style("visibility", "hidden");
                d3.selectAll("g.avg").style("visibility", "visible");
            }
        };


        d3.csv("attendance-vs-wins-by-year.csv").get(draw);

    </script>
 </body>
</html>

thumbnail.png