Dots + margin & color

<html>
<body>
<script type='text/javascript' src='https://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>

Modified http://d3js.org/d3.v4.min.js to a secure url

https://d3js.org/d3.v4.min.js