D3 - Hard coded venn diagram.

A Venn diagram with hard-coded circle size and color. Just starting out...

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<h1>Awesome Venn Diagarm Library by Ben Frederickson</h1>
<div class="info">
  <a href="http://www.benfrederickson.com/venn-diagrams-with-d3.js/">Venn Diagrams with D3.js</a>
  | <a href="https://github.com/benfred/venn.js">venn.js</a>
</div>

<div class="content">
  <div class="form">
    <textarea id="data" rows="30" cols="60">
  {
    "sets": [
      {"label": "Radiohead", "size": 77348},
      {"label": "Thom Yorke", "size": 5621},
      {"label": "John Lennon", "size": 7773},
      {"label": "Kanye West", "size": 77348},
      {"label": "Eminem", "size": 19056},
      {"label": "Elvis Presley", "size": 15839},
      {"label": "Explosions in the Sky", "size": 10813},
      {"label": "Bach", "size": 9264},
      {"label": "Mozart", "size": 3959},
      {"label": "Philip Glass", "size": 4793},
      {"label": "St. Germain", "size": 4136},
      {"label": "Morrissey", "size": 10945},
      {"label": "Outkast", "size": 8444}
    ],
    "overlaps": [
      {"sets": [0, 1], "size": 4832},
      {"sets": [0, 2], "size": 2602},
      {"sets": [0, 3], "size": 6141},
      {"sets": [0, 4], "size": 2723},
      {"sets": [0, 5], "size": 3177},
      {"sets": [0, 6], "size": 5384},
      {"sets": [0, 7], "size": 2252},
      {"sets": [0, 8], "size": 877},
      {"sets": [0, 9], "size": 1663},
      {"sets": [0, 10], "size": 899},
      {"sets": [0, 11], "size": 4557},
      {"sets": [0, 12], "size": 2332},
      {"sets": [1, 2], "size": 162},
      {"sets": [1, 3], "size": 396},
      {"sets": [1, 4], "size": 133},
      {"sets": [1, 5], "size": 135},
      {"sets": [1, 6], "size": 511},
      {"sets": [1, 7], "size": 159},
      {"sets": [1, 8], "size": 47},
      {"sets": [1, 9], "size": 168},
      {"sets": [1, 10], "size": 68},
      {"sets": [1, 11], "size": 336},
      {"sets": [1, 12], "size": 172},
      {"sets": [2, 3], "size": 406},
      {"sets": [2, 4], "size": 350},
      {"sets":...

CSS

@import url(htp://fonts.googleapis.com/css?family=Roboto);

body {
  width: 1020px;
  margin: 0 auto;
  text-align: center;
  background-color: #eee;
  font-family: 'Roboto';
}

ul {
  list-style: none;
}

.form {
  float: left;
  margin: 20px 10px;
}

textarea {
  font-family: 'Courier';
}

.venn {
  float: right;
}

.venntooltip {
  position: absolute;
  text-align: center;
  width: 128px;
  height: 22px;
  background: #333;
  color: #ddd;
  border: 0px;
  border-radius: 8px;
  opacity: 0;
}

svg {
  font-family: 'Roboto';
  font-weight: 300;
  font-size: 12px;
}

.footer {
  clear: both;
}

JavaScript

(function(venn) {
    "use strict";
    /** given a list of set objects, and their corresponding overlaps.
    updates the (x, y, radius) attribute on each set such that their positions
    roughly correspond to the desired overlaps */
    venn.venn = function(sets, overlaps, parameters) {
        parameters = parameters || {};
        parameters.maxIterations = parameters.maxIterations || 500;
        var lossFunction = parameters.lossFunction || venn.lossFunction;
        var initialLayout = parameters.layoutFunction || venn.greedyLayout;

        // initial layout is done greedily
        sets = initialLayout(sets, overlaps);

        // transform x/y coordinates to a vector to optimize
        var initial = new Array(2*sets.length);
        for (var i = 0; i < sets.length; ++i) {
            initial[2 * i] = sets[i].x;
            initial[2 * i + 1] = sets[i].y;
        }

        // optimize initial layout from our loss function
        var totalFunctionCalls = 0;
        var solution = venn.fmin(
            function(values) {
                totalFunctionCalls += 1;
                var current = new Array(sets.length);
                for (var i = 0; i < sets.length; ++i) {
                    current[i] = {x: values[2 * i],
                                  y: values[2 * i + 1],
                                  radius : sets[i].radius,
                                  size : sets[i].size};
                }
                return lossFunction(current, overlaps);
            },
            initial,
            parameters);

        // transform solution vector back to x/y points
        var positions = solution.solution;
        for (i = 0; i < sets.length; ++i) {
            sets[i].x = positions[2 * i];
            sets[i].y = positions[2 * i + 1];
        }

        return sets;
    };

    /** Returns the distance necessary for two circles of radius r1 + r2 to
    have the overlap area 'overlap' */
    venn.distanceFromIntersectArea = function(r1,...