JSFiddle - React, Tailwind, and code Playground

by Sergey Kalashnikov

JavaScript

var url='http://nemetz.devg.ru/d3/github.json'
d3.json(url, function(data){
            //console.log(data)

var color=d3.scale.linear().domain(d3.extent(data, function (v){
                    return v[2]
                    })).range(['white', 'blue'])

margin=50
scaleValue=0.5

y=d3.scale.linear()
    .domain(d3.extent(data, function (v){
                   // console.log(v)
                    return v[1]                    
                    }))
    .range([600+margin, margin])

x=d3.scale.linear()
    .domain(d3.extent(data, function (v){
                    return v[0]
                    }))
    .range([margin, 600+margin])

    
body=d3.select('body')
svg=body.append('svg')
circle=svg
    .selectAll('circle')
    .data(data)
    
circle.enter()
    .append('circle')
    .attr('r', function (data, index) {
                return data[2]*scaleValue
           })
    .attr('cx', function (data, index) {
            //return index*25
            return x(data[0])
            })
    .attr('cy', function (data, index) {
            return y(data[1])
            })
    .attr('width', function (data, index) {
//            return data[2]
            return 10
            })
    .attr('height', function (data, index) {
            return 10
//            return data[2]
            })
    .attr('fill', function(d,i){
                return color(d[2])
            })
    .style('opacity', 0.5)
    
       .on('mouseover', function(d,i){
            
            })

        })