Built with blockbuilder.org
Last active
January 4, 2017 08:24
-
-
Save 1Cr18Ni9/de882844b913e9880b1d3b0ea8b27738 to your computer and use it in GitHub Desktop.
Chart with Gradient
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v3.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
svg { border: 1px solid #ccc; } | |
</style> | |
</head> | |
<body> | |
<style> | |
svg{ | |
border: 1px solid #ccc; | |
} | |
</style> | |
<div id='container'></div> | |
<script id='codeExcute'> | |
var data = [ | |
{x: 0, y: 100}, | |
{x: 10, y: 110}, | |
{x: 20, y: 140}, | |
{x: 30, y: 130}, | |
{x: 40, y: 80}, | |
{x: 50, y: 75}, | |
{x: 60, y: 120}, | |
{x: 70, y: 130}, | |
{x: 80, y: 100}, | |
]; | |
var margin = {top: 60, bottom: 50, left: 40, right: 30}, axisPadding = 0; | |
var width = 400, height = 300; | |
var svgWidth = width + margin.left + margin.right, | |
svgHeight = height + margin.top + margin.bottom; | |
var xMax = Math.round(d3.max(data, function(d,i){ return d.x; }) * 1.05); | |
var yMax = Math.round(d3.max(data, function(d,i){ return d.y; }) * 1.05); | |
var xScale = d3.scale.linear() | |
.domain([0, xMax]) | |
.range([0, width]); | |
var yScale = d3.scale.linear() | |
.domain([0, yMax]) | |
.range([0, height]); | |
// create a svg canvas | |
var svg = d3.select('#container') | |
.append('svg') | |
.attr({ | |
width: svgWidth, | |
height: svgHeight, | |
}); | |
// define gradient pattern | |
var defs = svg.append('defs') | |
defs | |
.append('linearGradient') | |
.attr('id', 'gPattern') | |
.html( | |
'<stop offset="0%" stop-color="#333" />' + | |
'<stop offset="100%" stop-color="#f00" />' | |
) | |
defs | |
.append('linearGradient') | |
.attr('id', 'gradient') | |
.attr({ | |
"xlink:href": "#gPattern", | |
x1: "0%", | |
y1: "100%", | |
x2: "0%", | |
y2: "0%", | |
}) | |
// create line graph | |
var graph = svg.append('g') | |
.attr('transform', 'translate(' + [margin.left, height + margin.top] + ')'); | |
var line = d3.svg.area() | |
.x(function(d,i){ return xScale(d.x)}) | |
.y(function(d,i){ return -yScale(d.y)}) | |
.y0(0); | |
graph.append('path') | |
.attr({ | |
d: line(data), | |
fill: 'url(#gradient)', | |
stroke: 'blue', | |
'stroke-width': 2 | |
}); | |
// creat left axis | |
var leftAxisGroup = svg.append('g') | |
.attr('transform', 'translate(' + [margin.left - axisPadding, margin.top] + ')') | |
var leftAxis = d3.svg.axis() | |
.orient('left') | |
.tickPadding(5) | |
.tickSize(-width - axisPadding, 0) | |
.scale(yScale.copy().domain([yMax, 0])); | |
leftAxisGroup.call(leftAxis) | |
styleAxis(leftAxisGroup) | |
// creat y-axis arrow | |
leftAxisGroup.append('g') | |
.attr('class', 'yArrow') | |
.attr('transform', 'rotate(-90)') | |
.append('path') | |
.attr('d', Arrow()) | |
.attr({ | |
fill: 'none', | |
'stroke-width': 1, | |
stroke: 'black', | |
}); | |
// creat bottom axis | |
var bottomAxisGroup = svg.append('g') | |
.attr('transform', 'translate(' + [margin.left, margin.top + height + axisPadding] + ')'); | |
var bottomAxis = d3.svg.axis() | |
.orient('bottom') | |
.tickPadding(5) | |
.tickSize(-height - axisPadding, 0) | |
.scale(xScale); | |
bottomAxisGroup.call(bottomAxis); | |
styleAxis(bottomAxisGroup) | |
// creat x-axis arrow | |
bottomAxisGroup.append('g') | |
.attr('class', 'xArrow') | |
.attr('transform', 'translate(' + [width, 0] + ')') | |
.append('path') | |
.attr('d', Arrow()) | |
.attr({ | |
fill: 'none', | |
'stroke-width': 1, | |
stroke: 'black', | |
}); | |
svg.append('text') | |
.text('Sale Performance') | |
.attr({ | |
x: svgWidth / 2, | |
y: margin.top / 2, | |
'text-anchor': 'middle', | |
'font-size': '20px', | |
'font-family': 'sans-serif', | |
}) | |
function styleAxis(axis){ | |
// style path | |
axis.select('.domain').attr({ | |
fill: 'none', | |
stroke: '#888', | |
'stroke-width': 1 | |
}); | |
// style tick | |
axis.selectAll('.tick line').attr({ | |
stroke: '#000', | |
'stroke-width': 1, | |
}) | |
} | |
// generate a arrow symbol | |
function Arrow() { | |
var r = width * 0.05, rad = 15 * Math.PI / 180; | |
var x1 = 0, y1 = r * Math.sin(rad), | |
x2 = r * Math.cos(rad), y2 = 0, | |
x3 = 0, y3 = -y1; | |
return 'M' + [x1, y1, x2, y2, x3, y3] + 'Z'; | |
} | |
</script> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment