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 nest = d3.nest()
  .key(function(d) { return d[0]; })
  .rollup(function(d) {
    return {
      meanVakValue: d3.mean(d, function(g) { return g[0]; })
    };
  })
  .map(data);
var nestedData = d3.entries(nest);   
    console.log(nestedData)
    
///////////////////  
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([300+margin, margin])

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

    
body=d3.select('body')
svg=body.append('svg')
circle=svg
    .append('g')
    .selectAll('rect')
    .data(data)
    
avgs = svg.append('g')
    .selectAll('rect')
    .data(nestedData)
    .enter()
    .append('rect')
    .attr('x', function (data, index) {
            //return index*25
            return x(index)
            })
    .attr('y', function (data, index) {
            return 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){
        console.log(d)
                return color(d.value.meanVakValue)
            })
console.log(avgs)
circle.enter()
    .append('rect')
    .attr('r', function (data, index) {
                return data[2]
           })
    .attr('x', function (data, index) {
            //return index*25
            return x(data[0])
            })
    .attr('y', function (data, index) {
           ...