Skip to content

Instantly share code, notes, and snippets.

@xmanemran

xmanemran/.block

Created August 31, 2018 19:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save xmanemran/1ef4b13996ea60abedbfe36eecdaa4d3 to your computer and use it in GitHub Desktop.
Save xmanemran/1ef4b13996ea60abedbfe36eecdaa4d3 to your computer and use it in GitHub Desktop.
Download ZIP
Line and area
Raw
.block
license: mit
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:;right:0;bottom:0;left:0; }
svg {
width: 520px;
padding: 10px;
height: 520px;
background: '#b700b7'
}
</style>
</head>
<body>
<svg>
</svg>
<script>
console.clear();
var rectWidth = 50;
var height = 300;
var item = 15;
var data = Array(item).fill('').map((x, i) =>{
return {
data: Math.random()*1000,
year: 2011 + i
}
})
var svg = d3.select('svg');
var xScale = d3.scaleLinear()
.domain(d3.extent(data, d => d.year))
.range([0, 500-40])
var yScale = d3.scaleLinear()
.domain(d3.extent(data, d => d.data))
.range([300, 0])
var xAxis = d3.axisBottom()
.scale(xScale)
.ticks(data.length)
var yAxis = d3.axisLeft()
.scale(yScale)
.ticks(10)
var line = d3.line()
.x(d => xScale(d.year) + 40)
.y(d => yScale(d.data))
.curve(d3.curveCatmullRom.alpha(0.5));
var area = d3.area()
.x(d => xScale(d.year) + 40)
.y0(height)
.y1(d => yScale(d.data) )
.curve(d3.curveCatmullRom.alpha(0.5));
svg.append('path')
.attr('d', line(data))
.attr('fill', 'none')
.attr('stroke', 'red')
.attr('stroke-width', 3)
svg.append("path")
.attr('d', area(data))
.attr('stroke', 'none')
.attr('fill', 'rgba(255, 0, 0, 0.2)')
svg.append('g')
.attr('transform', 'translate(40, 300)')
.call(xAxis)
svg.append('g')
.attr('transform', 'translate(40, 0)')
.call(yAxis)
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment