Fantasy Football Scores

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>The Justice League</title>
    <style>
    body {
      font-family: sans-serif;
      width: 960px;
      margin: auto;
    }

.player div {
      display: inline;
      float: left;
      height: 320px;
    }

h3 {
      margin-top: 1.5em;
      margin-bottom: 0em;
    }

p {
      text-align: center;
      margin-top: 2.8em;
      margin-bottom: 0;
      font-size: 12px;
    }

text {
      font-size: 11px;
    }

.mean {
      stroke: white;
      stroke-width: 1px;
    }

.axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }

.axis path {
      display: none;
    }

.x.axis {
      display: none;
    }

.margin .y.axis {
      display: none;
    }

.highlight {
      fill: orange !important;
    }
    </style>
  </head>
  <body>
    <h1>The Justice League</h1>
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="charts.js"></script>
    <script>
      var margin = {top: 10, left: 50, bottom: 30, right: 30},
          width = (960/3) - margin.left - margin.right,
          height = 250 - margin.top - margin.bottom;

var scale = {
        x: d3.scale.linear().range([0, width]),
        y: d3.scale.ordinal().rangeBands([height, 0], .1),
        color: d3.scale.linear().range(["brown", "lightgrey", "steelblue"])
          .interpolate(d3.interpolateLab)
      };

var svg = d3.select("body")

d3.json("data.json", ready);

function ready(error, data) {
        if (error) throw error;

data = data
          .sort(function(a,b) { return b.week - a.week; })
          .map(function(d) {
            d.margin = d.score - d.opponent_score;
            d.name = d.owner.split(" ")[0];
            d.opponent_name = d.opponent_owner.split(" ")[0];
            return d;
          });

var nest = d3.nest()
          .key(function(d) { return d.name; })
          .entries(data);

scale.x.domain([0, d3.max(data, function(d) { return d.score; })]);
        scale.y.domain(data.map(function(d) { return d.week; }));
        scale.color.domain([0, 0, d3.max(data, function(d) { return d.score; })]);

d3.select("body").selectAll(".player").data(nest)
          .enter().append("div")
            .attr("class", "player")
            .each(function(player) {
              var div = d3.select(this);
              div.append("div").attr("class", "own").append("h3").text(player.key);
              div.append("div").attr("class", "opponent").append("p").text("Opponent");
              div.append("div").attr("class", "margin").append("p").text("Point Margin");

scale.y.domain(data.map(function(d) { return d.week; }));
              scale.x.domain([0, d3.max(data, function(d) { return d.score; })]);
              scale.color.domain([0, 0, d3.max(data, function(d) { return d.score; })]);

// own chart
              div.select("div.own").call(appendSvg, "own").select(".own g")
                .call(draw.own, player.values, scale);

// opponent chart
              div.select("div.opponent").call(appendSvg, "opponent").select(".opponent g")
                .call(draw.opponent, player.values, scale);

scale.x.domain(d3.extent(data, function(d) { return d.margin; }));
              scale.color.domain([
                d3.min(data, function(d) { return d.margin; }), 0,
                d3.max(data, function(d) { return d.margin; })
              ]);

// point margin chart
              div.select("div.margin").call(appendSvg, "margin").select(".margin g")
                .call(draw.margin, player.values, scale, height);
            });

d3.selectAll(".bar")
          .on("mouseenter", function(hovered) {
            d3.selectAll(".bar")
              .classed("highlight", function(d) { return d.week == hovered.week; })
          })
          .on("mouseleave", function(hovered) {
            d3.selectAll(".bar")
              .classed("highlight", false);
          });
      }

function appendSvg(selection, c) {
        return selection.append("svg")
            .attr("class", c)
            .attr("width", width + margin.right + margin.left)
            .attr("height", height + margin.top + margin.bottom)
          .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
      }

d3.select(self.frameElement)
        .style("height", 3920 + "px");
    </script>
  </body>
</html>

https://d3js.org/d3.v3.min.js