Skip to content

Instantly share code, notes, and snippets.

@nibblebot
Created February 6, 2013 22:53
Show Gist options
  • Save nibblebot/4726646 to your computer and use it in GitHub Desktop.
Save nibblebot/4726646 to your computer and use it in GitHub Desktop.
<head>
<style>
svg {
background-color: #ccc;
}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.0.1/d3.v3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/1.0.0-rc.3/lodash.min.js"></script>
</head>
<body>
<script>
var width = 400;
var height = 200;
var xValues = [10, 20, 30, 40, 50, 60];
var yValues = [1, 2, 3, 4, 5, 6];
var data = _.zip(xValues, yValues);
var xScale = d3.scale.linear()
.domain([0, d3.max(xValues)])
.rangeRound([0, width]);
var yScale = d3.scale.linear()
.domain([-d3.max(yValues), 0])
.rangeRound([-height, 0]);
var x = function(d) { return xScale(d[0]); };
var y = function(d) { return yScale(d[1]); };
var line = d3.svg.line().x(x).y(y)
var svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
// make origin bottom left
.attr('transform', 'scale(1 -1) translate(0 -200)')
svg.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr('cx', x)
.attr('cy', y)
.attr('r', 5);
svg.append('svg:path')
.attr('d', line(data))
.attr('stroke', 'black');
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment