alex-r-bigelow · July 31, 2017 18:52 · Jul 31, 2017 · Jul 31, 2017 · Jul 31, 2017 · Jul 31, 2017
diff --git a/.block b/.block
@@ -1,4 +1,4 @@
 license: mit
-scrolling: yes
+scrolling: no
 border: yes
-height: 614
+height: 612
diff --git a/.block b/.block
@@ -1,4 +1,4 @@
 license: mit
 scrolling: yes
 border: yes
-height: 612
+height: 614
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-This is a gist version of the [hanpuku demo](https://www.youtube.com/watch?v=eNoDZcs7vVs)... unfortunately, gists (and blocks) aren't exactly the best medium to show this off.
+This is a gist version of the **first part** of the [hanpuku demo](https://www.youtube.com/watch?v=eNoDZcs7vVs). Apologies that this (and hanpuku) still use D3 v3!
 
 In theory, to pull this off *without* hanpuku, you first would have to run the script with an (almost) empty SVG tag:
 ```
@@ -9,9 +9,7 @@ In theory, to pull this off *without* hanpuku, you first would have to run the s
 ```
 If you inspect the result in Chrome's developer tools, you could right-click the SVG tag, choose "Edit as HTML", copy the text, paste it into a file, and then open that file with Illustrator for editing. The really tricky bit is the part where you save the SVG file using Illustrator. It will completely mess up your IDs, class names, and possibly grouping structures that you created with your code (it totally does in this example). If somehow you can sort that part out, you'd paste all the text inline in the HTML file (because you can't manipulate an SVG IMG with D3!).
 
-Of course, this example didn't actually follow that pattern—I just dumped the SVG produced by Hanpuku (saving a Hanpuku-edited Illustrator file as SVG tends to behave a little better), and run the corresponding script.
-
-Apologies that this still uses D3 v3!
+Of course, in practice, Illustrator messes with things to the point that it's impossible to export an SVG that is still compatible with the script that originally created it.
 
 Data source: http://www.georgelmurphy.com/berrics/
 

diff --git a/index.html b/index.html
diff --git a/.block b/.block
@@ -1,3 +1,4 @@
 license: mit
 scrolling: yes
 border: yes
+height: 612
diff --git a/script.js b/script.js
@@ -118,7 +118,7 @@ d3.csv('matches.csv', function (data) {
     .links(graph.edges)
     .start();
 
-  var link = linkLayer.selectAll('.link')
+  var link = linkLayer.selectAll('path')
     .data(graph.edges);
   var linkEnter = link.enter();
   linkEnter.append('path')

diff --git a/README.md b/README.md
@@ -1,13 +1,15 @@
-This is a gist version of the [hanpuku demo](https://www.youtube.com/watch?v=eNoDZcs7vVs)... and, of course, without Hanpuku, it's much harder!
+This is a gist version of the [hanpuku demo](https://www.youtube.com/watch?v=eNoDZcs7vVs)... unfortunately, gists (and blocks) aren't exactly the best medium to show this off.
 
-To pull this off *without* hanpuku, you first have to run the script with an (almost) empty SVG tag:
+In theory, to pull this off *without* hanpuku, you first would have to run the script with an (almost) empty SVG tag:
 ```
 <svg width="792" height="612">
   <g id="Layer_1"></g>
   <g id="Layer_2"></g>
 </svg>
 ```
-If you inspect the result in Chrome's developer tools, you can right-click the SVG tag, choose "Edit as HTML", copy the text, paste it into a file, and then open that file with Illustrator for editing. The really tricky bit is saving the SVG file with Illustrator in a way that doesn't totally nuke all the class names and IDs... you probably will have to edit the (now really big) SVG file manually with a text editor. Finally, we paste all the text inline in the HTML file (because you can't manipulate an SVG IMG with D3!).
+If you inspect the result in Chrome's developer tools, you could right-click the SVG tag, choose "Edit as HTML", copy the text, paste it into a file, and then open that file with Illustrator for editing. The really tricky bit is the part where you save the SVG file using Illustrator. It will completely mess up your IDs, class names, and possibly grouping structures that you created with your code (it totally does in this example). If somehow you can sort that part out, you'd paste all the text inline in the HTML file (because you can't manipulate an SVG IMG with D3!).
+
+Of course, this example didn't actually follow that pattern—I just dumped the SVG produced by Hanpuku (saving a Hanpuku-edited Illustrator file as SVG tends to behave a little better), and run the corresponding script.
 
 Apologies that this still uses D3 v3!
 

diff --git a/index.html b/index.html
diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
 </head>
 
 <body>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420.77 451.84">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 792 612">
   <defs>
     <style>
       .a {
@@ -91,7 +91,7 @@
     </style>
   </defs>
   <title>berrics_edited</title>
-  <g>
+  <g id="Layer_1">
     <path d="M551.08,367.34q6.06-25.59-11.94-39,18,13.36,24.42,32.61Z" transform="translate(-185.01 -76.96)"/>
     <path d="M574.64,350.91q-12.52-23.71-35.5-22.52,23-1.18,40.93,9.62Z" transform="translate(-185.01 -76.96)"/>
     <path d="M215.24,270.73q17.1,12.32,40.23,13.12-23.12-.8-33.75-25.53Z" transform="translate(-185.01 -76.96)"/>
@@ -155,7 +155,7 @@
     <path d="M427.3,263.28q-27.59,16.42-31.18,45.2a118.52,118.52,0,0,1,18.73-51.62Z" transform="translate(-185.01 -76.96)"/>
     <path d="M375.83,359.2a117.29,117.29,0,0,0,20.29-50.71Q391.65,337,363.6,352.37Z" transform="translate(-185.01 -76.96)"/>
   </g>
-  <g>
+  <g id="Layer_2">
     <rect class="a" x="363.3" y="275.21" width="18" height="18"/>
     <rect class="b" x="383.34" y="255.5" width="18" height="18"/>
     <rect class="a" x="345.12" y="239.43" width="18" height="18"/>

diff --git a/index.html b/index.html
@@ -6,10 +6,221 @@
 </head>
 
 <body>
-  <svg width="792" height="612">
-    <g id="Layer_1"></g>
-    <g id="Layer_2"></g>
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420.77 451.84">
+  <defs>
+    <style>
+      .a {
+        fill: #393b79;
+      }
+
+      .b {
+        fill: #5254a3;
+      }
+
+      .c {
+        fill: #6b6ecf;
+      }
+
+      .d {
+        fill: #9c9ede;
+      }
+
+      .e {
+        fill: #637939;
+      }
+
+      .f {
+        fill: #8ca252;
+      }
+
+      .g {
+        fill: #b5cf6b;
+      }
+
+      .h {
+        fill: #cedb9c;
+      }
+
+      .i {
+        fill: #8c6d31;
+      }
+
+      .j {
+        fill: #bd9e39;
+      }
+
+      .k {
+        fill: #e7ba52;
+      }
+
+      .l {
+        fill: #e7cb94;
+      }
+
+      .m {
+        fill: #843c39;
+      }
+
+      .n {
+        fill: #ad494a;
+      }
+
+      .o {
+        fill: #d6616b;
+      }
+
+      .p {
+        fill: #e7969c;
+      }
+
+      .q {
+        fill: #7b4173;
+      }
+
+      .r {
+        fill: #a55194;
+      }
+
+      .s {
+        fill: #ce6dbd;
+      }
+
+      .t {
+        fill: #de9ed6;
+      }
+    </style>
+  </defs>
+  <title>berrics_edited</title>
+  <g>
+    <path d="M551.08,367.34q6.06-25.59-11.94-39,18,13.36,24.42,32.61Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M574.64,350.91q-12.52-23.71-35.5-22.52,23-1.18,40.93,9.62Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M215.24,270.73q17.1,12.32,40.23,13.12-23.12-.8-33.75-25.53Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M233.77,249.78q4.84,19.52,21.7,34.07-16.85-14.54-8.77-39.43Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M579.89,225.19q-19.2-17.31-38.84-7.62,19.63-9.69,39.06-6.38Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M573.53,192.82q-26.14,3.2-32.48,24.74,6.34-21.55,22.21-34.26Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M529.61,166.75q-26,4-31.59,25.68,5.61-21.7,21-34.86Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M486.9,156.6Q486,175.25,498,192.43q-12-17.18,2.79-37.41Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M269.36,168.37q20.29,5.3,42-2.31-21.75,7.61-40.47-11.6Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M281.15,139q10,17.55,30.25,27-20.23-9.5-19.26-35.72Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M284.46,221.6q18.22,4.81,37.71-3.33-19.49,8.13-36.34-10.61Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M328.92,254.27q9.17-23-6.75-36,15.92,13,19.77,30.84Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M340.52,112.5q15,13.28,37.05,15.65-22.06-2.37-29.44-27.4Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M366.07,89.77q-.71,19.94,11.5,38.38-12.21-18.44,2.41-40Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M464.17,117.75Q438.6,114,427.61,132.9q11-18.94,29-26.93Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M438.27,94.73q-18.77,17.81-10.66,38.17-8.11-20.36-3.28-39.49Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M192.18,309.51q17.12,12,40.09,12.35-23-.37-33.79-24.86Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M196.11,340.54q20-3.13,36.16-18.67-16.14,15.54-40.35,5.31Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M206.57,398.62q19.33,4.67,39.78-3.61-20.44,8.28-38.58-10.34Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M222.64,428.12q16.41-11.92,23.7-33.11-7.29,21.19-33.52,23.13Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M285.91,461.12q13.84-20.88,1-37.45,12.81,16.57,12.79,35.21Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M266.37,458.39q15.22-13.13,20.57-34.72-5.35,21.59-31.19,25.6Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M336.33,508.21q17.22-9.31,26.58-29-9.36,19.66-35,17.83Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M368.92,518.53q3.49-19.49-6-39.3,9.5,19.81-8,38.95Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M443.53,511q-7.48-25-29.51-27.18,22,2.22,37.05,15.38Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M412.47,523.76Q426.62,502,414,483.85q12.6,18.11,12.32,38Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M513.36,409.13q-19.41-16.6-38.25-6.21,18.85-10.39,38-7.79Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M459.67,370.47q1.42,17.83,15.44,32.46-14-14.63-1.87-35.9Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M522,459.36q-19.61-18.49-41.21-10.06,21.6-8.43,42.24-3.9Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M502.12,484.63q-.43-26.49-21.29-35.33,20.86,8.84,31.88,26.17Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M594.15,309.51Q581.56,286,558.82,287.6q22.75-1.55,40.6,8.94Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M598.3,278.7q-24.94-8-39.49,8.9,14.54-16.91,34.09-21.82Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M371.66,131.9q9,19.75,28.94,32.54-20-12.79-17.12-40Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M432.93,137.46q-26.42,4.71-32.33,27,5.91-22.27,21.7-36.09Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M232.34,328.86q22.09,2.79,44.06-7.41-22,10.21-44.19-6.59Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M249.35,287.25q7.84,20.26,27,34.2-19.2-13.94-14.8-41Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M408.24,487.79q2-27.17-18.21-39.11,20.26,11.95,29.77,31.23Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M368.14,483.88q15.8-13.28,21.88-35.2-6.08,21.91-32.35,25.9Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M476.73,455q-9.16-27.6-34.14-33.32,25,5.72,42.34,22Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M478.6,409q-24.75-5.36-36,12.67,11.27-18,29-24.8Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M559.58,294.56q-23.49-14.53-44-2.21,20.54-12.31,42.5-11.7Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M533.28,332.22q2.43-27.33-17.73-39.87,20.16,12.54,29.44,32.21Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M491,192.83q-1.87,19.67,9.23,38.59Q489.16,212.5,505,192Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M543.3,224.19q-25.86-9.17-43,7.23,17.18-16.4,38.53-20.48Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M326.91,223.41q15.59-10.31,22.35-30.17-6.77,19.86-31.85,19.88Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M307.32,171.74q17.18,16,41.94,21.5-24.76-5.47-33.78-32.88Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M248.1,401.79q21.38-2.43,39.51-17.44-18.13,15-43,3.88Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M293.94,423.79q3.34-19.61-6.33-39.44,9.66,19.83-7.67,39.2Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M292.85,389q17.15-14.84,24.57-38.3-7.42,23.46-35,29Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M272.33,327.15q18.77,17.06,45.09,23.54-26.32-6.48-37-34.94Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M439.9,428.12q-16.4-25.25-43.19-25.58,26.79.33,48.58,12.66Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M397,449.68q6.31-22.64-.25-47.14,6.56,24.5-13.6,45.14Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M511.9,298.32q-12.54-27.59-39.17-32.15,26.62,4.56,46.47,20.2Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M505.75,235.77q-27.09,6.82-33,30.4,5.93-23.58,22-39.09Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M346.57,199.71q21.21,12.11,47.43,12.23-26.22-.12-42-25.15Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M407.53,165.4Q387.39,186.81,394,211.94q-6.61-25.13-.34-48.46Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M316.74,357.66q25.86,5.53,53-1.87-27.12,7.41-51.62-12.06Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M390.64,406q1.23-31.87-20.93-50.25A116.5,116.5,0,0,1,402.77,399Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M387.9,215.37a121.74,121.74,0,0,0,33.18,44.71q-22.25-19.17-21-51.57Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M471.91,273.12q-23.84-19.93-50.84-13,27-6.88,52.48-.86Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M427.3,263.28q-27.59,16.42-31.18,45.2a118.52,118.52,0,0,1,18.73-51.62Z" transform="translate(-185.01 -76.96)"/>
+    <path d="M375.83,359.2a117.29,117.29,0,0,0,20.29-50.71Q391.65,337,363.6,352.37Z" transform="translate(-185.01 -76.96)"/>
+  </g>
+  <g>
+    <rect class="a" x="363.3" y="275.21" width="18" height="18"/>
+    <rect class="b" x="383.34" y="255.5" width="18" height="18"/>
+    <rect class="a" x="345.12" y="239.43" width="18" height="18"/>
+    <rect class="c" x="24.47" y="175.57" width="18" height="18"/>
+    <rect class="d" x="46.22" y="158.14" width="18" height="18"/>
+    <rect class="c" x="61.45" y="194.89" width="18" height="18"/>
+    <rect class="e" x="385.98" y="129.23" width="18" height="18"/>
+    <rect class="f" x="374.38" y="99.1" width="18" height="18"/>
+    <rect class="e" x="347.04" y="128.61" width="18" height="18"/>
+    <rect class="g" x="330.32" y="73.2" width="18" height="18"/>
+    <rect class="h" x="299.84" y="66.85" width="18" height="18"/>
+    <rect class="g" x="304.01" y="103.47" width="18" height="18"/>
+    <rect class="i" x="76.13" y="72.45" width="18" height="18"/>
+    <rect class="j" x="92.64" y="45.72" width="18" height="18"/>
+    <rect class="i" x="117.39" y="77.1" width="18" height="18"/>
+    <rect class="k" x="91.13" y="125.67" width="18" height="18"/>
+    <rect class="l" x="141.41" y="162.73" width="18" height="18"/>
+    <rect class="k" x="128.15" y="129.31" width="18" height="18"/>
+    <rect class="m" x="150.31" y="17.66" width="18" height="18"/>
+    <rect class="n" x="179.01" width="18" height="18"/>
+    <rect class="m" x="183.55" y="39.19" width="18" height="18"/>
+    <rect class="o" x="266.38" y="22.9" width="18" height="18"/>
+    <rect class="p" x="237.29" y="5.11" width="18" height="18"/>
+    <rect class="o" x="233.6" y="43.94" width="18" height="18"/>
+    <rect class="q" x="1.32" y="214.3" width="18" height="18"/>
+    <rect class="r" y="244.9" width="18" height="18"/>
+    <rect class="q" x="38.25" y="232.9" width="18" height="18"/>
+    <rect class="s" x="13.16" y="302.68" width="18" height="18"/>
+    <rect class="t" x="23.72" y="334.17" width="18" height="18"/>
+    <rect class="s" x="52.33" y="306.05" width="18" height="18"/>
+    <rect class="a" x="98.81" y="371.04" width="18" height="18"/>
+    <rect class="b" x="67.04" y="364.87" width="18" height="18"/>
+    <rect class="a" x="92.92" y="334.71" width="18" height="18"/>
+    <rect class="c" x="138.08" y="413.67" width="18" height="18"/>
+    <rect class="d" x="167.91" y="429.39" width="18" height="18"/>
+    <rect class="c" x="168.89" y="390.27" width="18" height="18"/>
+    <rect class="e" x="253.29" y="416.17" width="18" height="18"/>
+    <rect class="f" x="225.39" y="433.84" width="18" height="18"/>
+    <rect class="e" x="220" y="394.89" width="18" height="18"/>
+    <rect class="g" x="319.2" y="313.18" width="18" height="18"/>
+    <rect class="h" x="272.44" y="279.79" width="18" height="18"/>
+    <rect class="g" x="281.09" y="313.96" width="18" height="18"/>
+    <rect class="i" x="328.54" y="363.42" width="18" height="18"/>
+    <rect class="j" x="313.4" y="391.09" width="18" height="18"/>
+    <rect class="i" x="286.82" y="360.34" width="18" height="18"/>
+    <rect class="k" x="402.77" y="214.07" width="18" height="18"/>
+    <rect class="l" x="401.59" y="183.28" width="18" height="18"/>
+    <rect class="k" x="364.8" y="198.64" width="18" height="18"/>
+    <rect class="m" x="206.58" y="75.48" width="18" height="18"/>
+    <rect class="q" x="82.38" y="232.49" width="18" height="18"/>
+    <rect class="e" x="196.01" y="359.72" width="18" height="18"/>
+    <rect class="i" x="248.57" y="332.7" width="18" height="18"/>
+    <rect class="k" x="321.53" y="203.39" width="18" height="18"/>
+    <rect class="g" x="306.25" y="142.46" width="18" height="18"/>
+    <rect class="k" x="155.25" y="104.29" width="18" height="18"/>
+    <rect class="s" x="93.59" y="295.39" width="18" height="18"/>
+    <rect class="s" x="123.4" y="261.73" width="18" height="18"/>
+    <rect class="i" x="202.69" y="313.58" width="18" height="18"/>
+    <rect class="k" x="278.72" y="177.21" width="18" height="18"/>
+    <rect class="k" x="199.99" y="122.98" width="18" height="18"/>
+    <rect class="s" x="175.7" y="266.83" width="18" height="18"/>
+    <rect class="k" x="227.06" y="171.11" width="18" height="18"/>
+    <rect class="k" x="202.1" y="219.53" width="18" height="18"/>
+  </g>
+</svg>
   <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
   <script src="script.js"></script>
 </body>

diff --git a/README.md b/README.md
@@ -1,3 +1,16 @@
-Built with [blockbuilder.org](http://blockbuilder.org)
+This is a gist version of the [hanpuku demo](https://www.youtube.com/watch?v=eNoDZcs7vVs)... and, of course, without Hanpuku, it's much harder!
 
-forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/c6b8c0b80101eabb3e9bc361a396d245'>Illustrator Round Trip</a>
+To pull this off *without* hanpuku, you first have to run the script with an (almost) empty SVG tag:
+```
+<svg width="792" height="612">
+  <g id="Layer_1"></g>
+  <g id="Layer_2"></g>
+</svg>
+```
+If you inspect the result in Chrome's developer tools, you can right-click the SVG tag, choose "Edit as HTML", copy the text, paste it into a file, and then open that file with Illustrator for editing. The really tricky bit is saving the SVG file with Illustrator in a way that doesn't totally nuke all the class names and IDs... you probably will have to edit the (now really big) SVG file manually with a text editor. Finally, we paste all the text inline in the HTML file (because you can't manipulate an SVG IMG with D3!).
+
+Apologies that this still uses D3 v3!
+
+Data source: http://www.georgelmurphy.com/berrics/
+
+Original template from [blockbuilder.org](http://blockbuilder.org)
diff --git a/.block b/.block
@@ -0,0 +1,3 @@
+license: mit
+scrolling: yes
+border: yes
diff --git a/README.md b/README.md
@@ -0,0 +1,3 @@
+Built with [blockbuilder.org](http://blockbuilder.org)
+
+forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/c6b8c0b80101eabb3e9bc361a396d245'>Illustrator Round Trip</a>
diff --git a/index.html b/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+</head>
+
+<body>
+  <svg width="792" height="612">
+    <g id="Layer_1"></g>
+    <g id="Layer_2"></g>
+  </svg>
+  <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
+  <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/matches.csv b/matches.csv
@@ -0,0 +1,32 @@
+id,next_id,round,winner,loser,roshambo_winner,roshambo_loser,first_trick,winner_score,turnovers,num_tricks,misses,order
+7-1-1,7-2-1,1,Paul Rodriguez,Jonny Giger,Paul Rodriguez,Jonny Giger,Kickflip,3,4,24,12,5
+7-1-10,7-2-5,1,Sewa Kroetkov,Moses Adams,Moses Adams,Sewa Kroetkov,Kickflip,4,3,35,12,5
+7-1-11,7-2-6,1,Nyjah Huston,Gavin Nolan,Nyjah Huston,Gavin Nolan,360 Flip,0,0,23,5,5
+7-1-12,7-2-6,1,MikeMo Capaldi,Nate Principato,MikeMo Capaldi,Nate Principato,Kickflip,0,0,21,5,5
+7-1-13,7-2-7,1,Shane O'Neill,Cristian Vannella,Cristian Vannella,Shane O'Neill,Switch Frontside 180,3,3,29,11,5
+7-1-14,7-2-7,1,Cody Cepeda,Trent McClung,Trent McClung,Cody Cepeda,Kickflip,4,1,40,10,9
+7-1-15,7-2-8,1,Tom Asta,Cody Whitt ,Tom Asta,Cody Whitt,Kickflip,3,6,32,14,5
+7-1-16,7-2-8,1,Eric Martinac,Albert Nyberg,Eric Martinac,Albert Nyberg,Switch Frontside Bigspin,0,0,12,5,5
+7-1-2,7-2-1,1,Moose,CJ Tambornino,Moose,CJ Tambornino,Switch Kickflip,4,4,32,13,5
+7-1-3,7-2-2,1,Luan Oliveira,Tanner Lawler,Tanner Lawler,Luan Oliveira,Kickflip,4,1,26,10,5
+7-1-4,7-2-2,1,Chris Chann,Chris Cole,Chris Chann,Chris Cole,Backside Bigspin,4,6,32,15,5
+7-1-5,7-2-3,1,Morgan Smith,Spencer Brown,Spencer Brown ,Morgan Smith,Nollie Heelflip,4,7,31,16,5
+7-1-6,7-2-3,1,Nick Holt,PJ Ladd,Nick Holt,PJ Ladd,360 Flip,1,2,25,8,5
+7-1-7,7-2-4,1,Griffin Gass,W.V. Wagenigen,Griffin Gass,W.V. Wagenigen,Kickflip,0,0,8,5,5
+7-1-8,7-2-4,1,Eric Koston,Chhandy Khon,Chhandy Khon,Eric Koston,Kickflip,1,3,19,9,1
+7-1-9,7-2-5,1,Will Fyock,Chaz Ortiz,Will Fyock,Chaz Ortiz,360 Flip,0,2,25,7,5
+7-2-1,7-3-1,2,Moose,Paul Rodriguez,Moose,Paul Rodriguez,Kickflip,0,0,11,5,5
+7-2-2,7-3-1,2,Luan Oliveira,Chris Chann,Luan Oliveira,Chris Chann,360 Flip,0,0,10,5,5
+7-2-3,7-3-2,2,Nick Holt,Morgan Smith,Morgan Smith,Nick Holt,Nollie Heelflip,4,3,21,12,5
+7-2-4,7-3-2,2,Eric Koston,Griffin Gass,Griffin Gass,Eric Koston,Kickflip,3,3,20,11,1
+7-2-5,7-3-3,2,Sewa Kroetkov,Will Fyock,Will Fyock,Sewa Kroetkov,Nollie Heelflip,3,7,39,15,5
+7-2-6,7-3-3,2,MikeMo Capaldi,Nyjah Huston,MikeMo Capaldi,Nyjah Huston,Nollie Kickflip,4,8,44,17,5
+7-2-7,7-3-4,2,Cody Cepeda,Shane O'Neill,Cody Cepeda,Shane O'Neill,Switch Frontside Biggerspin,3,10,58,18,9
+7-2-8,7-3-4,2,Tom Asta,Eric Martinac,Tom Asta,Eric Martinac,Kickflip,2,4,36,11,5
+7-3-1,7-4-1,3,Luan Oliveira,Moose,Moose,Luan Oliveira,Kickflip,4,5,43,14,5
+7-3-2,7-4-1,3,Eric Koston,Nick Holt,Eric Koston,Nick Holt,Backside 360,4,6,26,15,1
+7-3-3,7-4-2,3,Sewa Kroetkov,MikeMo Capaldi,MikeMo Capaldi,Sewa Kroetkov,Kickflip,4,1,24,10,5
+7-3-4,7-4-2,3,Cody Cepeda,Tom Asta,Tom Asta,Cody Cepeda,Kickflip,1,1,21,7,9
+7-4-1,7-5-1,4,Luan Oliveira,Eric Koston,Luan Oliveira,Eric Koston,Kickflip,2,2,23,9,1
+7-4-2,7-5-1,4,Cody Cepeda,Sewa Kroetkov,Sewa Kroetkov,Cody Cepeda,360 Shuvit,0,1,14,6,9
+7-5-1,NULL,5,Cody Cepeda,Luan Oliveira,Cody Cepeda,Luan Oliveira,Nollie Heelflip,0,0,19,5,9
diff --git a/script.js b/script.js
@@ -0,0 +1,157 @@
+var bounds = {
+  width: 792,
+  height: 612
+};
+
+var color = d3.scale.category20b();
+
+var force = d3.layout.force()
+  .charge(-120)
+  .linkDistance(30)
+  .size([bounds.width, bounds.height]);
+
+var nodeRadius = 7;
+
+function drawPointyArc(d) {
+  var dx = d.target.x - d.source.x;
+  var dy = d.target.y - d.source.y;
+  var arcRadius = 10 * dx / Math.abs(dx);
+  var theta;
+  var edgePoint;
+  var front;
+  var back;
+  var arc;
+
+  if (dx === 0) {
+    if (dy >= 0) {
+      theta = Math.PI;
+    } else {
+      theta = -Math.PI;
+    }
+    edgePoint = {
+      x: 0,
+      y: nodeRadius
+    };
+  } else {
+    theta = Math.atan((d.target.y - d.source.y) / (d.target.x - d.source.x)) + Math.PI / 2;
+    edgePoint = {
+      x: nodeRadius * Math.cos(theta),
+      y: nodeRadius * Math.sin(theta)
+    };
+  }
+  front = {
+    x: d.source.x + edgePoint.x,
+    y: d.source.y + edgePoint.y
+  };
+  back = {
+    x: d.source.x - edgePoint.x,
+    y: d.source.y - edgePoint.y
+  };
+  arc = {
+    x: (d.source.x + d.target.x) / 2 + arcRadius * Math.cos(theta),
+    y: (d.source.y + d.target.y) / 2 + arcRadius * Math.sin(theta)
+  };
+  return 'M' +
+    front.x + ',' +
+    front.y + 'Q' +
+    arc.x + ',' +
+    arc.y + ',' +
+    d.target.x + ',' +
+    d.target.y + 'Q' +
+    arc.x + ',' +
+    arc.y + ',' +
+    back.x + ',' +
+    back.y + 'Z';
+}
+
+d3.csv('matches.csv', function (data) {
+  var skaterLookup = {};
+
+  var graph = {
+    nodes: [],
+    edges: []
+  };
+
+  data.sort(function (a, b) {
+    return a.round - b.round;
+  });
+
+  data.forEach(function (d) {
+    if (!skaterLookup.hasOwnProperty(d.winner)) {
+      skaterLookup[d.winner] = graph.nodes.length;
+      graph.nodes.push({
+        name: d.winner,
+        roundNumber: d.round,
+        highestRound: true
+      });
+    }
+    if (!skaterLookup.hasOwnProperty(d.loser)) {
+      skaterLookup[d.loser] = graph.nodes.length;
+      graph.nodes.push({
+        name: d.loser,
+        roundNumber: d.round,
+        highestRound: true
+      });
+    }
+    var oldWinner = skaterLookup[d.winner];
+    graph.nodes[oldWinner].highestRound = false;
+    skaterLookup[d.winner] = graph.nodes.length;
+    graph.nodes.push({
+      name: d.winner,
+      roundNumber: d.round,
+      highestRound: true
+    });
+    graph.edges.push({
+      source: oldWinner,
+      target: skaterLookup[d.winner]
+    });
+    graph.edges.push({
+      source: skaterLookup[d.loser],
+      target: skaterLookup[d.winner]
+    });
+  });
+
+  var linkLayer = d3.select('#Layer_1');
+  var nodeLayer = d3.select('#Layer_2');
+
+  force.nodes(graph.nodes)
+    .links(graph.edges)
+    .start();
+
+  var link = linkLayer.selectAll('.link')
+    .data(graph.edges);
+  var linkEnter = link.enter();
+  linkEnter.append('path')
+    .attr('class', 'link');
+
+  var node = nodeLayer.selectAll('.node')
+    .data(graph.nodes);
+  var nodeEnter = node.enter().append('g')
+    .attr('class', 'node')
+    .attr('id', function (d, i) {
+      if (d.highestRound === false) {
+        return d.name + d.roundNumber;
+      } else {
+        return d.name;
+      }
+    });
+
+  nodeEnter.append('rect')
+    .attr('x', '-0.75em')
+    .attr('width', '1.5em')
+    .attr('y', '-1em')
+    .attr('height', '1.5em')
+    .attr('fill', function (d) {
+      return color(d.name);
+    });
+
+  node.call(force.drag);
+
+  force.on('tick', function (e) {
+    link.attr('d', drawPointyArc);
+
+    node.attr('transform', function (d) {
+      return 'translate(' + d.x + ',' + d.y + ')';
+    });
+  });
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		Built with [blockbuilder.org](http://blockbuilder.org)

		forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/c6b8c0b80101eabb3e9bc361a396d245'>Illustrator Round Trip</a>