MwRxzo

index.html

<div id="container"></div>

MwRxzo.markdown

MwRxzo

Forked from Captain Anonymous's Pen doLeBX.

A Pen by Paul Dechov on CodePen.

License.

script.js

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"))

scripts

<script src="http://fb.me/react-0.13.1.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>