Skip to content

Instantly share code, notes, and snippets.

@flintobrien

flintobrien/README.md

Last active August 29, 2015 13:57
Show Gist options
  • Save flintobrien/9668243 to your computer and use it in GitHub Desktop.
Save flintobrien/9668243 to your computer and use it in GitHub Desktop.
Download ZIP
d3-traits Area Chart
Raw
README.md

This simple area chart with d3-traits uses the same data as the origin d3.js area chart example. The chart employs the following d3-traits features.

  • TBD
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
</style>
<link rel="stylesheet" href="http://gec.github.io/Total-Grid/d3-traits.css"/>
<body>
<div id="chart" style="height: 500px; width: 960px;"></div>
<script src="http://d3js.org/d3.v3.js"></script>
<script src="http://gec.github.io/Total-Grid/d3-traits.min.js"></script>
<script>
var parseDate = d3.time.format("%d-%b-%y").parse;
var chartEl = d3.select('#chart')
var config = {
x1: function(d) { return d.date; },
y1: function(d) { return d.close; },
margin: {top: 20, right: 20, bottom: 20, left: 50}
}
var chart = d3.trait( d3.trait.chart.base, config)
.trait( d3.trait.scale.time, { axis: "x1" })
.trait( d3.trait.scale.linear, { axis: "y1", domainMin: 0 })
.trait( d3.trait.chart.area, { })
.trait( d3.trait.axis.time.month, { axis: "x1"})
.trait( d3.trait.axis.linear, { axis: "y1" })
d3.tsv("/mbostock/raw/3883195/data.tsv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
var series = [ data]
var selection = chartEl.datum( series)
chart.call( selection)
selection.select( '.axis-y1')
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Price ($)");
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment