|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<style> |
|
|
|
body { |
|
font: 10px sans-serif; |
|
} |
|
|
|
.axis path, |
|
.axis line { |
|
fill: none; |
|
stroke: #000; |
|
shape-rendering: crispEdges; |
|
} |
|
|
|
.bar { |
|
fill: steelblue; |
|
} |
|
|
|
.x axis path { |
|
display: none; |
|
} |
|
|
|
</style> |
|
<body> |
|
<script src="//d3js.org/d3.v3.min.js"></script> |
|
<script> |
|
|
|
var margin = {top: 20, right: 30, bottom: 30, left: 40}, |
|
width = 960 - margin.left - margin.right, |
|
height = 500 - margin.top - margin.bottom; |
|
|
|
var x = d3.scale.ordinal() |
|
.rangeRoundBands([0, width], 0.1, 0.2); |
|
|
|
var y = d3.scale.linear() |
|
.range([height, 0]); |
|
|
|
var svg = 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 xAxis = svg.append("g") |
|
.attr("class", "x axis"); |
|
|
|
var yAxis = svg.append("g") |
|
.attr("class", "y axis"); |
|
|
|
data=[ |
|
{"date": "7/15/16", "price":134}, |
|
{"date": "7/16/16", "price":124}, |
|
{"date": "7/17/16", "price":143}, |
|
{"date": "7/18/16", "price":112}, |
|
{"date": "7/19/16", "price":142}, |
|
{"date": "7/20/16", "price":108}, |
|
{"date": "7/21/16", "price":148}, |
|
{"date": "7/22/16", "price":132}, |
|
{"date": "7/23/16", "price":110}, |
|
{"date": "7/24/16", "price":138}, |
|
{"date": "7/25/16", "price":132}, |
|
{"date": "7/26/16", "price":120}, |
|
{"date": "7/27/16", "price":115}, |
|
{"date": "7/28/16", "price":106}, |
|
{"date": "7/29/16", "price":135}, |
|
{"date": "7/30/16", "price":139}, |
|
{"date": "7/31/16", "price":108}, |
|
{"date": "8/1/16", "price": 137}, |
|
{"date": "8/2/16", "price": 140}, |
|
{"date": "8/3/16", "price": 109}, |
|
{"date": "8/4/16", "price": 150}, |
|
{"date": "8/5/16", "price": 103}, |
|
{"date": "8/6/16", "price": 99}, |
|
{"date": "8/7/16", "price": 103}, |
|
{"date": "8/8/16", "price": 136}, |
|
{"date": "8/9/16", "price": 120}, |
|
{"date": "8/10/16", "price":120}, |
|
{"date": "8/11/16", "price":107}, |
|
{"date": "8/12/16", "price":108}] |
|
|
|
function updateChart(data) { |
|
priceFormatter=d3.format(["$",""]) |
|
dateFormatter=d3.time.format("%d"); |
|
dataParsed = data.map(function(d) { return { "day": dateFormatter(new Date(d.date)), "price": d.price, "priceFormatted": priceFormatter(d.price) } } ); |
|
|
|
x.domain(dataParsed.map(function(d) { return d.day })); |
|
y.domain(d3.extent(dataParsed.map(function(d){ return d.price }))); |
|
|
|
|
|
xAxis |
|
.attr("transform", "translate(0," + height + ")") |
|
.call(d3.svg.axis().scale(x).orient("bottom")); |
|
|
|
yAxis |
|
.call(d3.svg.axis().scale(y).orient("left")); |
|
|
|
svg.selectAll(".bar") |
|
.data(dataParsed) |
|
.enter().append("rect") |
|
.attr("class", "bar") |
|
.attr("x", function(d) { return x(d.day); }) |
|
.attr("width", x.rangeBand()) |
|
.attr("y", function(d) { return y(d.price); }) |
|
.attr("height", function(d) { return height - y(d.price); }); |
|
} |
|
|
|
updateChart(data); |
|
|
|
|
|
</script> |
