JSFiddle - React, Tailwind, and code Playground

by Sergey Kalashnikov

CSS

svg {
    width: 100%;
    height: 200px;
}

JavaScript

array =[
    {'a':1, 'b':2},
    {'a':72, 'b':31},
    {'a':15, 'b':54},
    {'a':32, 'b':31},
    {'a':26, 'b':56},
    {'a':18, 'b':51}    
]

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])
color=d3.scale.linear()
    .domain([0,10])
    .range(['red','green'])

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 index*25
            return x(data.a)
            })
    .attr('cy', function (data, index) {
            return y(data.b)
            })
.attr('fill', function(d,i){
return color(i)
})

//   .append('svg')
    //.selectAll('circle')
    //.data(data)