<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
padding-top: 50px;
padding-left: 100px;
}
#chart {
width: 300px;
height: 200px;
border: 1px solid black;
margin-top: 10px;
}
path {
/*fill: purple;
fill-opacity: 0.7;*/
fill: none;
stroke: blue;
stroke-width: 3px;
}
</style>
</head>
<body>
<button onclick="updateChart('math')">Math</button>
<button onclick="updateChart('science')">Science</button>
<button onclick="updateChart('reading')">Reading</button>
<div id="chart"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script>
var w = 300;
var h = 200;
var path;
var subjects;
$.getJSON('//jsbin.com/vegaqi/1.js', function(json) {
subjects = json;
_.keys(subjects).forEach(function(subject) {
subjects[subject].forEach(function(d) {
d.date = d3.time.format("%Y%m%d").parse(d.date);
console.log(d.date);
})
});
path = d3.select('#chart')
.append('svg')
.attr('width', w)
.attr('height', h)
.append('g')
.append('path');
updateChart('math');
});
function updateChart(subject) {
var data = subjects[subject];
var dates = _.pluck(data, 'date');
var counts = _.pluck(data, 'count');
var x = d3.time.scale()
.domain(d3.extent(dates))//d3.extent(), return [min, max]
.range([0, w]);
var y = d3.scale.linear()
.domain(d3.extent(counts))
.range([h, 0]);
var area = d3.svg.area()
.interpolate('bundle') //This interpolate bundle is just going to give us nice, smooth curves when it interpolates the different points
.x(function(d) {
return x(d.date);
})
.y0(function(d) {
return y(0);
})
.y1(function(d) {
return y(d.count);
});
var line = d3.svg.line()
.interpolate('bundle') //This interpolate bundle is just going to give us nice, smooth curves when it interpolates the different points
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.count);
});
path
.datum(data)//for only one object, path object
.transition()
.duration(450)
.attr('d', line);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
padding-top: 50px;
padding-left: 100px;
}
#chart {
width: 300px;
height: 200px;
border: 1px solid black;
margin-top: 10px;
}
path {
fill: purple;
fill-opacity: 0.7;
/*fill: none;
stroke: blue;
stroke-width: 3px;*/
}
</style>
</head>
<body>
<button onclick="updateChart('math')">Math</button>
<button onclick="updateChart('science')">Science</button>
<button onclick="updateChart('reading')">Reading</button>
<div id="chart"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script>
var w = 300;
var h = 200;
var path;
var subjects;
$.getJSON('//jsbin.com/vegaqi/1.js', function(json) {
subjects = json;
_.keys(subjects).forEach(function(subject) {
subjects[subject].forEach(function(d) {
d.date = d3.time.format("%Y%m%d").parse(d.date);
console.log(d.date);
})
});
path = d3.select('#chart')
.append('svg')
.attr('width', w)
.attr('height', h)
.append('g')
.append('path');
updateChart('math');
});
function updateChart(subject) {
var data = subjects[subject];
var dates = _.pluck(data, 'date');
var counts = _.pluck(data, 'count');
var x = d3.time.scale()
.domain(d3.extent(dates))//d3.extent(), return [min, max]
.range([0, w]);
var y = d3.scale.linear()
.domain(d3.extent(counts))
.range([h, 0]);
var area = d3.svg.area()
.interpolate('bundle') //This interpolate bundle is just going to give us nice, smooth curves when it interpolates the different points
.x(function(d) {
return x(d.date);
})
.y0(function(d) {
return y(0);
})
.y1(function(d) {
return y(d.count);
});
var line = d3.svg.line()
.interpolate('bundle') //This interpolate bundle is just going to give us nice, smooth curves when it interpolates the different points
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.count);
});
path
.datum(data)//for only one object, path object
.transition()
.duration(450)
.attr('d', area);
}
</script>
</body>
</html>
