a10k · November 30, 2015 09:27
diff --git a/index.html b/index.html
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Venn Diagrams with D3.js</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    
    <link rel="canonical" href="http://www.benfrederickson.com/venn-diagrams-with-d3.js/" />
 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link href="http://static.benfrederickson.com.s3-website-us-east-1.amazonaws.com/bootstrap-3.0.0/css/bootstrap.min.css" rel="stylesheet">
    <!--prettify.css -->
    <style>
        .navbar-default {
             background-color: #FAFAFA;
        }
        .navbar-default .navbar-brand a {
            color: #333;
            padding-bottom: 4px;
            text-decoration: none;
        }

        .navbar-default .navbar-nav > li > a {
            color: #333;
            font-size:16px;
            padding-bottom: 4px;
        }

        .navbar-default .navbar-nav > li > a > i {
            font-size: 20px;
        }

        .navbar-default .navbar-nav > li > a:hover {
            color: #003;
        }

        .navbar-default .navbar-icons > li > a:hover {
            border-bottom-style: solid;
            border-width: 3px;
        }

        .navbar-default .navbar-brand a:hover {
            color: #003;
            border-bottom-style: solid;
            border-width: 3px;
        }

        .pln { color: #4d4d4c; }
        .str { color: #718c00; }
        .kwd { color: #8959a8; }
        .com { color: #8e908c; }
        .typ { color: #4271ae; }
        .lit { color: #f5871f; }
        .pun { color: #4d4d4c; }
        .opn { color: #4d4d4c; }
        .clo { color: #4d4d4c; }
        .tag { color: #c82829; }
        .atn { color: #f5871f; }
        .atv { color: #3e999f; }
        .dec { color: #f5871f; }
        .var { color: #c82829; }
        .fun { color: #4271ae; }

        .prettyprint {
          padding: 8px;
          background-color: #fcfcfe;
          border: 1px solid #e1e1e8;
        }

        .prettyprint.linenums {
          -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
             -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
                  box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
        }

        /* Specify class=linenums on a pre to get line numbering */
        ol.linenums {
          margin: 0 0 0 33px; /* IE indents via margin-left */
        }
        ol.linenums li {
          padding-left: 12px;
          color: #bebec5;
          line-height: 18px;
        }

        pre {
          overflow: auto;
          word-wrap: normal;
          white-space: pre;
        }
    </style>

  </head>


 <script src="http://www.benfrederickson.com/images/d3.v3.min.js" charset="utf-8"></script>
 <script src="http://www.benfrederickson.com/images/venn.js"></script>
 <script>
 function hasSVG() {
    return document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure",
    "1.1");
 }
 if (hasSVG()) {
    d3.select(".svgcheck").attr("style", "display:none");
 }
 </script>




 <div style="float:left;padding:20px">
    <table>
    <tr>
      <td>|A|</td>
      <td>
        <input class="input-mini venn_area" id="A" type="number" value="16">
      </td>
    </tr>
    <tr>
      <td>|B|</td>
      <td>
        <input class="input-mini venn_area" id="B" type="number" value="16">
      </td>
    </tr>
    <tr>
      <td>|C|</td>
      <td>
        <input class="input-mini venn_area" id="C" type="number" value="12">
      </td>
    </tr>
    <tr>
      <td>|A&#8745B|</td>
      <td>
        <input class="input-mini venn_area" id="A,B" type="number" value="4">
      </td>
    </tr>
    <tr>
      <td>|A&#8745C|</td>
      <td>
        <input class="input-mini venn_area" id="A,C" type="number" value="4">
      </td>
    </tr>
    <tr>
      <td>|B&#8745C|</td>
      <td>
        <input class="input-mini venn_area" id="B,C" type="number" value="3">
      </td>
    </tr>
    <tr>
      <td>|A&#8745B&#8745C|&nbsp</td>
      <td>
        <input class="input-mini venn_area" id="A,B,C" type="number" value="2">
      </td>
    </tr>
    </table>
 </div>


 <div id="dynamic"></div>


 <div style="clear: both;"></div>


 <script>

 function getSetIntersections() {
    areas = d3.selectAll(".venn_area")[0].map(
        function (element) { 
            return { sets: element.id.split(","), 
                     size: parseFloat(element.value)};} );
    return areas;
 }


 // draw the initial set
 var w = Math.min(480, document.documentElement.clientWidth-30);
 var chart = venn.VennDiagram()
                 .width(w)
                 .height(w * .8);

 d3.select("#dynamic").datum(getSetIntersections()).call(chart);

 // redraw the sets on any change in input
 d3.selectAll("input").on("change", function() {
    d3.select("#dynamic").datum(getSetIntersections()).call(chart);
 });

 </script>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Venn Diagrams with D3.js</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">


	<link rel="canonical" href="http://www.benfrederickson.com/venn-diagrams-with-d3.js/" />
	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
	<link href="http://static.benfrederickson.com.s3-website-us-east-1.amazonaws.com/bootstrap-3.0.0/css/bootstrap.min.css" rel="stylesheet">
	<!--prettify.css -->
	<style>
	.navbar-default {
	background-color: #FAFAFA;
	}
	.navbar-default .navbar-brand a {
	color: #333;
	padding-bottom: 4px;
	text-decoration: none;
	}

	.navbar-default .navbar-nav > li > a {
	color: #333;
	font-size:16px;
	padding-bottom: 4px;
	}

	.navbar-default .navbar-nav > li > a > i {
	font-size: 20px;
	}

	.navbar-default .navbar-nav > li > a:hover {
	color: #003;
	}

	.navbar-default .navbar-icons > li > a:hover {
	border-bottom-style: solid;
	border-width: 3px;
	}

	.navbar-default .navbar-brand a:hover {
	color: #003;
	border-bottom-style: solid;
	border-width: 3px;
	}

	.pln { color: #4d4d4c; }
	.str { color: #718c00; }
	.kwd { color: #8959a8; }
	.com { color: #8e908c; }
	.typ { color: #4271ae; }
	.lit { color: #f5871f; }
	.pun { color: #4d4d4c; }
	.opn { color: #4d4d4c; }
	.clo { color: #4d4d4c; }
	.tag { color: #c82829; }
	.atn { color: #f5871f; }
	.atv { color: #3e999f; }
	.dec { color: #f5871f; }
	.var { color: #c82829; }
	.fun { color: #4271ae; }

	.prettyprint {
	padding: 8px;
	background-color: #fcfcfe;
	border: 1px solid #e1e1e8;
	}

	.prettyprint.linenums {
	-webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
	-moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
	box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
	}

	/* Specify class=linenums on a pre to get line numbering */
	ol.linenums {
	margin: 0 0 0 33px; /* IE indents via margin-left */
	}
	ol.linenums li {
	padding-left: 12px;
	color: #bebec5;
	line-height: 18px;
	}

	pre {
	overflow: auto;
	word-wrap: normal;
	white-space: pre;
	}
	</style>

	</head>


	<script src="http://www.benfrederickson.com/images/d3.v3.min.js" charset="utf-8"></script>
	<script src="http://www.benfrederickson.com/images/venn.js"></script>
	<script>
	function hasSVG() {
	return document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure",
	"1.1");
	}
	if (hasSVG()) {
	d3.select(".svgcheck").attr("style", "display:none");
	}
	</script>




	<div style="float:left;padding:20px">
	<table>
	<tr>
	<td>\|A\|</td>
	<td>
	<input class="input-mini venn_area" id="A" type="number" value="16">
	</td>
	</tr>
	<tr>
	<td>\|B\|</td>
	<td>
	<input class="input-mini venn_area" id="B" type="number" value="16">
	</td>
	</tr>
	<tr>
	<td>\|C\|</td>
	<td>
	<input class="input-mini venn_area" id="C" type="number" value="12">
	</td>
	</tr>
	<tr>
	<td>\|A&#8745B\|</td>
	<td>
	<input class="input-mini venn_area" id="A,B" type="number" value="4">
	</td>
	</tr>
	<tr>
	<td>\|A&#8745C\|</td>
	<td>
	<input class="input-mini venn_area" id="A,C" type="number" value="4">
	</td>
	</tr>
	<tr>
	<td>\|B&#8745C\|</td>
	<td>
	<input class="input-mini venn_area" id="B,C" type="number" value="3">
	</td>
	</tr>
	<tr>
	<td>\|A&#8745B&#8745C\|&nbsp</td>
	<td>
	<input class="input-mini venn_area" id="A,B,C" type="number" value="2">
	</td>
	</tr>
	</table>
	</div>


	<div id="dynamic"></div>


	<div style="clear: both;"></div>


	<script>

	function getSetIntersections() {
	areas = d3.selectAll(".venn_area")[0].map(
	function (element) {
	return { sets: element.id.split(","),
	size: parseFloat(element.value)};} );
	return areas;
	}


	// draw the initial set
	var w = Math.min(480, document.documentElement.clientWidth-30);
	var chart = venn.VennDiagram()
	.width(w)
	.height(w * .8);

	d3.select("#dynamic").datum(getSetIntersections()).call(chart);

	// redraw the sets on any change in input
	d3.selectAll("input").on("change", function() {
	d3.select("#dynamic").datum(getSetIntersections()).call(chart);
	});

	</script>