README.md

## README.md

      
        

          Raw
        
        
          
            
          
          
            
              README.md
            
          
        
      
    
  
    Built with blockbuilder.org

  

  

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.8/d3.min.js"></script>
  <style>
 //Change the encoding of the radius to represent the reviews per month
    circle {
      opacity: 0.2;
    }
    body {
        font-family: futura;
    }
    h2.title {
      color: black;
      text-align: center;
    }
    .axis {
      font-family: arial;
      font-size: 0.7em;
    }
    text {
      fill: black;
    }
    .label {
      font-size: 2em;
    }
    path {
      fill: none;
      stroke: black;
      stroke-width: 1px;
    }
    .tick {
      fill: none;
      stroke: black;
    }
    .line {
      fill: none;
      stroke: #4eb0bb;
      stroke-width: 1px;
    }
  </style>
  <script>
    function draw(data) {
    "use strict";

    /*
        D3.js setup code
    */

    // set margins according to Mike Bostock's margin conventions
    // http://bl.ocks.org/mbostock/3019563
    var margin = {top: 25, right: 40, bottom: 150, left: 75};

    // set height and width of chart
    var width = 1400 - margin.left - margin.right,
        height = 800 - margin.top - margin.bottom;

    // specify the radius of our circles and the
    // column we want to plot
    var radius = 4,
        field = 'San Francisco',
        x_field = "number_of_reviews",
        y_field = "availability_365",
        r_field = 'reviews_per_month';
    // Append the title for the graph
    d3.select("body")
        .append("h2")
        .text(field + " Listings")
        .attr('class', 'title');

    // append the SVG tag with height and width to accommodate for margins
    var svg = d3.select("body")
                .append("svg")
                    .attr("width", width + margin.left + margin.right)
                    .attr("height", height + margin.top + margin.bottom)
                .append('g')
                    .attr('class','chart')
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    // remove missing values
    data = data.filter(function(d) {
      return d[y_field];
    });

    data = data.filter(function(d) {
      return d[r_field];
    });
    // bind our data to svg circles for the scatter plot
    svg.selectAll("circle")
        .data(data)
        .enter()
        .append("circle")

      // maximum price
      var max_y = d3.max(data, function(d) {
          return +d[y_field];
      });

      // get min/max review count
      var review_extent = d3.extent(data, function(d){
          return +d[x_field];
      });

      // Create x-axis scale mapping dates -> pixels
      var review_scale = d3.scale.linear()
          .range([0, width])
          .domain(review_extent);

      // Create y-axis scale mapping price -> pixels
      var measure_scale = d3.scale.linear()
          .range([height, 0])
          .domain([0, max_y]);

      // Create D3 axis object from time_scale for the x-axis
      var x_axis = d3.svg.axis()
          .scale(review_scale);

      // Create D3 axis object from measure_scale for the y-axis
      var measure_axis = d3.svg.axis()
          .scale(measure_scale)
          .orient("left");

      // Append SVG to page corresponding to the D3 x-axis
      svg.append('g')
          .attr('class', 'x axis')
          .attr('transform', "translate(0," + height + ")")
          .call(x_axis);

      // Append SVG to page corresponding to the D3 y-axis
      svg.append('g')
          .attr('class', 'y axis')
          .call(measure_axis);

      // add label to y-axis
      d3.select(".y.axis")
          .append("text")
          .attr('class', 'label')
          .text("Price (dollar)")
          .attr("transform", "rotate(-90, -43, 0) translate(-400)");

svg.append("text")      // text label for the x axis
        .attr("x", 595 )
        .attr("y", 660 )
        .style("text-anchor", "middle")
        .text("Day of the Year");

      // based on the data bound to each svg circle,
      // change its center-x (cx) and center-y (cy)
      // coordinates
      d3.selectAll('circle')
          .attr('cx', function(d) {
              return review_scale(+d[x_field]);
          })
          .attr('cy', function(d) {
              return measure_scale(+d[y_field]);
          })
          .attr('r', function(d) {
            return d[r_field];
          })
          .style('fill', function(d) {
            switch (d['room_type']) {
              case 'Entire home/apt':
                return 'red';
              case 'Private room':
                return 'green'
              case 'Shared room':
                return 'blue';
              default:
                return 'gray';
            }
          });
    }
  </script>
</head>
  <body>
    <script>
      /*
      Use D3 to load the CSV file and pass
      the contents of it to the draw function.
      */
      d3.csv("http://jay-oh-en.github.io/interactive-data-viz/data/airbnb/listings.csv", draw);
    </script>
  </body>
</html>