index.html
<html>
<body>
<script type='text/javascript' src='//d3js.org/d3.v4.min.js'></script>
<script>
var data = [
{ 'a': 1, 'b': 7 },
{ 'a': 42, 'b': 7 },
{ 'a': 15, 'b': 3 },
{ 'a': 32, 'b': 8 },
{ 'a': 26, 'b': 9 },
{ 'a': 18, 'b': 5 }
]
var margin = {top: 20, right: 10, bottom: 20, left: 10}
var fullWidth = 300, fullHeight = 300
var width = fullWidth - margin.left - margin.right,
height = fullHeight - margin.top - margin.bottom
var x = d3.scaleLinear()
.domain([0, 5])
.range([0, width])
var y = d3.scaleLinear()
.domain([0, 50])
.range([height, 0])
var color = d3.scaleLinear()
.domain([0, 10])
.range(['#500', '#F00'])
d3.select('body')
.append('svg')
.attr('width', fullWidth)
.attr('height', fullHeight)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.selectAll('circle').data(data)
.enter().append('circle')
.attr('r', 5)
.attr('cx', function (d, i) { return x(i) })
.attr('cy', function (d, i) { return y(d.a) })
.attr('fill', function (d, i) { return color(d.b) })
</script>
</body>
</html>