D3 Examples - Gapminder

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
   <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .barras div {
      margin: 2px;
      padding: 10px;
      text-align: right;
      color: white;
    }
    .axis {
      font-size:30px;
    }
  </style>
</head>
​
<body>
  <h1>Barómetro Junio GAD3</h1>
​
​
  <script>
    
    
    
    const totalWidth = 900;
    const totalHeight = 420;
      
    var margin = {top: 20, right: 10, bottom: 80, left: 90};
    var width = totalWidth - margin.left - margin.right;
    var height = totalHeight - margin.top - margin.bottom;
    
    var svg = d3.select("body")
                .append("svg")
                .attr("width",totalWidth)
                .attr("height",totalHeight)
    
      /*d3.csv("female_literacy_birth_rate.csv").then(datos => {
        d3.selectAll(".circles_svg rect")
          .data(datos)
          .attr("cx",d => d.fertility)
          .attr("cy",d => d.literacy)
          .attr("r", d => d.population)
      })*/
    var year = 1970;
​
    function typeClean(row){
      r = {}
      r.country = row.Country;
      r.continente = row.Continent;
      r.year = +row.Year;
      r.fertility = +row.fertility;
      r.esperanza = +row.life;
      r.population = +row.population;
      r.region = row.region;
      //return r;
      
        if(r.year==year){
            return r;
        }
     }
    
    
    
  d3.csv("gapminder_data.csv",row => typeClean(row)).then(datos => {
    //Scales
    const xMax = d3.max(datos, d => d.esperanza)
    const xScale = d3.scaleLinear().domain([30,82]).range([0, width])
    
    const yMax = d3.max(datos, d => d.fertility)
    const yScale = d3.scaleLinear().domain([0, 9]).range([height, 0])    
    
    const rMax = d3.max(datos, d => d.population)
    const rMin = d3.min(datos, d => d.population)
    const rScale = d3.scaleSqrt().domain([rMin, rMax]).range([4, 25])
    
    const xAxis = d3.axisBottom()
                    .scale(xScale)
    const yAxis = d3.axisLeft()
                    .scale(yScale)
    var colorScale = d3.scaleOrdinal(d3.schemeCategory10)
    
    var chart = svg.append("g")
                   .attr("transform", `translate(${margin.left},${margin.top})`);
        chart.append('g')
             .attr("transform", `translate(0,${height})`)
             .call(xAxis)
             .append("text")
             .text("Esperanza_vida")
             .attr("x",width/2)
             .attr("y",48)
             .attr("fill","black")
             .attr("class","axis")
             
        chart.append('g')
             .call(yAxis)
             .append("text")
             .text("Fertilidad")
             .attr("x",-78)
             .attr("y",-26)
             .attr("fill","black")
             .attr("class","axis")
             .attr("size",-30)
             .attr("transform","rotate(-90)");
​
        
        chart.selectAll("body").data(datos).enter()
             .append("circle")
             .attr("cx", d => xScale(d.esperanza))
             .attr("cy", d => yScale(d.fertility))
             .attr("r",d => rScale(d.population))
             .attr("fill", d => colorScale(d.region))
             .attr("stroke", "#FFF")
             .attr("stroke-width",1.5)
    
  })
  </script>
</body>
    