Built with blockbuilder.org
Simple D3 graph.
Built with blockbuilder.org
Simple D3 graph.
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
<link rel="stylesheet" href="style.css"> | |
</head> | |
<body> | |
<script> | |
// Set the dimensions of the canvas / graph | |
var margin = {top: 30, right: 30, bottom: 40, left: 50}; | |
var width = 800 - margin.left - margin.right; | |
var height = 300 - margin.top - margin.bottom; | |
// Set the ranges | |
var x = d3.time.scale().range([0, width]); | |
var y = d3.scale.linear().range([height, 0]); | |
// Define the axes | |
var xAxis = d3.svg.axis().scale(x) | |
.orient("bottom").ticks(5); | |
var yAxis = d3.svg.axis().scale(y) | |
.orient("left").ticks(5); | |
// Adds the svg canvas | |
var svgContainer = d3.select("body") | |
.append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", | |
"translate(" + margin.left + "," + margin.top + ")"); | |
var data = [ | |
{"date":"1-Apr-15", "close":140.61}, | |
{"date":"15-Apr-15", "close":20.23}, | |
{"date":"13-May-15", "close":99.00}, | |
{"date":"21-May-15", "close":188.13}, | |
{"date":"18-Jun-15", "close":59.13}, | |
{"date":"28-Jul-15", "close":75.13}, | |
{"date":"8-Aug-15", "close":109.13}, | |
{"date":"12-Aug-15", "close":96.13}]; | |
// Parse the date / time | |
var parseDate = d3.time.format("%d-%b-%y").parse; | |
// Get the data | |
data.forEach(function(d) { | |
d.date = parseDate(d.date); | |
d.close = +d.close; | |
}); | |
// Scale the range of the data | |
x.domain(d3.extent(data, function(d) { return d.date; })); | |
y.domain([0, d3.max(data, function(d) { return d.close; })]); | |
// Add the X Axis | |
svgContainer.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis); | |
// Add the Y Axis | |
svgContainer.append("g") | |
.attr("class", "y axis") | |
.call(yAxis); | |
// Draw vertical grid lines | |
svgContainer.append("g") | |
.attr("class", "grid") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis | |
.tickSize(-height, 0, 0) | |
.tickFormat("") | |
) | |
// Draw horizontal grid lines | |
svgContainer.append("g") | |
.attr("class", "grid") | |
.call(yAxis | |
.tickSize(-width, 0, 0) | |
.tickFormat("") | |
) | |
svgContainer.selectAll("bar") | |
.data(data) | |
.enter().append("rect") | |
.style("fill", "#aec6a8") | |
.attr("x", function(d) { return x(d.date)-5; }) | |
.attr("width", 10) | |
.attr("y", function(d) { return y(d.close); }) | |
.attr("height", function(d) { return height - y(d.close); }); | |
// Define the line (interpolate to smooth the line) | |
var valueline = d3.svg.line() | |
.interpolate("cardinal") | |
.x(function(d) { return x(d.date); }) | |
.y(function(d) { return y(d.close); }); | |
svgContainer.append("path") | |
.attr("class", "line") | |
.attr("d", valueline(data)); | |
</script> | |
</body> |
body { | |
margin:0; | |
background-color: #f5f5f5; | |
padding: 30px; | |
} | |
svg { | |
border: 1px solid #cdcdcd; | |
border-radius: 6px; | |
background-color: white; | |
} | |
path { | |
stroke: steelblue; | |
stroke-width: 2; | |
fill: none; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: grey; | |
stroke-width: 1; | |
shape-rendering: crispEdges; | |
} | |
.grid .tick { | |
stroke: lightgrey; | |
stroke-opacity: 0.7; | |
shape-rendering: crispEdges; | |
} | |
.grid path { | |
stroke-width: 0; | |
} |