Skip to content

Instantly share code, notes, and snippets.

@EfratVil

EfratVil/index.html

Last active January 26, 2017 18:42
Show Gist options
  • Save EfratVil/e69b3764178a1874d9d9677dbe79d38b to your computer and use it in GitHub Desktop.
Save EfratVil/e69b3764178a1874d9d9677dbe79d38b to your computer and use it in GitHub Desktop.
Download ZIP
Area chart
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<body>
<svg width="700" height="400">
</svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var x = d3.scaleLinear().domain([0, 70]).range([width, 0]);
var y = d3.scaleLinear().domain([0, 200]).range([height, 0]);
var area1 = [
{ x: 0, low: 30, high: 80},
{ x: 10, low: 80, high: 100},
{ x: 20, low: 20, high: 30},
{ x: 30, low: 20, high: 50},
{ x: 40, low: 10, high: 40},
{ x: 50, low: 50, high: 80 },
{ x: 60, low: 30, high: 40 },
{ x: 70, low: 40, high: 80 }
];
var area2 = [
{ x: 0, low: 80, high: 130 },
{ x: 10, low: 100, high: 140 },
{ x: 20, low: 30, high: 90 },
{ x: 30, low: 50, high: 70 },
{ x: 40, low: 40, high: 70 },
{ x: 50, low: 80, high: 120 },
{ x: 60, low: 40, high: 80 },
{ x: 70, low: 80, high: 100 }
];
var area3 = [
{ x: 0, low: 130, high: 150 },
{ x: 10, low: 140, high: 170 },
{ x: 20, low: 90, high: 130 },
{ x: 30, low: 70, high: 90 },
{ x: 40, low: 70, high: 110 },
{ x: 50, low: 120, high: 150 },
{ x: 60, low: 80, high: 130 },
{ x: 70, low: 100, high: 130 }
];
var area_data = d3.area()
.x(function(d) {return x(d.x); })
.y0(function(d) {return y(d.low); })
.y1(function(d) {return y(d.high); });
var area = area_data(area1);
svg.append('path')
.attr('d', area)
.style("fill", "#ABEDD8");
area = area_data(area2);
svg.append('path')
.attr('d', area)
.style("fill", "#46CDCF");
area = area_data(area3);
svg.append('path')
.attr('d', area)
.style("fill", "#3D84A8");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment