WCValues

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
        <title>D3: A simple packed Bubble Chart</title>
        <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
        <script src="\PapaParse-4.5.0\PapaParse-4.5.0\papaparse.js" type="text/javascript"></script>
         <script src="https://requirejs.org/docs/release/2.3.5/minified/require.js" type="text/javascript"></script>
         <link href="https://fonts.googleapis.com/css?family=Abel|Roboto:500" rel="stylesheet">
         <link href="https://fonts.googleapis.com/css?family=Rajdhani:700" rel="stylesheet">
         <script src="prep.js" type="text/javascript"></script>
        <style type="text/css">
             .g_main {
    cursor:pointer;
    pointer-events: all;
  }     
        </style>
</head>
<body>
    <script type="text/javascript">

//console.log(d3test);

dataset = dat['children']

dataset.forEach(function(d){
            if (['South Korea','Costa Rica','Saudi Arabia'].indexOf(d.Country) > -1){
                console.log('1')
                d.Country = d.Country.replace(' ','_')
            }})

var clicked = 0;

var diameter = 300;

var color = d3.scaleOrdinal(d3.schemeCategory20);

var bubble = d3.pack(dataset)
            .size([diameter, diameter])
            .padding(1.5);

var svg_height = 1200
        var svg_width = 1250

// Factor by which bars are compressed horiziontally 
        var compress = Math.pow(10,6.05)
        var uniq_countries = d3.map(dataset, function(d){return d.Country;}).keys()
        var scale = [...Array(uniq_countries.length).keys()];
        var country_scale = d3.scaleOrdinal()
                              .domain(uniq_countries)
                              .range(scale)
        // Color scale for positions        
        var uniq_pos = d3.map(dataset, function(d){return d.Position;}).keys()
        var position_scale = d3.scaleOrdinal()
                              .domain(uniq_pos)
                              .range(['#5d8198','#8badaa','#cecbb4','#ea8e71'])

// Background
        var svg = d3.select("body")
            .append("svg")
            .attr("width", svg_width)
            .attr("height", svg_height)
            .attr("class", "rect")
            .attr('fill','grey');

// Title

// Background color
         svg.append('g')
           .selectAll('rect')
           .data([1])
           .enter()
           .append('rect')
           .attr('x',0)
           .attr('y',0)
           .attr('width',svg_width)
           .attr('height',svg_height)
           .attr('fill','#F4F6F7')

// Title 
        var title = ['How','Much','Are World','Cup Teams Worth?']
        svg.append('g')
           .selectAll('text')
           .data(title)
           .enter()
           .append('text')
           .attr('x',svg_width*.565)
           .attr('y',function(d,i){return svg_height*.81+i*69})
           .text(function(d){return d.toUpperCase()})
           .attr('font-size',60)
           .attr('font-family','Abel')
           .attr('text-anchor','middle')
           .attr('opacity',.4)
           .attr('fill','grey')
           .attr('pointer-events', 'all')

// Total Value Of All Players
        total_val = 0
        dataset.forEach(function(d){
            total_val+=d.Value
        })
        
        /*
        svg.append('g')
           .selectAll('text')
           .data([1])
           .enter()
           .append('text')
           .attr('x',svg_width*.15)
           .attr('y',function(d,i){return svg_height*.985})
           .text(String(Math.round(total_val/Math.pow(10,9)))+'B')
           .attr('font-size',190)
           .attr('font-family','Abel')
           .attr('text-anchor','middle')
           .attr('opacity',.4)
           .attr('fill','grey')
         */

// Interactive Side Bar
        var reset = 0
        svg.append('g')
           .selectAll('rect')
           .data(dataset)
           .enter()
           .append('rect')
           .attr('x',svg_width*.76)
           .attr('y',function(d,i)
            {if (i!=0){if(d.Country != dataset[i-1].Country)
            {reset=i }}
            return (i-reset)*40+svg_height*.2275
            }
            )
           .attr('width',300)
           .attr('height',34)
           .attr('fill','#ececed')
           .attr('opacity',1)
        
        // Sidebar Price Bars
        reset = 0
        svg.append('g')
           .selectAll('rect')
           .data(dataset)
           .enter()
           .append('rect')
           .attr('x',svg_width*.76)
           .attr('y',function(d,i)
            {if (i!=0){if(d.Country != dataset[i-1].Country)
            {reset=i }}
            return (i-reset)*40+svg_height*.2275
            }
            )
           .attr('width',function(d)
            { var max_val = 0
                dataset.filter(j => j.Country==d.Country)
                .forEach(function(q){
                    if(q.Value >= max_val){max_val = q.Value}})
                return 250*d.Value/max_val})
           .attr('height',34)
           .attr('fill',function(d){return position_scale(d.Position)})
           .attr('opacity',0)
           .attr('class',function(d,i){
            return d.Country + '_sidebar sidebar'
           })

// Sidebar Text
        reset = 0 
        var sidebar_vshift = -23
        var sidebar_hshift = 10
        svg.append('g')
           .selectAll('text')
           .data(dataset)
           .enter()
           .append('text')
           .attr('x',svg_width*.76+sidebar_hshift)
           .attr('y',function(d,i)
            {if (i!=0){if(d.Country != dataset[i-1].Country)
            {reset=i }}
            return (i-reset)*40+svg_height*.2675 + sidebar_vshift
            }
            )
           .attr('fill','black')
           .attr('class',function(d,i){
            return d.Country + '_sidebar sidebar'
           })
           .text(function(d){return d.Player})
           .attr('font-size',20)
           .attr('font-family','Abel')
           .attr('opacity',0)

// Sidebar Prices
        reset = 0 
        svg.append('g')
           .selectAll('text')
           .data(dataset)
           .enter()
           .append('text')
           .attr('x',svg_width*.76+sidebar_hshift+275)
           .attr('y',function(d,i)
            {if (i!=0){if(d.Country != dataset[i-1].Country)
            {reset=i }}
            return (i-reset)*40+svg_height*.2675 + sidebar_vshift
            }
            )
           .attr('fill','black')
           .attr('class',function(d,i){
            return d.Country + '_sidebar sidebar'
           })
           .text(function(d){ return String(Math.round(d.Value/Math.pow(10,6),0))+'M'})
           .attr('font-size',17)
           .attr('font-family','Abel')
           .attr('text-anchor','end')
           .attr('opacity',0)

// World Cup Trophy SVG        
        imgs = svg.selectAll("image").data([0]);
        imgs.enter()
        .append("svg:image")
        .attr('href','https://image.flaticon.com/icons/svg/140/140521.svg')
        .attr('x',svg_width*.493)
        .attr('y',svg_width*.580)
        .attr('width',185)
        .attr('opacity',.15)

// Placeholder to zero shift relative to first bar
        var place = 0
        var left_shift = 180
        var top_shift = 40
        svg.append('g')
        .selectAll('rect')
        .data(dataset)
        .enter()
        .append('rect')
        .attr('x',function(d,i){
            if(i==0||dataset[i-1].Country != dataset[i].Country){
                place = i
                return left_shift}
            else{
                return ((left_shift+dataset[i-1].x_level/compress) + 1*(i-place))}
        })
        .attr('y', function(d){
            return country_scale(d.Country)*30 + 
            top_shift
        })
        .attr('width',function(d){
            return d.Value/compress
        })
        .attr('height',function(d){
            return 17.5
        })
        .attr('fill',function(d){return position_scale(d.Position)})

// Placing Country Names
        var v_text_shift = 15
        var h_text_shift = -45

/*
        svg.append('g')
       .selectAll('rect')
       .data(uniq_countries)
       .enter()
       .append('rect')
       .attr('y',function(d){
       return country_scale(d)*120 + top_shift - 15
       })
       .attr('x',function(d){return h_text_shift+2000-d.length*250})
       .attr('width',490)
       .attr('height',100)
       .attr('fill','#dcdcdc')
       .attr('opacity','.5')
       */

// Country Text
        svg.append('g')
       .selectAll('text')
       .data(uniq_countries)
       .enter()
       .append('text')
       .attr('y',function(d){
       return country_scale(d)*30 + v_text_shift + top_shift
       })
       .attr('x',h_text_shift+left_shift)
       .text(function(d){
            if (['South_Korea','Costa_Rica','Saudi_Arabia'].indexOf(d) > -1){
                return d.replace('_',' ').toUpperCase()
            }
        return d.toUpperCase()
       })
       .attr('font-size',20)
       .attr('font-family','Abel')
       .attr('text-anchor','end')
       .attr('fill','black')
       .attr('class','titles')
       .on('mouseover',function (d,i){
            d3.select(this)
            .attr('fill','red')
            .attr('font-family','Rajdhani')
            if(clicked == 0){ 
              d3.selectAll('.'+d+'_sidebar').attr(
                'opacity',1
            )}
           })
       .on('mouseout',function (d,i){
            if (clicked == 0){
            d3.select(this)
            .attr('fill','black')
            .attr('font-family','Abel')
            d3.selectAll('.'+d+'_sidebar').attr(
                'opacity',0
            )}
            else{
              if (d3.select('.'+d+'_sidebar').attr('opacity') == 0){
                d3.select(this)
                .attr('fill','black')
                .attr('font-family','Abel')
              }
            }
          })

.on('click', function(d,i){
            if (clicked == 1){
              if (d3.select('.'+d+'_sidebar').attr('opacity') == 1){
                d3.select(this)
                .attr('fill','black')
                .attr('font-family','Abel')
                clicked = 0
                console.log('clicked')
                d3.selectAll('.'+d+'_sidebar').attr(
                'opacity',0)
              }
              else{
                d3.selectAll('.titles')
                .attr('fill','black')
                .attr('font-family','Abel')

d3.select(this)
                .attr('fill','red')
                .attr('font-family','Rajdhani')
                d3.selectAll('.sidebar').attr(
                'opacity',0)
                d3.selectAll('.'+d+'_sidebar').attr(
                'opacity',1)
              }
              }
            else{
              d3.select(this)
              .attr('fill','red')
              .attr('font-family','Rajdhani')
              clicked=1
              d3.selectAll('.'+d+'_sidebar').attr('opacity',1)}})

// Country Total Values
       var value_shift = 90
       svg.append('g')
       .selectAll('text')
       .data(uniq_countries.concat(uniq_countries))
       .enter()
       .append('text')
       .attr('y',function(d){
       return country_scale(d)*30 + v_text_shift + top_shift -2
       })
       .attr('x',h_text_shift/2 +left_shift)
       .text(function(d){
        var total_val = 0
        dataset.filter(k => k.Country == d).forEach(function(j){
            total_val += j.Value
        })
        if (total_val/Math.pow(10,6) > 999){
        return '\u20AC'+String(Math.round(total_val/Math.pow(10,9),0))+'b'
        }
        else{
        return '\u20AC'+String(Math.round(total_val/Math.pow(10,6),0))+'m'}})
       .attr('font-size',12)
       .attr('font-family','Abel')
       .attr('text-anchor','middle')
       .attr('fill','black')

svg.append('g')
       .selectAll('rect')
       .data([1])
       .enter()
       .append('rect')
       .attr('x',left_shift)
       .attr('y',28)
       .attr('width',1.4)
       .attr('height',970)
       .attr('fill','grey')

</script>
</body>
</html>

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

https://requirejs.org/docs/release/2.3.5/minified/require.js