Old school D3 from simpler times

All examples By author By category About

dejso2

Full window Github gist

D3

Built with blockbuilder.org

!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;
    }
  </style>
</head>

<body>
  <h1>Life Expectancy vs. Fertility 1990</h1>

<script>
    
      const totalWidth = 900;
      const totalHeight = 500;
      
      var margin = {top: 80, right: 180, bottom: 100, left:100};
    	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", totalWidth);
      
      var scatter = svg.append("g")
    								   .attr("transform", `translate(${margin.left},${margin.top})`);
    
      function typeClean(row){
        r = {}
        r.life = row["life"];
        r.fertility = row["fertility"]; 
        r.year = row["Year"];
        r.population = row["population"]
        r.region = row["region"]
        if (r.year == 1990){
          return r;
        }
      }
    
   		d3.csv("gapminder_data.csv", 
             row => typeClean(row)).then(datos => 
        {
	       //escalas
	       const xExtent = d3.extent(datos, d => d.fertility)
	       const xScale = d3.scaleLinear()
	       									.domain(xExtent)
	       									.range([0,width])
                          .nice();
	       const yMax = d3.max(datos, d => d.life)
	       const yScale = d3.scaleLinear()
	       									.domain([0,yMax])
	       									.range([height,0])
         									.nice();
        
         const popMax = d3.max(datos, d => d.population)
         const popMin = d3.min(datos, d => d.population)
         var sqrtScale = d3.scaleSqrt()
													 .domain([0, popMax])
													 .range([1, 5])
         
        var colorScale = d3.scaleOrdinal(d3.schemeCategory10)
    
        const xAxis = d3.axisBottom()
        								.scale(xScale)
        const yAxis = d3.axisLeft()
        								.scale(yScale)
        								.ticks(10)
        
        scatter.append('g')
        		 .call(yAxis)
        scatter.append('g')
        		 .call(xAxis)
        		 .attr("transform", `translate(0,${height})`)
        
      	scatter.selectAll("circle")
          	 .data(datos)
      	  	 .enter().append("circle")
        		 .attr("cx",d => xScale(d.fertility))
        		 .attr("cy",d => yScale(d.life))
     	 			 .attr("r", d => sqrtScale(d.population))
        		 .attr("width",2)
          	 .attr("height",d => yScale(d.fertility))
        		 .attr("stroke", "#FFF")
        		 .attr("fill", d => colorScale(d.region));
   			svg.append("g")
   			    .append("text")
   			    .classed("label", true)
   			    .attr("x", totalHeight-50)
   			    .attr("y", totalHeight-65)
   			    .style("text-anchor", "end")
   			    .text("Fertility");
   			svg.append("g")
   			    .append("text")
   			    .classed("label", true)
   			    .attr("transform", "rotate(-90)")
   					.attr("x", -margin.right*1.6)
   			    .attr("y", height/2.7)
   			    .attr("dy", "-3em")
   			    .style("text-anchor", "start")
   			    .text("Life Expectancy");
        
        
				// visualiza la leyenda
			  var legend = svg.selectAll(".legend")
			      .data(colorScale.domain())
			      .enter()
            .append("g")
			      .attr("class", "legend")
			      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
			
			  // dibuja los rectangulos
			  legend.append("rect")
			    .data(datos) 
          .attr("x", totalWidth-margin.right+150)
        	.attr("y", margin.top)
			    .attr("width", 18)
			    .attr("height", 18)
			    .style("fill", d => colorScale(d.region));
			
			  // dibuja los textos
			  legend.append("text")
            .data(datos) 
			      .attr("x", totalWidth-margin.right+140)
			      .attr("y", margin.top+9)
			      .attr("dy", ".35em")
			      .style("text-anchor", "end")
			      .text(d => d.region)
});
    
  </script>
</body>

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