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/9725150 to your computer and use it in GitHub Desktop.
Save flintobrien/9725150 to your computer and use it in GitHub Desktop.
Download ZIP
d3-traits Simple Line Chart
Raw
README.md

Simple d3-traits line chart

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 data = [
[
{ x: 1, y: 4 },
{ x: 2, y: 7 },
{ x: 3, y: 5 },
{ x: 4, y: 8 }
]
]
var config = {
x1: function(d) { return d.x; },
y1: function(d) { return d.y; },
margin: {top: 25, right: 30}
}
var chart = d3.trait( d3.trait.chart.base, config)
.trait( d3.trait.scale.linear, { axis: "x1" })
.trait( d3.trait.scale.linear, { axis: "y1", domainMin: 0, domainMax: 10 })
.trait( d3.trait.chart.line, { })
.trait( d3.trait.axis.linear, { axis: "x1" })
.trait( d3.trait.axis.linear, { axis: "y1" })
var chartEl = d3.select('#chart')
var selection = chartEl.datum( data)
chart.call( selection)
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment