Forked from Captain Anonymous's Pen doLeBX.
A Pen by Paul Dechov on CodePen.
<div id="container"></div> |
Forked from Captain Anonymous's Pen doLeBX.
A Pen by Paul Dechov on CodePen.
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")) |
<script src="http://fb.me/react-0.13.1.js"></script> | |
<script src="http://d3js.org/d3.v3.min.js"></script> |