Built with blockbuilder.org
forked from mikeyao's block: Line Chart
license: mit |
Built with blockbuilder.org
forked from mikeyao's block: Line Chart
{ | |
} | |
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
body { | |
background: '#FAFAFA' | |
} | |
svg.line-chart { | |
background: white | |
} | |
</style> | |
</head> | |
<body> | |
<script> | |
// Sample Data | |
var rawData = [{ | |
date: '20170501', | |
value: 5 | |
},{ | |
date: '20170507', | |
value: 10 | |
}, { | |
date: '20170511', | |
value: 15 | |
}, { | |
date: '20170517', | |
value: 30 | |
}, { | |
date: '20170521', | |
value: 40 | |
}, { | |
date: '20170525', | |
value: 60 | |
}, { | |
date: '20170530', | |
value: 80 | |
}] | |
// Settings | |
var width = 800 | |
var height = 300 | |
var margin = { top: 20, bottom: 20, left: 20, right: 20} | |
var interpolation = 'monotone' | |
// Utility | |
var parseDate = d3.time.format("%Y%m%d").parse; | |
var translation = (x, y) => `translate(${x}, ${y})` | |
// Clean Data | |
var data = rawData.map((d) => { | |
return { | |
value: d.value, | |
date: parseDate(d.date) | |
} | |
}) | |
// Scales | |
var xExtent = d3.extent(data, d => d.date) | |
var xScale = d3.time.scale() | |
.range([margin.left, width - margin.right ]) | |
.domain(xExtent) | |
var yExtent = d3.extent(data, d => d.value) | |
var yScale = d3.scale.linear() | |
.range([height - margin.bottom, margin.top]) | |
.domain(yExtent) | |
// Axis | |
var xAxis = d3.svg.axis() | |
.scale(xScale) | |
.orient("bottom") | |
// Define the line | |
var line = d3.svg.line() | |
.x(d => xScale(d.date)) | |
.y(d => yScale(d.value)) | |
.interpolate(interpolation) | |
// Define the area | |
var area = d3.svg.area() | |
.x(d => xScale(d.date)) | |
.y1(d => yScale(d.value)) | |
.y0(d => height - margin.bottom) | |
// Feel free to change or delete any of the code you see in this editor! | |
var svg = d3.select("body").append("svg") | |
.attr("class", "line-chart") | |
.attr("width", width) | |
.attr("height", height) | |
// svg.append("path") | |
// .attr("d", line(data)) | |
// .attr("fill", 'none') | |
// .attr("stroke", 'blue') | |
svg.append("path") | |
.datum(data) | |
.attr("fill", "#48D2A0") | |
.attr("d", area) | |
// Add X - Axis | |
svg.append("g") | |
.attr("transform", translation(0, height - margin.bottom)) | |
.call(xAxis) | |
</script> | |
</body> |