D3 Examples - Bham block 1

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body")
        .append("svg")
      .attr("width", 960)
      .attr("height", 500)
​
   var xScale = d3.scaleLinear()
       .domain ([0,40000])
       .range([100,800]);
   var yScale = d3.scaleLinear()
       .domain ([30,80])
       .range ([400,100]);
   var rScale = d3.scaleSqrt()
       .domain([0,1000000000])
       .range([0,100]);
   
   
   
   d3.csv("gapminder_avg.csv", function (info)   {
      //console.log(data);
       svg.selectAll("cirlce")
            .data (info)
        .enter()
          .append("circle")
                .attr("cy", function(d) {return yScale(+d.lifeexp);})
            .attr("cx", function(d) {return xScale (+d.gdp);})
                .attr ("r", function (d) {return 1+ (+d.population/10000000);})
                .attr ("fill", function (d) {return (d.color)})
                .attr ("stroke", "black")
                .attr ("stroke-width", 1.5)
                .attr ("fill-opacity", 0.5)   
                  
     /*
     data
        .sort(function(a,b) {return +a.gdp > +b.gdp;})
        .forEach(function(newdata,i)   {
        console.log(newdata.country);
​
  */
        
        
        /*
    svg.append("text")
      .text (newdata.country)
      .attr("y", 135+10*i)
      .attr("x", 120)
      .attr("font-size", 12)
      .attr("font-family", "garamond")
        .attr("fill", "green")
                
        
      })
      */
    })
 
   
/*
//  CODE FROM DUKE VIS - adding axes? Uses d3 version 3 
   
 // Various scales. These domains make assumptions of data.
   
var svg = d3.select("body")
        .append("svg")
      .attr("width", 960)
      .attr("height", 500)
      
var xScale = d3.scaleLog().domain([400, 70000]).range([0, 960]),
    yScale = d3.scaleLinear().domain([35, 80]).range([500, 0]),
    radiusScale = d3.scaleSqrt().domain([0, 5e8]).range([3, 40]),
 //   colorScale = d3.scaleCategory10();
​
// The x & y axes.
var xAxis = d3.svg.axis().orient("bottom").scale(xScale).ticks(12, d3.format(",d")),
    yAxis = d3.svg.axis().scale(yScale).orient("left");
​
// Add the x-axis.
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);
​
// Add the y-axis.
svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);
​
// Add an x-axis label.
svg.append("text")
    .attr("class", "x label")
    .attr("text-anchor", "end")
    .attr("x", width)
    .attr("y", height - 6)
    .text("Average GDP per capita");
​
// Add a y-axis label.
svg.append("text")
    .attr("class", "y label")
    .attr("text-anchor", "end")
    .attr("y", 6)
    .attr("dy", ".75em")
    .attr("transform", "rotate(-90)")
    .text("Average life expectancy (years)");
*/
   
   
  </script>
</body>
​
    