Skip to content

Instantly share code, notes, and snippets.

@ddramone

ddramone/.block

Last active August 4, 2017 11:49
Show Gist options
  • Save ddramone/d1cca1b3d84d9faef7e5e09411022ff7 to your computer and use it in GitHub Desktop.
Save ddramone/d1cca1b3d84d9faef7e5e09411022ff7 to your computer and use it in GitHub Desktop.
Download ZIP
Min Max Avg
Raw
.block
license: mit
border: yes
scrolling: no
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<svg></svg>
<script>
console.clear();
//note:
//avg != (min+max)/2
//it can be anything between min and max
var data = [
//[min,avg,max]//
[10, 22, 54],
[15, 35, 87],
[13, 44, 55],
[9, 37, 76],
[30, 63, 75],
[22, 44, 53],
[18, 51, 65],
];
var setup = {
width: 900,
height: 500,
margin: 20
}
var svg = d3.select("svg")
.attr("width", setup.width)
.attr("height", setup.height);
var x = d3.scaleLinear()
.domain([0,data.length-1])
.range([setup.margin,setup.width-setup.margin]);
var y = d3.scaleLinear()
.domain([0,100])
.range([setup.margin,setup.height-setup.margin]);
var xAxis = d3.axisBottom()
.scale(x);
var min = (d) => y(d[0]);
var max = (d) => y(d[2]);
var avg = (d) => y(d[1]);
svg.append('g')
.attr('transform','translate('+[0,(setup.height-setup.margin)]+')')
.call(xAxis);
var area = d3.area()
.x((d,i)=>x(i))
.y0((d) => setup.height-max(d))
.y1((d) => setup.height-min(d))
.curve(d3.curveNatural);
var line = d3.line()
.x((d,i)=>x(i))
.y((d) => setup.height-avg(d))
.curve(d3.curveNatural);
svg.append('path')
.attr('d', area(data))
.attr('fill', '#ddd');
svg.append('path')
.attr('d', line(data))
.attr('stroke', 'blue')
.attr("fill", "none")
.attr('stroke-width', 2);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment