index.html
<html>
<body>
<script type='text/javascript' src='//d3js.org/d3.v3.min.js'></script>
<script>
array = [
{ 'a': 1, 'b': 2 },
{ 'a': 42, 'b': 7 },
{ 'a': 15, 'b': 3 },
{ 'a': 32, 'b': 8 },
{ 'a': 26, 'b': 15 },
{ 'a': 18, 'b': 5 }
]
margin = 10
y = d3.scale.linear()
.domain(d3.extent(array, function (v) {
return v.b
}))
.range([100 + margin, margin])
x = d3.scale.linear()
.domain(d3.extent(array, function (v) {
return v.a
}))
.range([margin, 100 + margin])
body = d3.select('body')
svg = body.append('svg')
circle = svg
.selectAll('circle')
.data(array)
circle.enter()
.append('circle')
.attr('r', 10)
.attr('fill', 'red')
.attr('cx', function (data, index) {
return x(data.a)
})
.attr('cy', function (d, i) {
return y(d.b)
})
</script>
<style>
svg {
width: 100%;
height: 200px;
}
</style>
</body>
</html>