dechov · August 14, 2015 20:29 · Aug 14, 2015
diff --git a/MwRxzo.markdown b/MwRxzo.markdown
@@ -0,0 +1,9 @@
+MwRxzo
+------
+
+
+Forked from [Captain Anonymous](http://codepen.io/anon/)'s Pen [doLeBX](http://codepen.io/anon/pen/doLeBX/).
+
+A [Pen](http://codepen.io/dechov/pen/MwRxzo) by [Paul Dechov](http://codepen.io/dechov) on [CodePen](http://codepen.io/).
+
+[License](http://codepen.io/dechov/pen/MwRxzo/license).
diff --git a/index.html b/index.html
@@ -0,0 +1 @@
+<div id="container"></div>
diff --git a/script.js b/script.js
@@ -0,0 +1,35 @@
+const stroke = [1, 10],
+      interpolationMode = "basis"  // https://github.com/mbostock/d3/wiki/SVG-Shapes#line_interpolate
+
+const a = d3.range(11).map(i => ({x: i, y: 3 + 5 * Math.random()}))
+const b = d3.range(11).map(i => ({x: i, y: 2 + 7 * Math.random()}))
+
+const xScale = d3.scale.linear().domain([0, 10]).range([0, 480])
+const yScale = d3.scale.linear().domain([0, 10]).range([250, 0])
+
+const area = d3.svg.area().interpolate(interpolationMode)
+const minStroke = Math.min(stroke[0], stroke[1]),
+      diffStroke = Math.abs(stroke[0] - stroke[1])
+if (stroke[0] > stroke[1]) {
+  area
+    .y(d => yScale(d.y))
+    .x0(d => xScale(d.x) - diffStroke / 2)
+    .x1(d => xScale(d.x) + diffStroke / 2)
+}
+else {
+  area
+    .x(d => xScale(d.x))
+    .y0(d => yScale(d.y) - diffStroke / 2)
+    .y1(d => yScale(d.y) + diffStroke / 2)
+}
+
+const Demo = React.createClass({
+  render() {
+    return <svg width={480} height={250}>
+      <path d={area(a)} fill="blue" stroke="blue" strokeWidth={minStroke} />
+      <path d={area(b)} fill="red" stroke="red" strokeWidth={minStroke} />
+    </svg>
+  }
+})
+
+React.render(<Demo />, document.getElementById("container"))
diff --git a/scripts b/scripts
@@ -0,0 +1,2 @@
+<script src="http://fb.me/react-0.13.1.js"></script>
+<script src="http://d3js.org/d3.v3.min.js"></script>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<script src="http://fb.me/react-0.13.1.js"></script>
		<script src="http://d3js.org/d3.v3.min.js"></script>