D3 Examples - Module 2 SVG test

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Loading CSV Data with D3</title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
    <style type="text/css">
      body {
        background-color: #fff1e0;
        margin: 0;
      }
      .text-label {
        fill: #9e2f50;
        font-family: Arial, sans-serif;
        font-size: 48px;
      }
      .rect-text {
        fill: #256ea6;
        text-anchor: middle;
        font-family: Arial, sans-serif;
        font-size: 24px;
      }
    </style>
  </head>
  <body>
  
    <script type="text/javascript">   
      var circles = [1,2,3,4,5,6];
      var textArray = ['And', 'here', 'are', 'some', 'funky', 'rectangles'];
​
      var svg = d3.select('body').append('svg');
​
      svg.attr('width', 800)
          .attr('height', 600)
​
      svg.selectAll('circle')
          .data(circles)
          .enter()
          .append('circle')
          .attr('cx', function(d, i) {return (40 + (120 * i)) })
          .attr('cy', function(d, i) { return (300 - ( 20 * i)) })
          .attr('r', function(d, i) {return (20 * (i + 1)) })
          .style({
            'fill': '#bb6d82',
            'opacity':  0.5
          });
​
      svg.selectAll('g')
      .data(circles)
      .enter()
      .append('g')
      .attr('transform', function(d, i) { return 'rotate(' + (i * -8) + ',200,300)'})
      .append('rect')
      .attr('x', function(d, i) { return (-50 + (circles[i] * 100)) } )
      .attr('y', 500)
      .attr('width', 150)
      .attr('height', 80)
      .style('fill', '#76acb8')
      .style('opacity', function(d, i) { return (0.4 +(0.1 * i)) })
      
      d3.selectAll('g')
        .append('text')
        .text(function(d, i) { return textArray[i] })
        .attr('class', 'rect-text')
        .attr('x', function(d, i) { return ( 25 + (circles[i] * 100)) } )
        .attr('y', 546)
​
​
      svg.append('text')
        .text('Some nice circles')
        .attr('class', 'text-label')
        .attr('x', 160)
        .attr('y', 280)
        .attr('transform', 'rotate (-19.3)')
​
      svg.append
      //Load in contents of CSV file
      d3.csv('obesityPoverty.csv', function(data) {
        //Now CSV contents have been transformed into
        //an array of JSON objects.
        //Log 'data' to the console, for verification.
        console.log(data);
      });
    </script>
​
  </body>
</html>
    