D3 Examples - Ejercicio 6

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;
    }
    
    .axisLabel {
      font-size: 20pt;
      font-family: verdana;
    }
    
    .grid line {
      stroke: lightgrey;
      stroke-opacity: 0.7;
      shape-rendering: crispEdges;
    }
​
    .grid path {
      stroke-width: 0;
    }
  </style>
</head>
​
<body>
  <script>
    
    function parse(row, year) {
        item = {}
        item.country = row['Country']
        item.year = row['Year']
        item.fertility = parseFloat(row['fertility'])
        item.life = parseFloat(row['life'])
        item.population = parseFloat(row['population'])
        item.child_mortality = parseFloat(row['child_mortality'])
        item.gdp = parseFloat(row['gdp'])
        item.region = row['region']
        if(item.year == year) 
          return item
    }
    
    function onchange() {
      selectValue = d3.select('select').property('value')
      d3.select('body')
        .append('p')
        .text(selectValue + ' is the last selected option.')
    }
​
    //Country,Year,fertility,life,population,child_mortality,gdp,region
// <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    
    const totalWidth = 800;
    const totalHeight = 600;
​
    var margin = { top: 50, right: 100, bottom: 100, left: 50};
    var width = totalWidth - margin.left - margin.right,
        height = totalHeight - margin.top - margin.bottom;
​
    var svg = d3.select("body")
    .append("svg")
    .attr("width", totalWidth)
    .attr("height", totalHeight)
​
    var chart = svg.append("g")
    .attr("transform", `translate(${margin.left}, ${margin.top})`)
      
    // gridlines in x axis function
        function make_x_gridlines(x) {      
            return d3.axisBottom(x)
             .ticks(5)
    }
​
    // gridlines in y axis function
    function make_y_gridlines(y) {      
        return d3.axisLeft(y)
           .ticks(5)
    }
    // LISTENER ON DATA READ
    d3.csv("gapminder_data.csv", row => parse(row, 1983)).
    then(datos => {
      
    
    
    var regions = 
        datos.
          map(d => d.region).
          filter((x,i,a) =>  a.indexOf(x) == i)
    var color = 
      d3.scaleOrdinal().
        domain(datos.map( d => d.region )).
        range(["#1b9e77", "#d95f02", "#7570b3",
           "#e7298a", "#66a61e", "#e6ab02",
           "#a6761d", "#666666"]);
            
​
      //SCALE DATA 
      const xScale = d3.scaleLinear().
      domain(d3.extent(datos, d => d.fertility)).
      range([0,width]).
      nice()
​
      const yScale = d3.scaleLinear().
      domain(d3.extent(datos, d => d.life)).
      range([height,0]).nice()
​
      var scalesqrt =d3.scaleSqrt().
      domain(d3.extent(datos, d => d.population)).
      range([5, 30])
      
      const xAxis = make_x_gridlines(xScale)
              .tickSize(-height)
              .tickFormat("")
      const yAxis = make_y_gridlines(yScale)
              .tickSize(-width)
              .tickFormat("")
​
      // add the X gridlines
      chart.append("g")         
          .attr("class", "grid")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis)
​
      // add the Y gridlines
      chart.append("g")         
          .attr("class", "grid")
          .call(yAxis)
​
      // add the X Axis
      chart.append("g").
            attr("transform",`translate(0,${height})`).
            call(d3.axisBottom(xScale)).
          attr("transform", `translate(0,${height})`).
          append("text").
          text("Fertility").
          attr("x", width/2).
          attr("y", 40).
          attr("fill","black")
​
      // add the Y Axis
      chart.append("g").
            call(d3.axisLeft(yScale)).
          append("text").
          text("Life expectancy").
          attr("x", - height/2).
          attr("dy", -25).
          attr("y", 0).
          attr("fill","black").
          attr("transform", "rotate(-90)")
​
            chart.append("text")
        .attr("x", (width / 2))             
        .attr("y", 0 - (margin.top / 2))
        .attr("text-anchor", "middle")  
        .style("font-size", "16px") 
        .style("text-decoration", "underline")  
        .text("Life expectancy vs fertility");
​
​
      //DRAW IT
      chart.selectAll("circle").data(datos)
        .enter().append("circle")
        .attr("cx", d => xScale(d.fertility))
        .attr("cy", d => yScale(d.life))
        .attr("r", d => scalesqrt(d.population)).
        style("fill",d => color(d.region)).style("opacity", 0.6);
      
      
​
    var legend = chart.selectAll(".legend")
        .data(regions)
        .enter().append("g")
        .attr("transform", 
              (d,i) => `translate(${-width / 15}, ${ 20 +i * 20})`)
​
    legend.append("rect")
        .attr("x", width - 18)
        .attr("width", 18)
        .attr("height", 18)
        .style("fill", d => color(d))
​
    legend.append("text")
        .attr("x", width - 24)
        .attr("y", 9)
        .attr("dy", ".35em")
        .style("text-anchor", "end")
        .text(d => d)
​
      })
  
  </script>
</body>
​
​
    