I've been attempting to run this tutorial script, but for some reason, I just can't seem to get it to execute properly. Can someone please take a look and help me figure out what I'm missing? I would greatly appreciate it!
Here is the original tutorial link:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
#demo{
height: 200px;
background-color: blue;
}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script> var JSONData = [
{ "id": 3, "created_at": "Sun May 05 2013", "amount": 12000},
{ "id": 1, "created_at": "Mon May 13 2013", "amount": 2000},
{ "id": 2, "created_at": "Thu Jun 06 2013", "amount": 17000},
{ "id": 4, "created_at": "Thu May 09 2013", "amount": 15000},
{ "id": 5, "created_at": "Mon Jul 01 2013", "amount": 16000}
]
</script>;
<head></head>
<body>
<div id="demo"></div>
</body>
<script>
(function() {
var data = JSONData.slice();
var format = d3.time.format("%a %b %d %Y");
var amountFn = function(d) { return d.amount };
var dateFn = function(d) { return format.parse(d.created_at) };
var x = d3.time.scale()
.range([10, 280])
.domain(d3.extent(data, dateFn));
var y = d3.scale.linear()
.range([180, 10])
.domain(d3.extent(data, amountFn));
var svg = d3.select("#demo").append("svg:svg")
.attr("width", 300)
.attr("height", 200);
svg.selectAll("circle").data(data).enter()
.append("svg:circle")
.attr("fill", white)
.attr("r", 4)
.attr("cx", function(d) { return x(dateFn(d)) })
.attr("cy", function(d) { return y(amountFn(d)) });
})();
</script>